Any serious CSS person has hacked their way through more ‘Internet Exploder’ issues than they care to talk about. Even if there are only a few small issues to fix in an area, it can be difficult to track them through multiple style sheets (ie. conditional sheet for IE6 & 7). Hacks are just bad practice, so what can you do? There is a better way! I came up with a neat little piece of code that has greatly simplified my life when dealing with cross-browser compatibility.
If you add a unique identifier for the IE browser that is giving you trouble, then just add the ID your CSS in order to control it with ease. Here is what you do:
Copy the following code and insert it just below the opening body tag of your template:
<!--[if IE]> <div id="ie"> <![endif]--> <!--[if IE 6]> <div id="ie6"> <![endif]--> <!--[if IE 7]> <div id="ie7"> <![endif]--> <!--[if IE 8]> <div id="ie8"> <![endif]-->
Paste the next bit of code right above the ending body tag:
<!--[if IE 6]> </div> <![endif] //--> <!--[if IE 7]> </div> <![endif] //--> <!--[if IE 8]> </div> <![endif] //--> <!--[if IE]> </div> <![endif]-->
If you have a box displaying at different heights in Firefox and IE6, write your CSS like this:
.sizebox {height:30px;}
#ie6 .sizebox {height:28px;}
It is MUCH faster and easier to see what is happening with the template when you are reviewing your code to make changes. It’s better than reviewing several different style sheets to find what has been created. You will still need a separate style sheet for IE6 and IE7 so you can store the CSS that doesn’t validate. (You may need it to pound IE into shape!) I personally don’t support IE5 or 5.5, but if you support it just add those to it and you can single it out. 90% of the fixes can be done with this custom code. It’s helped me a lot and I’m sure it will help you too!
Hi
this is very interesting. Just I need to know how to apply it only for ie6 to a div with unique id like this:
with this css:
#xyz {
height: auto;
width: 286px;
}
where I must to insert the
and the tag?
sorry, I’m a little confused
kindly regards
excuse me, the form stripped the
and th tags
You would insert the code I mentioned just below the opening body tag and the second half just above the closing body tag. Then you would write your IE6 code like this:
#ie6 #xyz {
height: auto;
width: 286px;
}
Hope that helps!
I think I could write a book on the frustrations of IE. The conditionals are a great way to manage IE however for smaller sites and annoying random bugs, I’ve found these hacks (I know, it goes everything against the title of this post) to be very useful because of it’s use inline.
background: #ccc; //will work in all browsers
#background: #090; //will work in IE 7 and below
#_background: #f00; //will work in IE 6 and below
The order in which you put these hacks is important otherwise it will not render properly. Just thought I’d share.
Bryan,
These are awesome – thanks for the share.
Kindest regards,
–Steven Pignataro
CEO ‘corePHP’
I can definitely see a use for this for inline styles. I haven’t really given that a thought since I rarely ever use inline styles. The main reason you don’t want to use hacks in your main css is that you don’t know if IE8, 9 or 10 will somehow render your hack for IE6 or 7 and have to go back through all your sites and find a fix for it. Conditionals will always work with the correct browser. It’s also VERY easy to find the code with my method because you see #ie6 or #ie7 in front of the style which is very handy when dealing with hundreds of lines of CSS. I will definitely file your code away for my inline styles though. Thanks!
It blocked out my code snippet so hopefully this will post:
style=”width:300px; height:300px; background:#ccc; #background:#090; #_background:#F00;”
Just what i was looking for. So easy yet no one else has made any statements about this except for you.
I’m truly greatfull… Thanks 🙂
This was very helpful! THANK YOU!
I use the conditionals, but to load a stylesheet like “ie6only.css”, where I can only drop the needed adjustments for IE6 (png fix etc), and keeping a valid nice and clean CSS that apply to Mozilla browsers.
But let me point out that if you build having IE6 bugs in mind, you won’t, for example, do a float right, and then give margin right to the same element, since you know is gonna double it ( IE6), so if possible I would rather use padding instead.
Working on that fashion will let you do very large scale projects with a minimum of cross browser issues. Good suggestion thou.
I load a separate stylesheet as well for the code I know won’t validate or if there is a lot of changes in the same area. No matter how well you code there are still little (or big) changes that happen and this is where I use it the most. I may want to bump something over a little and it’s much easier to follow what has been done when looking at your css later if it’s in the same area. I definitely agree that you have to know how to recognize IE6 bugs before they happen though. It saves a lot of headaches in the end.
Very handy, thank you. It’s just a typo, but I think there’s a duplicated bit in the code sample. You have two identical conditional comments for IE7. So if someone just copied and pasted, in IE7 they’d get two identical div ids at the top and the wrong number of tags at the end.
Finally someone with some useful info about IE! I can’t tell you how frustrating it is to run into these issues. Finally some help!
Is there a catch-all for all IE browsers? and is it possible to compound the ID’s? e.g. #ie6#ie7