Saturday, Dec 23rd 2006
MS says De-Hack your CSS for IE7.. Really?!
 

About a year ago now IE Blog made a “Call to Action” regarding the demise of popular CSS hacks which is now causing broken pages in IE7.  They basically said that people needed to remove all the common CSS hacks that they used in order to get some things formatted in Internet Explorer.

Hacks such as:

  • html > body {element}
  • * html {element}
  • head:first-child + body {element}
  • head + body {element}
  • body > {element}

Or even those that worked inside of the element definition like;

  • _{property}:value

Which was actually ignored by all other browsers but Internet Explorer.

The issue is, most of these hacks have been fixed in IE7 and thus that specific IE formatting will not be applied in 7.  Which is great if the rendering quirk your hack was designed to get around had been fixed.  

The issue I’m having is that I am still seeing quite a lot of CSS tom-foolery in IE7.  Things don’t render 100% the way they should, sure its leaps and bounds better than previous flavors of IE, and I’m glad that they are finally getting around to actually listening to a spec, but still.. stuff doesn’t always work 100% the way it should and that is why those hacks were handy. 

MS didn’t seem to care about most customer complains with regards to the way CSS was implemented in previous versions of IE, and developers got used to dealing with it in a certain way, now they want us to abandon those ways too.  They have taken away the one nice way we could “fix” stuff in the CSS file.  Instead they want us to use the conditional comments crap.. which I personally don’t like and forces you to have multiple files for inclusion or forces you to have completely seperate style blocks.

The thing is, NOW because IE7 wont play nice you have to not only remove your hacks for all flavors of IE, but you also have to divide up all former versions of IE into their own files;

< !--[if lte IE 7 ] > .. Load the IE7 file .. < ![endif]-- >
< !--[if lte IE 6 ] > .. Load the IE6 file .. < ![endif]-- >
< !--[if lte IE 5.5 ] > .. Load the IE5.5 file .. < ![endif]-->

This sucks.  I want a CSS solution - and I’m going to hold my breath until I get one!

Okay maybe not.. But a CSS solution would be nice.. 

Related posts

  • No related posts.

Permalink -- Trackback

 
1:36 am -- Saturday, Dec 23rd 2006
Jason

Bhahaha Not even 20 minutes later I have found one..

Evidently IE7 has issues with the !important identifier. If an illegal name is used in stead of important internet explorer will still render it as important.. So basically in side any style block you may include properties that are intended to be rendered in IE only.

So you could say;
.someDiv {
width: 100px;
width: 50px !ie_only;
}

Thank you Microsoft.. =)

 
9:43 am -- Saturday, Dec 23rd 2006
Shawn

You should make a quick demo page and link to it from Css Hack on css-discuss: http://css-discuss.incutio.com/?page=CssHack

Does IE6 do the same thing, or IE7 only?

Either way…wow…you can almost hear the developer’s internal dialog, “Well, I don’t see why we have to match the word if no other word follows ‘!’ in CSS…yeah, that’ll work.”

Personally, I’ve drifted to the conditional comments camp. It makes maintenance a lot easier for me and doesn’t rely on unexpected behavior to work.

 
12:18 pm -- Saturday, Dec 23rd 2006
Jason

Well IE6 had no clue how to correctly handle the !important tag. Example;

div {
width: 500px !important;
width: 100px;
}

All other browsers would show the div at 500px, but IE would redefine it as 100 basically ignoring the important tag completely..

SO yes the !ie_only hack works because it will go ahead and reasign it willy nilly, where as other browsers would see that its a malformed ! identifier and ignore it.

 
12:27 am -- Sunday, Dec 24th 2006
Shawn

Nice.

BTW: Your comments feed seems very hit-or-miss. The last comment you left on this post never showed up, but others show up (seemingly) instantly.

Incidentally, I may have found yet ANOTHER IE bug, which, once I verify it and make a demo page, will post… Has to do with its DOM “support” when it comes to cloning nodes.

 
12:53 am -- Sunday, Dec 24th 2006
Jason

Hrmm Yet another Wordpress bug I guess.. I’ll look into it.. maybe I should just rewrite it..

As to the IE dom bug.. Whoa.. Shocker.. heh I cant wait to hear about it.

 
11:44 pm -- Wednesday, Jan 3rd 2007
Dave

I’ve been re-learning web design recently(the last time I made a webpage I was using tables and spacer gifs….yeah), and IE is really pissing me off. It’s difficult enough for me to get my head around valid CSS, and the last thing I want to do is worry about which version of IE is going to screw up what.

Anyways, I haven’t started reading up on the different methods of fixing IE’s CSS interpretation, so thanks for the leads.

 
12:24 am -- Thursday, Jan 4th 2007
Jason

Glad to help.. Feel free to ask other questions..

 
Leave a comment