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.
»
- Ivan's blog
- Login or register to post comments
If you need additional
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.
Dont forget IE5 for Mac
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
Caution
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.
Versions
IE's conditional comments also allow distinguishing between different versions of IE, for example:
Stuff which applies to IE with versions less than 6
See this page on quirksmode for more information.
That link is great. But
That link is great. But ironically it falls apart in Firefox.
um... dummy speaking here
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
That's strange, because
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.You could use the same trick
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.
fire fox is....
netscape... or mozilla runs like netscape. right?
What does this button d.... CRAP!
Chris Brophy
Iklectek Designs
twitter
Go here to check for errors
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
----
The Salon (blog): To discuss design problems of all kinds.
IE 6 or Earlier
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-
yes
yes