<< Why DoPostBackWithOptions didn't work | Home | How to detect Debug mode in JavaScript >>

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.

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

Your comment:



 (will not be displayed)


 
 
 
 
 

Live Comment Preview:

 
«November»
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

About
Article Categories
Archives
Post Categories
Links
Syndication:

RSS ATOM