Is it a bug that Firefox doesn't seem to support background-image swapping in pseudo-classes or is it that the other browsers are doing more than they should be?
I'm trying to figure out if I'm doing something wrong... this works in Opera and Chrome (haven't tested in IE yet)...
.myClass{
background-image:url('off.jpg');
}
.myClass:hover{
background-image:url('on.jpg');
}
However firefox just ignores this. I was hoping to avoid writing a javascript roll-over... this seemed like such an elegant solution, but I'm starting to suspect that I'm hosed.
Your page is in quirks mode, presumably, and :hover has some weird behavior in terms of when it applies or not in quirks mode. I suggest putting your web page in standards mode if you want browsers to actually behave compatibly on it, instead of explicitly asking them for buggy backwards-compatible behavior.
What version of FF are you using? A quick search revealed this possible issue similar to yours: http://support.mozilla.com/en-US/questions/746770
Try this to see if it works:
.myClass{
background-image:url('off.jpg');
}
.myClass:hover{
background-image:url('on.jpg');
}
[class="myClass"]:hover{ /* firefox fix */
background-image:url('on.jpg');
}
Related
I tried with everything like proper style tags and all. but still site is not working in Firefox and IE
Link: http://webkurn.com/chrysler/index.html
Thanks a lot in advance
As per your CSS Statements they apply only on webkit-based browsers (Chrome, Safari, etc.). If you are pointing to a specific browser then you have to use webkit. Here you are making your queries to run on specific browser chrome or safari.
Try removing the webkit -webkit-min-device-pixel and check. Hope this help you
Most of the time, the problem is with the cache only if all the stylesheet tags are perfectly written. First try to remove your cache from your browsers of your website.Also, there are great tools like firebug(firefox) and inspect element tools(almost all browsers) which can be used to check the stylesheet file if it is updated or not.
We noticed on our website that the CSS was broken with IE11, while it worked fine with IE10. After a look at the CSS source, it turns out that IE11 (it seems) has dropped its support for attributes matchers: we tried on our VM, we tried on BrowserStack, and the result is that these rules...
img[src$='separator.png'] { display: none; }
a[href="javascript:addBookemart()"] { text-decoration: none; }
... do work on IE10, but not anymore on IE11. I find it hard to believe that the support for this feature would've been dropped... plus, I can't find anyone talking about such a thing over the interwebs. Might there be anything else causing this issue?
Here's a pen for testing purposes:
http://codepen.io/anon/pen/GJNyJW
In my experience, IE11 is picky about [attr="value"] having double quotes around the value.
I found I was having this issue and it turned out that IE11 was case sensitive with the attribute values.
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues
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'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
FYI, this hack only targets Safari 3, and also targets Opera 9.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
#media screen and (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
By using conditional stylesheets you can avoid hacks all together and target browsers.
If you are looking to do something special in safari check out this.