an All Creative World site
Ivan's picture

IE conditional CSS

We all know that bugfixing Internet Explorer for Windows is a headache. Fortunately there is one easy way to get around most problems.

You can create a conditional statement in your html to import a style sheet just for IE. Basically, what you do is create your main CSS file that styles the site for modern browsers and than you create a separate CSS file to override the statements in the main CSS file just for IE.

This CSS file is only loaded if the detected browser is IE, otherwise it won't. You should put this conditional statement into the head of your html file after every other CSS import code. It should be the last in the list, so that it overwrites the main css files:
<!--[if IE]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->

Now if for example you had a statement in your main.css file: #logo { margin:10px } and it doesn't work properly in IE, you can add the same statement with a different value in your IE-override.css file: #logo { margin:20px }.

And this way you will have a 10px margin in Safari and 20px margin in IE. You have full control over IE this way.

The main benefit of this as I see it is that it's easy to maintain such a structure. For example the next big surprise will hit us when IE7 comes out. With a separate file for IE fixes – the update can be done much easier.

Commenting on this Blog entry is closed.

Enigma's picture
29 pencils

If you need additional filtering (and it's a PHP-based site), you can also use PHP to query the user agent and output different stylesheet information depending on the browser.

For example:

$browser = getenv("HTTP_USER_AGENT");
define("MSIE", strpos($browser, "MSIE") !== false);

Then just check MSIE constant anywhere in the code you need to.

Magomed's picture
3 pencils

Which is a whole new set of bugs. Php seems to be the more sensible way to accurately feed the right stylesheet to the user based on OS, resolution, even connection speed. Possibilities are endless.

peace,
Magomed

Less is more

Less is more

jhurshman's picture
6 pencils

The advantage of the IE conditional include is that you're guaranteed that it's actually an IE browser you have, which is not certain with user-agent parsing, due to the fact that many (most?) non-IE browsers allow you to set the user-agent string to spoof just about any browser you want.

This actually may not make a significant difference in this case, but it is something to watch for.

jhurshman's picture
6 pencils

IE's conditional comments also allow distinguishing between different versions of IE, for example:

See this page on quirksmode for more information.

Ivan's picture

That link is great. But ironically it falls apart in Firefox.

cbrophy78's picture
177 pencils

Since i am new to CSS, I have been having the reverse problems. where the site that i am working on is coming out fine in IE but not FireFox. is there other descriptors that need to know to make it cross browser? i am using a program, RapidCSS 2005, which helped me learn and apply everything in all of those books and websites all of creativebits have been talking about.

I haven't fully grasped Go Live, Dreamweaver, or just plain coding in notepad. nor do i like WYSIWYG. I feel that knowing it and applying it are two very different animals. so any help would be appreciated.

Chris Brophy
Iklectek Designs
twitter

Ivan's picture

That's strange, because Firefox renders CSS much more correctly than IE in almost every case. Unless RapidCSS 2005 is made specifically for IE and disregards standards.

I don't think there is a conditional statement for firefox, such as [if FF] or [if Firefox], but you can try. If it works, please let me know.

andrewlkho's picture
1 pencil

It sounds a bit like the reverse to what you want at first, but you could code the Firefox styles in the main stylesheet, and use the conditional mentioned in the post to put IE ones in. Granted, you're not going to get the level of segregation you want (on the assumption that the bug is with Firefox, which I somehow doubt), but short of using something server-side to filter the user agent and serve different stylesheets to each, I think this is the best you're going to get.

cbrophy78's picture
177 pencils

netscape... or mozilla runs like netscape. right?
What does this button d.... CRAP!

Chris Brophy
Iklectek Designs
twitter

natobasso's picture
3951 pencils

Go here to check for errors in your CSS:

http://jigsaw.w3.org/css-validator/validator.html#validate-by-upload

Most WYSIWYG editors (Dreamweaver, et al) are convenient, but they don't produce the most compliant code in the world, hence your FF issues.

Remember that even though it's kludgy you can get around some issues by:
1. Being as specific as you can with your CSS for best readability (use terms like px, etc)
2. Use the "star" hack (*) CSS lines will only be read by IE.
----
Powerpoint is not a design application

tcs's picture
1 pencil

what if you want IE to IGNORE The lines? I'm having a similar issue with IE & Firefox where a background image is lining up as intended in IE but off in Firefox. When I set the alignment with -12px in Firefox, it is perfect but then thrown off in IE. Suggestions?

tehjess's picture
1 pencil

I'm stuck in the IE 7, Firefox, Safari, etc are about the same when it comes to CSS but IE 6, which is what most people still use is CRAZY!!... is there an

< !--[if IE6] > < ![endif]-- >

?

-JeSs-

phil n's picture
1 pencil

yes

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Featured Images

Do you need a great new logo?

If you need a logo for your company or product you can get it done with us.
In our logo store you can pick from over 28,000 pre-made logos that will be customized to your name for free or you can post a contest for us for just $250 and our designers from all over the world will submit dozens of logo design suggestions to your specific needs.

Marketplace