background-color:transparent doesnt work on SELECTs in browsers other than FireFox.
So how I specify background-color:transparent for FF alone and background-color:#something for others ?
Did you try to apply the cross-browser setting first and the firefox specific setting afterwards?
select {
background-color: #fff;
background-color: transparent;
}
Find a simple example that is also working fine in Internet Explorer 8 and in Chrome 4 here: http://jsfiddle.net/b6hWu/
Check out this page:
CSS Browser selector.
I use it and works wonders for selecting browsers right in the Stylesheet.
Hope it helps :)
Related
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
Is there a hack to target IE9 only? I am facing a problem in IE9 only, other browsers are working fine. I am using \9, but it is effecting IE8 as well.
I don't want to use conditional comments.
You can use this :root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */
I came up with a media query that does this as well. It specifies only IE9.
#media all and (min-width:0\0) and (min-resolution:.001dpcm)
{
#div { color:red; }
}
Other ones I have worked out, including a msie 9+ media query are on my github page: https://github.com/jeffclayton/css_hack_testing - most of these I have sent to browserhacks.com for inclusion.
2017 UPDATE: To see it working, I created a live test page here for this and many others I worked on http://browserstrangeness.bitbucket.io/css_hacks.html and MIRROR: http://browserstrangeness.github.io/css_hacks.html
Please be aware it is min-width:0\0 (zero-backslash-zero) when you copy the code to your own site. Not to be confused with min-width:0 (just a single zero) which does not work to differentiate IE9 from other browsers.
There is another way!
:root #div { background: #fff \0/IE9; } /* IE9 */
Use the :root psuedo selector. This works because the #media all and (min-width:0) part as been removed in favor of this method in IE9.
Be aware though, that this is not a safe method as it doesn't work on all selectors. The best thing to use is conditional comments, it is the safest, easiest and best way to target different versions of Internet Explorer except IE10 which has dropped the support for conditional comments.
In my IE9 EMULATOR none of the solutions listed worked. The only hack that properly enabled us to resize, for example, a checkbox in IE9 was:
/* IE9 */
:root input#my-checkbox {
width:20px !important \ ;
height:20px !important \ ;
box-sizing:content-box !important \ ;
}
I don't know if this also affects IE8 or IE10 etc but we have conditionals handing those separately anyway.
Hopefully this helps someone.
I have a html5 form with about 6 input fields, some being required and some optional. Once a field has been filled it, I have made it turn green using the following code:
input:valid, textarea:valid { background: #dfd; }
This works fine in Chrome and Firefox however Internet Explorer 9, being what it is, doesn't want to take this CSS code into consideration. Is there any way I could get round this?
IE 9 does not support these Pseudo-classes:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#pseudoclasses
I want to style all my th elements the same (white text on black background) apart from a couple of usages where this formatting is not wanted - in which case I add a class of no-headers to the table element.
th {background-color: #000000; color:#FFF;}
table.no-headers th {color:inherit; background-color:inherit ;border:inherit; }
So here is some example markup if you needed some
<table><tr><th>This has a black bground</th></tr></table>
<table class="no-headers"><tr><th>This inherits bground from parent</th></tr></table>
This works fine in IE 8/9 and FF and Chrome but not in IE 7.
IE 7 just will not use the 2nd rule - despite it being more selective.
In fact I have tried all sorts to fix this problem - all to no avail.
I have tried adding the no-headers class on the th element too
th {background-color: #000000; color:#FFF;}
th.no-headers {color:inherit; background-color:inherit ;border:inherit; }
<table><tr><th class="no-headers">This inherits bground from parent</th></tr></table>
and even that doesn't work - I am left feeling like I am doing something really obviously stupid / wrong - but then again it works fine in other browsers!
Any help greatly appreciated.
IE7 does not recognize the inherit keyword (except on a few obscure properties).
Your best bet is to specify the default colors manually.
According to this SO post: IE7 CSS inheritance does not work IE didn't suport inherit until IE8. So you will have to specify the color, background, and border specifically.
IE7 does not support style inheriting. That was introduced in IE8.
See: IE7 CSS inheritance does not work
This is not a huge problem, since IE8 is a universal upgrade from IE7, unlike IE9, which is only available for Windows NT6 and above.
The following web page is not showing properly in IE 9.
It seems to be only a problem in IE 9.
http://froyo.tv/test/
the list-style-image are over the image!
IE9
Firefox, Chrome, IE8, ...
EDIT: I know how to fix it! But I want to know what is really going on with IE9
Fixed: http://froyo.tv/test/index_fix.php
I'm not sure why IE9 is behaving differently, but you can fix it to work consistently by:
Removing margin-right: 30px on .image.
Removing width: 500px on .detail (you may wish to add back a smaller width)
Adding float: left to .detail.
Here's a simple reproduction of the problem.
Broken: http://jsfiddle.net/Nh3kf/
Fixed: http://jsfiddle.net/Nh3kf/1/
This is a fix for the problem in IE9:
li{list-style-position: inside;}
I guess that IE9 doesn't have the list bullets "inside".
Se the fix here:
http://jsfiddle.net/Nh3kf/40/
Okay, using Chrome I can see the custom list images, IE9 doesn't handle list-style-image.
Instead of using it, try this:
li {background:url(your_image.jpg) center left;}
The title sums it up. I'll get this out of the way and say I am aware that css hacks are dirty ugly horrible things. Sometimes dirty problems call for dirty solutions though :)
So does anyone know of a css selector hack that works for recent safari versions but is not a general webkit hack ? My site behaves properly in chrome but has a bug in safari. So if anyone knows how i can select an element to only have a certain style in safari let me know!
What I'd do, is sniff the user agent of the browser with javascript, and add a class to the <body> element, based on that. That way you don't have to rely on any kind of hack, you just write your selectors based on the class:
.safari .misbehaving-div {
}
I believe there is already a JS framework that does exactly this, but I don't remember the name.
Ended up using this:
http://rafael.adm.br/css_browser_selector/
This works perfectly
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass{
background: red;
}
/* Safari only override */
::i-block-chrome,.myClass{
background: green;
}
}