Conditional comments css for IE
I’m in the process of creating some new pages and am trying to learn how to use CSS ‘properly’. I was coding right along and my page was looking real slick. Then I opened it in IE. What a mess!
One thing I came across the hard way was that IE likes to use their own CSS standards. I won’t get into what I think about this – that’s an entirely different post.
How does this affect a browser? Tons! To begin with I found out I needed to know what the CSS Box Model is. You can just google it up. Here is a nice visual presentation at hicksdesign. And a nice interactive version can be found at redmelon.net.
I would suggest reading the ilovejackdaniels.com explanation of how IE Vs. Firefox/Mozilla browsers interpret the CSS box model.
I could have hacked up my stylesheet to get what I needed out of IE. There are many hacks out there to force IE to doing what you want to. After reading up on it, it’s my opinion that this is a bad idea. For starters, it’s really a pain to have 2 different styles within your stylesheet. It’s really difficult to read after a while (and it’s uglyto the eye). Even more so, it’s difficult to make changes to it. I found a solution. I must say that it wasn’t on my own completely. I had some great help from IRC EFnet channel #css.
The Solution: Conditional Comments.
Conditional comments allow you to maintain 2 different stylesheets for your page. 1 for Firefox/Mozilla, the other for IE. Here’s how it looks:
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>My HTML Page</title> <link rel="stylesheet" type="text/css" href="my_stylesheet.css" /> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="my_IE_stylesheet.css" /> < ![endif]--> </head> <body> <p>My Contents</p> </body> </html>
You link the IE style sheet between the <!–[if lte IE 6]> and the < ![endif]–> code.
Ok what next? simple. Start marking up your ‘normal’ stylesheet fo Firefox/Mozilla. Then as you see how the IE CSS needs to be changed for IE, make those changes in the IE stylesheet. You don’t need to copy the entire original markup, only to make the changes needed for IE.
On a side note: There are more things you can do with css. For example you can tell which browser is being used by using:
<!--[if IE]> <p>You are Using Internet Explorer</p> < ![endif]-->
Here is a Microsoft MSDN reference for conditional comments. It tells you how IE looks at CSS conditional comments. And this is a more simple reference (javascriptkit.com) for easier reading. There are more functions to this but you can look for more info via your favorite search engine.
(There are many more sources for this information. The afore mentioned links are just suggestions.) I should also mention that this site template was CSS compliant until I got my hands on it in the beginning. So if yo are checking up ont it, I can promise it’s not. It’s a canned template that I’ve hacked to bits and will hopefull someday make it proper…in my spare time heh.
Comments? Suggestions? Scoffs? I’m fairly new to ‘proper’ coding. Please feel free to leave a comment!