Declare different CSS rules for Firefox and Internet Explorer 7

The post Creating different CSS style selector definitions for different browsers (Firefox, Internet Explorer 7 and IE 6.0) with subsequent comments describes that
You can have the same attribute for different browsers in the same rule by specifying # and _ prefix
.context_bar_form_field
{
height: 15px;/* apply to all browsers */
#height: 15px;/
* override for Microsoft Internet Explorer browsers*/
_height: 21px; ;/* override for IE browsers 6.0 and older */
}
<!--[if gt IE 5]>
<style type="text/css" media="screen">
.idonnyCSS{font-size: 1.3em }
/*The above CSS definitions will only be applies to IE versions greater than 5*/
</style>
<![endif]-->

I prefer the first opton for small changes to keep all definitions for the class/selector in one place.

CSS Filters chart describes "Will the browser apply the rule(s)?".


More discussion are in
http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer

posted @ Wednesday, February 13, 2008 12:59 AM

Print

Comments on this entry:

# re: Declare different CSS rules for Firefox and Internet Explorer 7

Left by Kevin at 3/31/2008 4:24 AM
Gravatar
OMG!!! I've been looking for something like this for a couple years: to be able to write rules in a single stylesheet to accomodate specific versions of IE and real browsers! No more js browser sniffs, no more * html hacks (don't work in strict mode anyway), and no more conditional statements. Is this true? Are there places this doesn't work or breaks down?

# re: Declare different CSS rules for Firefox and Internet Explorer 7

Left by Michael Freidgeim at 3/31/2008 7:43 AM
Gravatar
Hi Kevin,
Ask on original http://cmsproducer.com/different-css--firefox-internet-explorer-7-IE-6-5 discussion. I am not an expert in CSS.

# re: Declare different CSS rules for Firefox and Internet Explorer 7

Left by Kevin at 4/1/2008 4:35 AM
Gravatar
Thanks for the reply; I've been playing around with this a bit; most importantly for the project I'm currently working on is that in XHTML 1.01 strict I can target IE 6 and 7 and Firefox all independently.

While the best way to accomplish this from a standards-compliance perspective is obviously using conditional stylesheets, the pragmatist in me (and what web hacker isn't pragmatic to some degree) would rather spend time developing with the convenience of a single CSS file where all the rules are grouped rather than having to fish across multiple files for definitions.

Anyhow, thanks for your response; I've taken a look at the original post, as well as quite a bit of other posts that date from 2003-2005, so it seems this stuff is pretty stable. I've yet to install the IE8 beta, though it'll be interesting to see how it handles all of this.

Thanks again.

# re: Declare different CSS rules for Firefox and Internet Explorer 7

Left by Chelsea at 4/11/2008 7:48 AM
Gravatar
Oh, thank God. I spent all night looking for a code to change the background colour, IE changed it somehow..
Thanks! Life saver.

# re: Declare different CSS rules for Firefox and Internet Explorer 7

Left by Peter at 6/5/2008 7:45 PM
Gravatar
Hi there, does anyone know how IE 8 will use this?
I think IE8 is a "modern browser" and so it will not use the # selector..

This will mean a lot of work for me :(
I hope IE 8 will have a new selector like ~ or something.

# Great!

Left by ultraman at 6/17/2008 10:57 AM
Gravatar
Good Job!

# re: Declare different CSS rules for Firefox and Internet Explorer 7

Left by Kenny at 8/4/2008 12:48 PM
Gravatar
IE8 is TERRIBLE. It RUINS all my CSS, AJAX, Javascript, etc.

Your comment:



 (will not be displayed)


 
 
 
Please add 5 and 2 and type the answer here:
 

Live Comment Preview:

 
«October»
SunMonTueWedThuFriSat
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678