I have several img tags (which are all part of the class popover) which I offer the possibility to the user to enlarge on click. So that they know the images can be zoomed-in, I want to change the img's cursor for a custom one (since zoom-in is not an available value for the cursor property in IE):
.popover
{
cursor: url('../Images/zoom.cur'), default;
}
This works very well in Chrome and Firefox but it does not in IE8 (the IE version I tested, but I suspect it does not work any better in the other versions). In order to find a solution, I read this article that specified the following:
.. in IE, for style sheets, the base URI is that of the source element, not that of the style sheet. Totally opposite to W3C specifications, but, yeah … that’s MSIE.
The source element would be my ASP.NET page Index.aspx. This is how my project is structured (I included only the referred files):
Project.Web
├── Css
│ ├── style.css
├── Images
│ ├── zoom.cur
├── Print
│ ├── Index.aspx
So, technically, the correct URI for both IE and the other browsers would be '../Images/zoom.cur', since my cursor image is located in the Images folder which is located at the root of my web project. Is there something I'm missing in order to make it work in all browsers?
I figured it out. My mistake was that in order to create my .cur file from a .png file, I just changed the extension in the Windows Explorer. Then, specifying this:
cursor: url('../Images/zoom.cur'), default;
Would work for modern browsers, but not for IE. The reason why that didn't work is that it compressed the file and not all browsers can read the compressed ones. So I used an online tool to convert my file correctly.
Be aware, I suggest that your .png file should be of size 32x32 before converting it, because IE9 (and IE8 for me too) seems to resize cursors that are smaller than this to 32x32.
Now, if you keep the above CSS line, it is going to work for IE, but not for modern browsers. For some reason I don't understand, the new uncompressed .cur file does not work anymore for modern browsers like Chrome. So, I decided to use the original .png file for the modern browsers. My final CSS line is:
.popover
{
cursor: url('../Images/zoom.png'), /* Modern browsers */
url('../Images/zoom.cur'), /* Internet Explorer */
default; /* Older browsers and Firefox */
}
For people who are confused on why the default value is necessary for Firefox, the article that helped me solve my problem said it pretty well:
You must add a default “built-in” cursor after your custom cursor, or the custom cursor will not load in Firefox. Think of it as Mozilla’s way of enforcing good web practices.
Related
On http://onpole.org/roland/, I have used background-images to decorate the page.
I, myself, use Mozilla Firefox, so I created my CSS with that browser in mind.
However, if I open the same website in different browsers (Chrome, Safari, have not tried IE yet) I see minor differences, which disrupt the layout.
Examples:
(this one actually is wrong in Firefox)
At the top of the page, there is a drawing, in which a white line comes out and goes down, into the next part of the website.
In Firefox there is an error when it comes to the next part,
But in Safari and Chrome this line is correct!
I would post more examples, but apparantly my reputation is too low to post more than 2 links. There goes being specific.
There's also a part where there are arrows coming out of the line. This works fine in Firefox, but has an error in both Safari and Chrome.
So the first error is not correct in Firefox but works fine in Safari and Chrome.
The second error is exactly the other way around.
I am posting this here because I need advice on how to tackle these problems.
Should I make browser specific css where I move the line 1 pixel?
Or is there some other way? Or do any of you know why these differences occur?
Just a suggestion but why not create a separate stylesheet? When I helped redesign my company's website, my supervisor and I found that our stylesheet rendered properly in Chrome but not in Firefox. Ultimately we created a stylesheet to fix those areas. It would only launch if the browser being used was Firefox.
Using a simple PHP command (and assuming that your Gecko stylesheet will be stored in a folder called CSS in your site's main template directory), here's how you can detect if the browser being used is Firefox which will then force the Gecko stylesheet to launch before the page is even loaded:
// firefox
if ($this['useragent']->browser() == 'firefox') {
// add gecko stylesheet
$this['asset']->addFile('css', 'css:gecko.css');
}
Important: When writing a stylesheet meant for Gecko-based browsers only, the sheet must be written as follows:
#-moz-document domain(YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
Only the code in between the { } will be read in Firefox. The best thing of all is if you want to target specific subdomains on your site, you can add a declaration for that subdomain all on the same stylesheet.
#-moz-document domain(YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
#-moz-document domain(SUBDOMAIN.YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
Just remember to keep your rules inside the curly { } brackets and you'll be good to go.
The site I am currently working on is http://rattscallion.com/ I am focusing my efforts on getting the site to look proper in IE.
I was having trouble getting the frame on the pages (look at /murals.html for the page I'm working on first). IE9 said that the inline-style stated that the background-image was "none," so it crossed out the original background image. I figured it might be getting this from somewhere on the main stylesheet so what I did was make a new frame that only exists in IE and style it only in the IE stylesheet. Unfortunately this also doesn't work...it still says that an inline-style is setting the background-image to "none", but there is no such thing!
I double-checked and this is happening in IE9 standards mode. So why is this happening? Can anyone help figure out how to "force" it over what IE perceives as the inline style?
Well there's your problem:
CSS was ignored due to mime type mismatch
normalize.css
If you check the network calls the normalize.css is received as text/plain instead of text/css. You should install static content (under server roles) in your IIS as for some weird reason it's not installed by default. I'm betting one WHOLE dollar you're using IIS.
You could have just copy pasted the normalize.css into a server side css file so it's not accessed remotely.
I got it working by doing the following:
remove #framePos img{ display: none; } from styles-ie.css
remove unitpngfix.js - the png filter fix was for ie6 and serves no purpose on ie9 (it's actually one of the reasons the frame does not show)
Note: the frame.png pic is place in lots'o'places as background so you should consider a little clean up of the css files
Another Note: unitpngfix.js replaces the frame.png with the clear.gif and places transparency filters on every png element. So tinkering on css will not do anything until you remove the js.
I am compiling several stylesheets into one min stylesheet in a staging environment The styles are applied locally in IE where each stylesheet is separate, but they are not being applied in the staging environment in IE where the stylesheets are compiled into one min stylesheet. I have run the stylesheets through a CSS validator and have gone through each stylesheet and corrected any syntax errors that I found. I don't necessarily need to know how to solve the problem, I mainly want to know where the problem exists. The IE developer tools aren't giving me any feedback related to the problem of styles not being applied.
Here is a link to the login page in the staging environment: https://s-app.joinhere.com/manage/sessions/new. The styles are in the stylesheet, they just aren't being applied in IE. Here's a link to the compiled min stylesheet: https://staging.joinhere.com/assets/manage-d4f70cefc93b170b5f2a04509db697c8.css
Thanks!
I tried your page, and it works fine in Chrome. However it looks weird in IE9, as if the CSS styles are not being applied, just as you described. For example, the style body#manage-sessions #main_container #login_container is not getting applied. I looked at the css tab in the developer tools, and it turns out the style is not even there, which explains how it is not working. To find out why, I used the networks inspector from the developer tool and examined the response when IE9 is downloading the css, and the style body#manage-sessions #main_container #login_container is indeed in the response. This lead me to believe that there must be some limit on the max css file size for IE. It appears that this is indeed the case as described here. Apparently IE simply ignores additional styles if the css file gets past a certain size. So this explains why everything works when the css files are separate, and why things fall apart after you combine them. To solve the problem try splitting up your large css file into 2 or more smaller ones that fall under the IE limit, and see if this corrects the problem.
I'm not sure about your personal setup, however, anything < IE 10 can only handle 32 individual stylesheets, anything after will still show up in the Dev tools like its working but rest assured, the 33 stylesheet is committed to a life of silent failure.
I am trying to change cursor with .gif image. It will be shown on whole page not only one link. I made it like
body {
cursor:url(Butterfly.gif);
}
it does not work. I have also .cur file. It works on IE but not on Firefox.
You have to add a fallback, e.g.
body {
cursor: url(Butterfly.gif), url(Butterfly.ani), auto;
/* ^^^^^^
compulsory, according to CSS 2.1
*/
}
See https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property for detail.
If you insist, you have to use the .cur file for the sake of Internet Explorer.
Internet Explorer up to and including
version 8 only support URI values of
type .CUR and .ANI. (The other listed
browsers list have support for .CUR,
.PNG, .GIF and .JPG but not .ANI .)
Note also that the Windows operating
system requires the image to be 32 x
32 pixels or smaller although the
specifications do allow for larger
sizes than this.
http://reference.sitepoint.com/css/cursor
Although I'd say don't use it at all.
You might want to use the absolute path (http://www.example.com/images/Butterfly.gif) to be sure that it works at all, instead of the relative path (Butterfly.gif).
This is for using in Safari, though it could probably be used on Firefox as well. In Chrome you have to add a plugin anyway (which generally allow for custom CSS per domain), and Opera already allows this to be done without needing any CSS. But while it's for customizing on the client-side, it's also a pure CSS question. So I'm using no plugins here.
So, again, I got a custom CSS code (easily) working for all domains. Now I want to get specify CSS code for each domain. All with just 1 CSS file that's being loaded by Safari.
Over the web and googling, I've found two ways to supposedly do this, but none actually worked. They're both documented on userstyles.com:
#-moz-document domain("your-domain.com") { }. This would be perfect, since I can have several tags like that and just choose which style will be loaded for which domain. It just doesn't work.
#namespace is quite confusing and I've tried every variation I could think of. None worked.
Safari does not appear to support the #-moz-document rule, which would explain why that wouldn't have worked for you. In Firefox, the following stylesheet will work:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("stackexchange.com"), domain("stackoverflow.com") {
/* your styles here */
}
However, in Safari 5, there is an extension called User CSS (note: link is to the developer's website and not to a page in the Safari Extensions gallery; caveat emptor) that will allow you to apply a single user stylesheet to multiple sites. (It seems to be the rough Safari equivalent of Stylish.)
With respect to your last comment, I think you're right: there still seems to be no way to do this with only CSS.
have you tried setting a <link /> src dynamically based on the document.domain? If you're using javascript, that is. This will let you set the src of the link tag to mydomain.com.css or myotherdomain.com.css