Creative Commons

2006-12-29 21:59:35

IE7 breaks CSS... again!

Most web designers who make use of CSS extensively know full well how IE, specifically version 6, doesn't render CSS correctly... at all. I mean, it's not even close. There was a little trick to get around such things, the !important directive. Say you wanted to set the width of something to 400 pixels, but IE is dumb and you needed it to make it 410 pixels. You would do something like this:
width: 400px !important; width: 410px;
The reason that works is that no matter what, IE will interpret the last thing it reads. So if we have two "width's," IE will read the last one and forget it even saw the first. All other browsers understand that when it sees something that is marked with "!important," that is the one it needs to interpret, no questions asked. So that was a quick way to make IE do one thing and all other browsers do another.
Then along comes IE7. Someone got the bright idea to code in !important support, effectively breaking millions of people's code. But there is a solution. Instead of using the !important directive, we have to do two things. First, make your BODY tag look like this:
<body lang="en">
Then, in your CSS, you need to use the "lang" pseudo-class for all non-IE browsers (IE completely ignores directives inside of the "lang" pseudo-class). So, to do what we did above:
div#login { width: 410px; } *:lang(en) div#login { width: 400px !important; }
Notice how we still need to use !important. Since all non-IE browsers can understand both blocks of CSS, we need to make sure it knows which one to interpret. Now to find whoever coded IE7 CSS support and make sure he gets fired!


Post a comment!