Geeks With Blogs

News My Blog has been MOVED to https://mfreidge.wordpress.com
Michael Freidgeim's OLD Blog My Blog has been MOVED to https://mfreidge.wordpress.com
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 on Wednesday, February 13, 2008 12:59 AM CSS/DHTML/JavaScript | Back to top


Comments on this post: Declare different CSS rules for Firefox and Internet Explorer 7

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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?
Left by Kevin on Mar 31, 2008 4:24 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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.
Left by Michael Freidgeim on Mar 31, 2008 7:43 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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.
Left by Kevin on Apr 01, 2008 4:35 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Oh, thank God. I spent all night looking for a code to change the background colour, IE changed it somehow..
Thanks! Life saver.
Left by Chelsea on Apr 11, 2008 7:48 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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.
Left by Peter on Jun 05, 2008 7:45 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
IE8 is TERRIBLE. It RUINS all my CSS, AJAX, Javascript, etc.
Left by Kenny on Aug 04, 2008 12:48 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thanks, will try some of these "hacks". :)
Left by Morten on Mar 31, 2009 10:30 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
THIS DOESNT WORK!!!!
PEOPLE DONT WASTE YOUR TIME USING IE HACKS! CODE MUST BE THE SAME FOR ALL BROWSERS.
Left by developer on May 31, 2009 8:12 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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.
Left by Michael Freidgeim on May 31, 2009 11:11 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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!
Left by Rui on Jun 23, 2009 6:29 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thanks a ton for this trick dude
Left by rafat on Jul 04, 2009 8:34 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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!!
Left by ku on Jul 10, 2009 3:50 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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.
Left by Daniel Peterson on Jul 20, 2009 2:55 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Absolutely beautiful, thanks!
Left by JCW on Aug 15, 2009 10:25 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Man, you rule, helped me a lot to solve my problem. Thanks a lot.
Left by lejka on Nov 23, 2009 8:06 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Wow, thanks. This fixed my IE8 CSS problems.
Left by The Z on Jan 04, 2010 2:42 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thanks very much. It's simple and works like a charm

Tuan JINN
Left by Jinn Nguyen on Jan 21, 2010 5:12 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Y don't belived but its working like a charm
Left by Raducu on Apr 10, 2010 2:37 PM

# Thanks
Requesting Gravatar...
Wow, It works magically as I need.


Thank You
Left by Shah Alom on Apr 11, 2010 1:50 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
what time the css3 will coming
Left by css on May 31, 2010 2:16 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thank You
Left by JB Lee on Jul 12, 2010 9:49 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thank you!
Left by Andrew on Oct 14, 2010 2:54 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thank you! It really works. I'm going crazy over this. Thanks a lot.
Left by Jen on Oct 22, 2010 11:56 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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! :)
Left by Susheel on Oct 24, 2010 11:28 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting 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 */
Left by Sujith Mathew on Dec 05, 2010 8:29 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
I can,t do.
Left by Tejas on Jan 12, 2011 11:09 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thanks for the help it really worked for me !!!Thanks alot
Left by satishraj on May 01, 2011 11:38 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Truly Awesome!
Left by Shaun Phillips on Jul 22, 2011 8:35 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thank you! I was going crazy with IE (as always)!
Left by Steve on Feb 12, 2012 4:30 AM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
this is incredible awesome!!!! thanks much!!!! :D
Left by Mary on Apr 03, 2012 6:12 PM

# re: Declare different CSS rules for Firefox and Internet Explorer 7
Requesting Gravatar...
Thank You very much "ku" for this amazing post.
Left by Ruta patel on Apr 17, 2012 5:06 PM

Your comment:
 (will show your gravatar)


Copyright © Michael Freidgeim | Powered by: GeeksWithBlogs.net