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

  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
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.

# 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.

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

Left by Morten at 3/31/2009 10:30 PM
Gravatar
Thanks, will try some of these "hacks". :)

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

Left by developer at 5/31/2009 8:12 AM
Gravatar
THIS DOESNT WORK!!!!
PEOPLE DONT WASTE YOUR TIME USING IE HACKS! CODE MUST BE THE SAME FOR ALL BROWSERS.

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

Left by Michael Freidgeim at 5/31/2009 11:11 PM
Gravatar
@developer,
I wish the same code to work for all browsers. Unfortunately, each browser has it's own features/behaviours.
Try to use some frameworks(like jQuery) that address differences inside libraries.

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

Left by Rui at 6/23/2009 6:29 AM
Gravatar
Michael,

You are a legend. Thank you for posting the firefox / IE compatability trick

width:948px; /* All browsers */
#width:950px; /* Over ride for IE7 */

Was beginning to lose my mind over it!

Thanks again!

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

Left by rafat at 7/4/2009 8:34 AM
Gravatar
Thanks a ton for this trick dude

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

Left by ku at 7/10/2009 3:50 AM
Gravatar
its 3:45am and I'm working on a new site. To my horror I see that everything is perfect on Firefox and Chrome but there is one section on IE7 that does not display correctly. This post was a lifesaver-

margin:20px 0 -10px -38px; /* All browsers */
#margin:20px 0 -10px 0px; /* override for Microsoft Internet Explorer browsers*/

Thank You!!

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

Left by Daniel Peterson at 7/20/2009 2:55 PM
Gravatar
You are amazing. Thank you so much. I've been looking for a solution this simple for far too long after far too many headaches today messing with this.

I bow down to your magnificence.

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

Left by JCW at 8/15/2009 10:25 AM
Gravatar
Absolutely beautiful, thanks!

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

Left by lejka at 11/23/2009 8:06 AM
Gravatar
Man, you rule, helped me a lot to solve my problem. Thanks a lot.

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

Left by The Z at 1/4/2010 2:42 PM
Gravatar
Wow, thanks. This fixed my IE8 CSS problems.

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

Left by Jinn Nguyen at 1/21/2010 5:12 AM
Gravatar
Thanks very much. It's simple and works like a charm

Tuan JINN

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

Left by Raducu at 4/10/2010 2:37 PM
Gravatar
Y don't belived but its working like a charm

# Thanks

Left by Shah Alom at 4/11/2010 1:50 AM
Gravatar
Wow, It works magically as I need.


Thank You

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

Left by css at 5/31/2010 2:16 AM
Gravatar
what time the css3 will coming

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

Left by JB Lee at 7/12/2010 9:49 PM
Gravatar
Thank You

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

Left by Andrew at 10/14/2010 2:54 PM
Gravatar
Thank you!

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

Left by Jen at 10/22/2010 11:56 AM
Gravatar
Thank you! It really works. I'm going crazy over this. Thanks a lot.

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

Left by Susheel at 10/24/2010 11:28 PM
Gravatar
Thanks a lot, many times, many many times, i regret that there was nothing like this, and i found it hard to work with margins and paddings on both Firefox and IE, you made my day!, Thank you! :)

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

Left by Sujith Mathew at 12/5/2010 8:29 AM
Gravatar
This works

height: 15px;/* apply to all browsers */
#height: 15px;/* override for Microsoft Internet Explorer browsers*/
_height: 21px; ;/* override for IE browsers 6.0 and older */

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

Left by Tejas at 1/12/2011 11:09 PM
Gravatar
I can,t do.

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

Left by satishraj at 5/1/2011 11:38 PM
Gravatar
Thanks for the help it really worked for me !!!Thanks alot

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

Left by Shaun Phillips at 7/22/2011 8:35 AM
Gravatar
Truly Awesome!

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

Left by Steve at 2/12/2012 4:30 AM
Gravatar
Thank you! I was going crazy with IE (as always)!

Your comment:



(not displayed)


 
 
 
 
 

Live Comment Preview:

 
«February»
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
26272829123
45678910