I am having a hard time with making Firefox to display my custom cursor the way I want. It work's like a charm in Chrome (not at all in IE...), but in Firefox it looks like really bad gif image. Have to be said, that it's transparent .cur. I will be glad for any help.
Chrome:
Firefox:
Here is a CSS code for it:
#productImg TD IMG:hover {cursor: url('images/cursor.cur') 16 16, auto;}
Sorry, this isn't an answer but I don't have sufficient kudos to post to the comments section. Could you show what CSS you used to get the .png to work and also your file structure (i.e. is the file relative to the .css file or the source element?). I can't get either a .cur or a .png to work in FF although they work fine in other browsers. I've been following the advice in this post which seems fine for other browsers except FF.
http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/
FYI I'm trying to apply this to the BODY tag (not that this should matter). FF recognises the CSS in both Firebug and the Inspector although the Inspector reports that the value is Auto. When I manually set the property to a test Div/Class, FF just drops the property. Current code below.
cursor: url(img/cursors/tinyGreen.cur), url(../img/cursors/tinyGreen.png), url(../img/cursors/tinyGreen.cur), default;
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;
For some reason, two icons that show in IE and Chrome do not appear in Firefox and instead gives me some weird icon. I am using a font to display these.
I used firebug to track down exact CSS code for this but it simply shows
.icon-signin:before{
content: "";
}
whereas in IE, it shows
and in Chrome it shows:
I honestly don't understand what's happening here.
In the actual CSS file it has the following line:
.icon-signin:before{content:"\e047";}
All I could gather from google search is that
:before
is outdated and that I should use
::before
Would this fix the solution?
But if that is the case, why is Chrome displaying the icon when it also reads the css code with :before, not ::before ?
The problem
I just found a very strange issue with background-images in Firefox and Opera: the rule simply doesn't get computed.
The rule doesn't get shown in the inspector list, the images in background doesn't get even loaded in network monitors. But everything is ok in the css file being loaded, tough... the rule, the selector, everything just fine.
The same page works ok in all other browsers, except these two.
Wonder if anyone had this experience earlier. Thanks.
Examples
I could manage to reproduce the error in jsfiddle.net as suggested by Vucko and monkey. I got two fiddles: one working and one crashing. The crashing one is more closer to what I have here in context. Hope it helps.
PS.: Just note that the crashing one actually works in browsers other than Opera and Firefox.
Just remove the last line in your CSS code.
#myprojectname > #page1 > .beginning:after > h2 > div.
Tested in opera and mozilla.
Did you supply a relative URI like in background-image: url(img/picture.jpg)? Relative URIs are always resolved with the CSS file as the root.
Means, if you have the following file layout:
/css/style.css
/img/picture.jpg
/index.html
You have to write background-image: url(../img/picture.jpg) instead.
Setting the base tag <base href="/" /> won't help you, since the setting does not transfer.
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;
}
Evening all.
I have created a basic HTML5 site. It validates in W3C validator. It seems to work fine in Chrome, Safari, Firefox etc. However, upon opening the page in IE8 I just get a black screen.
The site can be found at www.soultrainer.co.uk
I assumed I had missed a bracket out or something. However I am receiving 0 error messages in error consoles and looking through the code I can't see any errors.
Any help would be greatly appreciated.
P.S. I can also view the document tree in IE8 Developer Tools.
Thanks,
Gary
If you look at how IE has decided to parse this page using the developer tools, it's put everything into the head, and left the body an empty node.
This is because you open your head, but never close it ;) Removing the opening head (and also your closing body which has no opening) should sort this out, if not, just encase head content in head, and body content in body :)
A useful tool (still not 100% perfect) is the HTML Lint tool. It doesn't like your current structure, however if I copy it into the "Lint By Direct Input" tab, and remove the head and /body tag, then it's fine :)
#overlay{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
}
Maybe it's this? Try commenting certain stuff out and testing. You can easily find out what it is.
You seem to have CSS3 stuff for the body bg image as well. Try commenting that stuff out, maybe IE can't parse it properly.
You're missing the opening html tag at the top.