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;
Related
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.
I am having trouble with cursors not being pulled through in WebKit browsers. Surprsingly IE and Opera work as I expect them to. Here's the CSS
.olControlDrawFeatureActive {
cursor: url(<DOMAIN>/common/images/cursors/draw.png), crosshair, default;
}
It quite simply changes the cursor to either the Draw png or, if it doesn't accept custom cursors or PNGs (like IE or Opera) then it should default to the crosshair. Works fine in IE and Opera, it goes to the crosshair as I want it to, FireFox, Safari and Chrome on the other hand refuse to return any css for this at all. Looking at the returned CSS in Firebug I just get.
.olControlDrawFeatureActive {
}
Empty, and utterly useless. I have tried replacing the URL with it's full path and relative path and (and this is the most confusing bit for me) I have tried removing the custom cursor entirely so it should default to the crosshair, but still it just returns an empty CSS rule! It's been bugging me for a while now because it originally worked fine in Webkit but not in IE, got it working in IE and now WebKit decides to not play ball! Am I doing something really obvious wrong? Any help or pointers would be hugely appreciated as it is driving me bananas
The problem seemed to lay in the fact that I had specified 3 levels of cursors i.e. The Custom one, the Crosshair and the Default cursor. There was no need to have the default one in there anyway as Crosshair is accepted by all browsers. Removing this seemed to make it work.
This seems strange though, does CSS only allow for two levels of cursors? If so then why did Opera and IE accept it, do they just ignore the first one?
Fixed CSS
.olControlDrawFeatureActive
{
cursor:url(<DOMAIN>/common/images/cursors/draw.png),crosshair;
}
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).
I'm working with some CSS (from a Joomla template) like this:
div#logo {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: transparent url(../images/head.png) no-repeat scroll 0 0;
...
}
I've looked up some of those -moz- properties and they seem to be assigned their default values, and if I turn them off in Firebug nothing happens visibly.
Would there be a reason to add them to a CSS file? Are they for an old version of Firefox perhaps?
I think what's happened is someone's set a background shortcut rule and then looked at the ‘computed style’ resulting from that shortcut rule in the DOM inspector. They've noticed that setting the style also sets Mozilla's background-clip, -origin and -inline-policy properties, and tried to reproduce these rules without understanding what they're for (namely a detail of Mozilla's CSS implementation, and potentially CSS3 in future).
Certainly changing -moz-background-inline-policy would only have any effect on elements that were display: inline (which div isn't by default), and changing the clip/origin properties around the border would only make any difference if the element actually had a border.
Get rid of them.
Chances are good that these properties don't need to be there. I'd suspect that they're included to ensure consistent rendering across different versions of Firefox. I guess the answer is, if you're seeing no difference from disabling them in the versions of Firefox you're interested in supporting, take them out.
background-clip isn't supported on current Firefox builds AFAIK, so the author has probably put them in preempting a problem (though that would be odd as they are all set to the default anyway, and they haven't included the opera or webkit prefixes...)
background-inline-policy is default as continuous in all Firefoxes, and background-origin is default as padding in them all too.
I'd say pointless code for this one.
If I turn them off in Firebug nothing happens visibly.
I'm not sure on those particular attributes, but have you checked that the browser isn't using a cached style sheet?
I am facing issues with text box size when veiwing in Fire Fox 3.6.
< input class="dat" type="text" name="rejection_reason" size="51" maxlength="70" onchange="on_change();">
style is as:
.dat {
font-family : verdana,arial,helvetica;
font-size : 8pt;
font-weight : bold;
text-align : left;
vertical-align : middle;
background-color : White;
}
Text box size in Fire Fox is bit smaller than IE6.
Not sure why IE6 and FireFox displaying text box of diff size.
Normal problem when developing for different web-browser engines.
Note that you maybe should develop for FireFox 3.6 rather than IE6 because IE6 have set to "old browser" that microsoft is not supporting anymore. Change your code to work good in FireFox, IE, Chrome, Opera.
look for more info at:
https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site
Try specifying the width in your css. If that remains broken, you can append an asterisk to the front of the width word as a second entry and it will apply only in IE6.
.dat
{
width: 100px;
*width: 105px; -- or whatever makes it look correct
}
EDIT: Thanks for the update on the special character.
With a more full explanation, which I just had to give to a manager;
IE6 was built around 2000, and ignored several significant web standards at the time. IE6 was somewhat of a "lesson learned"; IE7 is better about following those standards, and IE8 is better still.
Firefox was built around Netscape/Mozilla, and importantly, they followed the public standard as much as they could. Firefox largely behaves like Safari, Chrome, Opera, and the tons of tiny-marketshare browsers out there.
Businessperson asks:
So, why support the standard, instead of IE, which is the big kid on the block? Almost all of our customers use IE!
Answer:
Because IE is slowly moving towards the standard, too. If we support Firefox, IE8 is easy, and we probably get IE7 as well with almost no changes. IE6 is the fly in the ointment here.
If we support IE6 - the original proposal - then IE7 is a special case, IE8 is another special case, Firefox is a special case, and so on.
If we can encourage users to move away from IE6, that's our best case scenario. I believe Microsoft officially ended all support - including security patches - for IE6 when Server 2003 SP1 left support, April 2009. Google has stopped supporting IE6 entirely, for example, politely letting users know they need to upgrade "for the full site experience". Sites like IE6NoMore offer a pretty slick CSS popup for those running IE6, giving them a few upgrade options.
But in the meanwhile, since customers do use it, IE6 is here to stay, and it's easiest - and most maintainable - to build to the standards, and hack our way back to IE6 until it's done.
You have not specified its width just that you want it to take 51 charecters via the size attribute. I would suggest removing the Size="51" attribute and adding a style of width:666px;
EDIT: after your comment
Firstly just because you can does not mean you should. The corret way of solving this is changing all of your <input type="text"> to use a css class or css width to define their width.
However the following jQuery will add a width style to every input type=text which has a size attribute
jQuery( // on Document load
function($){ // run this function
$('input[type=text][size]') // find all input type=text with a size attr
.each( // for each element found
function(index, Element){ // run this function
var size = $(this).attr('size'); // get size attrubte value
$(this).width((size * 0.6)+"em"); // set the css width property to
}); // a nasty huristic
}
);
Now since this only effects inputs with size specified, as you touch each page you can remove the size attr and replace it with Css size, so eventuly you will not need this script.
The #size attribute gives a size in characters. However, unless you are using monospaced fonts, the size of a character itself is not something that is well-defined. In addition, different rendering engines may use different rules for character spacing and/or kerning. So, at the end, the attribute is no more than a vague hint to the browser.
Have you tried something like style = "width:51em;" instead? Haven't tested it, but the width property is well-supported, so I'd hope this would work. You can also use absolute (pixel) units if you want a more exact size.
Hope this helps.