Internet Explorer 6 is a jerk. It’s one of the first things I discovered upon coming to web design from the video world. Video production has its weirdness, but once you render something, you don’t have to worry about people’s TVs changing your font sizes or column alignments behind your back.
Anyway, I’ve been looking for a good way to send one CSS rule to IE6 and another to the rest of the free world (the standards-compliant browsers like Firefox). Like most design-related things, there are about a million ways to do it, but I have a favorite: the [id] attribute.
Here comes the [id]
When you add the [id] attribute to the end of a CSS selector, Internet Explorer 6 (and older) will ignore the rule. Assume you have a CSS rule like this :
p { color: red; }
Obviously, all the text in the <p> tags will be red. But if you wanted Firefox to display in blue and Internet Explorer 6 to display paragraphs in red, you’d do this:
p { color: red; }
p[id] {color: blue; }
[id] in action
There’s no good reason to do that. Pretty much all browsers display paragraph text in the same way. But there are lots of reasons you’d want to send different rules to different browsers. This blog is one example. The default version of the template we use (from UpstartBlogger.com) has two columns inside a #container that is 920 px wide. Ideally, the columns sit side-by side, like this:
I like this theme a lot, but after I made some other changes, I thought the columns were a little too far apart. There’s better ways to do this, but I decided to just shrink the width of the #container from 920px to 820px. Big mistake, sort of. Firefox was fine. But when I tested in IE6, the columns were now stacked on top of one another, like this:
The Compromise
So here’s the problem in a nutshell: If I set the #container to 920px, Internet Explorer is fine, but the columns look too far apart in Firefox. If I make the columns the way I like them in Firefox, they sidebar will be pushed under the main content when viewed in IE6.
A Solution: Pass one set of rules to IE6, and another set to everybody else. Make the following CSS changes:
#container { width: 920px; }
#container[id] { width: 820px; }
Firefox and the good guys see the second rule, the one that uses the narrower layout to keep the columns closer together. Internet Explorer ignores the second rule, and keeps the width at 920px, so the columns remain side-by-side.
For the record, the [id] trick should work on the following browsers:
* Netscape 4.x
* Mac IE 4.01
* Mac IE 5
* Win IE 6 and lower
* Mac iCab 2.51
* Win Opera 3.60
* Win Amaya 5.1
I’m not sure exactly why Internet Explorer renders this layout differently (although I believe it has something to do with how it processes the combination of floated <divs> with fixed widths). If you’re interested, A List Apart has a great amount of CSS layout resources and explanations, and there are many more out there.
Also, I’m pretty sure that out of the box, the theme we use works fine in all browsers; it’s just that I made other cosmetic changes that broke the layout in a weird way.
More Info: Floatutorial | CSS Hacks | Quirksmode
I wouldn’t use that hack unless absolutely necessary. That will (in theory) slow down your page and decrease the readability of your code. It also will jack up browsers that render properly but don’t support attribute selectors.
If I ran into a problem like that, I would specify an absolute width on the sidebar and content area, the put a third element within the content element. This would display as block (to fill the entire object) and have whatever padding needs to be put in place. This avoids the hack entirely and allows you to place elements in your body area that don’t abide by the padding (like a divider or something).
Also, I feel that the only CSS hack that should be used if absolutely necessary is the asterisk html hack.(* html …). This is because it can only apply to IE6 (as IE invented the problem). By using a feature that simply isn’t supported, you run the risk of affecting browsers that follow the rules but aren’t yet capable of that kind of advanced parsing.
I agree-it’s kind of an inelegant solution. I’m still not exactly sure what the nested content element does, however. Would it work if I just floated both columns to the left? Thanks much for writing.
I would avoid CSS hacks as much as possible. There are other much better solutions to targeting various IE browsers. They actually implemented an if statement that you can use in your code to check for and apply certain statements to ie7/ie6 or any combination of IE browsers. I wrote an article about it a while back.
The problem with the floated divs arise because IE6 will double the left margin you put on your containers if they are floated right(!). To make the behave good, just set «display» to «inline» for the floated containers and everything will be good – and your overall width can stay the same.
Internet Explorer is a Jerk: CSS Hacks | Sassafrass
[...][...]
Dustin-Nice article. Seems like that’s probably the best and cleanest solution.
Great blog post. It was very helpful. I often get such problem when combining a height or width to a relatively or absolutely postioned div. I always get a difference between IE and firefox. I often solve it with the !important but sometimes it fails to work. Damn it!
I will try this to see if it work fine.
Thanks again…
Cool. Thanks for reading. Dustin Brewer’s article (in the comments above) has a good solution too.
yep, IE6 sux
also IE7 although little less. thank you for the hack.
Conditional comments, people, conditions comments… Coupled with hack-management, there really is no better solution…
Two words:
overflow:hidden;
Internet Explorer is a jerk: CSS
[...]Use the [id] attribute to make Internet Explorer 6 ignore certain CSS rules.[...]
This isn’t really a great way of going about things.
The best way to send different CSS to different browsers is now widely accepted to be conditional comments.
You should have stylesheets that have your code working properly in standards-compliant browsers (Firefox).
Then, if things aren’t working as you wish in Internet Explorer, you should have separate stylesheets to target this browser - one for IE7, one for IE6, etc as needed.
These can then be sent to Internet Explorer by placing them in conditional comments in your HTML below where you have linked to your normal stylesheet.
Example:
13 hier klicken und Filme runterladen
wo kann man gratis filme runterladen?
Obagi…
I found your site on technorati and read a few of your other posts. Keep up the good work. I just added your RSS feed to my Google News Reader. Looking forward to reading more from you….
awesome man 2 good.