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).
Related
I have a custom cursor working on Chrome and Firefox by using the CSS property, cursor. However, on Microsoft Edge, the cursor seems to have an offset. I have to aim above my custom cursor a bit in order to select items accurately.
Is there something I can do to fix this? Or is this some sort of limitation?
Edit: I should mention that I'm using a custom image as my cursor.
In both IE and Edge only .cur files are supported, see https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx. (Edge supports other formats but not the interaction point definition as you mentioned in your comment to Martin Beeby's answer, rendering those pretty useless.) The .cur file allows you to define the interaction point. Just google for ".cur editor" and choose the editor that suits you to create a .cur file.
Since other browsers do support the definition for the interaction point, but not the .cur format, you must define two cursor properties in your css, the first with the .cur file and the second with a .png or other format and the interaction point definition. IE and Edge will ignore the second and for other browsers the .cur file will be overwritten, that way it'll work cross-browser.
div {
cursor: url(path/to/cursor.cur), auto; /*IE and Edge*/
cursor: url(path/to/cursor.png) 4 12, auto; /*Chrome, FF, etc.*/
}
One side note, be sure to read this (http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/) article. It's about a relative path bug in IE 6 & 7, but the bug is still around in IE 11. The bug seems resolved in Edge though (at least when I tried recently). So you need to fiddle a bit with the path to the .cur file to get it working on both IE and Edge. See the workarounds mentioned in the article.
In CSS you can pass in coordinates which specify the interaction point.
Perhaps adding these will help solve your issue?
/* Using URL and coordinates */
cursor: url(cursor1.png) 4 12, auto;
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.
Would both these images be downloaded? Is the browser smart and only downloads the last one? Will it start to download the first one and then cancel it, or will it wait until all css is loaded and then download the last image?
body { background:url(img/bg/bg1.png) }
body { background:url(img/bg/bg2.png) }
Test it out: http://fiddle.jshell.net/8xZNY/show/
And the results:
You overwrite the background property with your second declaration, so no, they aren't downloaded twice. Only the last one is actually used.
I actually didn't know, so I tested it out:
body { background:url(http://placekitten.com/200/300) }
body { background:url(http://placekitten.com/g/200/300) }
It probably depends on the browser, but it seems that at least for Chrome (and logically) it parses the stylesheet first to determine rules that get applied, then downloads the images for applied rules. This means that only the second image gets downloaded (the Network tab confirms this).
EDIT: Same result testing in Firefox
MORE EDIT: Same result even using the style attribute to set the background. It will only download the one with the highest specificity it seems.
CSS is an interpreted language. It will execute line by line until it is finished, so yes -- it will grab both.
Edit:
By nature of an interpreted language, this is how it should work...
It seems though that there are intelligent preproccessors baked into browsers to look for things like this.
I have a custom cursor that is using an image. My original code:
cursor:url(../images/drag_mini_bg.png);
I then discovered that Firefox requires you to define a default backup in case the image is not found, and changed it to:
cursor:url(../images/drag_mini_bg.png), default;
This worked for Firefox and Chrome, but not IE. I read that IE uses a different source for the path than other browsers and implemented this solution:
cursor:url(../images/drag_mini_bg.png),url(/images/drag_mini_bg.png),default;
(The second url is relative to the html file rather than the css file that this code is included in.)
This didn't seem to help, so I found out about this bug and changed the image to a .cur file:
cursor:url(../images/drag_mini_bg.cur),url(/images/drag_mini_bg.cur),default;
However, it is still not showing up in IE. Anything else I can try?
Most of what you've read is correct, but I'll make a few amendments:
Firefox does indeed require the additional parameter to be added. My understanding is that the ideal value for this is auto. But if default works for you, use it.
As you've been told, IE can only display cursors of the .cur file type. PNGs and GIFs do not work.
However, I've never heard anything about IE using a different path; the same path has always worked fine for me in all browsers (when using a CUR file, of course). You might want to provide a reference to where you heard this, but I'd suggest that dropping the second URL may solve your problems.
There's a good site called Quirksmode that has a lot of browser compatibility tables. In particular, they have a very thorough table covering CSS cursors, which shows exactly how to format it to make it work in all browsers, with examples and notes about the quirks.
Hope that helps.
If you're still trying to figure this out 8 years later...I'll add that some browsers have a maximum image size, so maybe yours was too big. I believe you want to keep it under 32x32 pixels.
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.