Tuesday, April 14, 2009

IE8 Internet Explorer 8 hacks, filters, issues, fixes, resources

IE8 has been released. Things to take note of Ive found so far;

Unhack for IE8
What is the hack for excluding IE8 in an IE stylesheet? IE8 has fixed the problems and dosnt need the hacks IE7 does. How to un-hack for IE8 in an ie only stylesheet. (mmm keyword density).

It is unclear whether hacks written for IE7 also apply to IE8.

What I want is to target in one stylesheet IE6, IE7 and not IE8 and above. I dont want to use conditional comment of lteIE7 incase say IE9 needs a bug hacking in this stylesheet. I want all IE hacks in the one stylesheet.

So - in summary the code to use for your ie.css stylesheet to select for IE6, IE7 and IE8 and above is as follows:

/*Nav positioning for IE 8 and above */
#nav {
margin-top: 175px; /*No hack here, same value as in main stylesheet, as IE8 renders this correctly*/
}

/*Nav positioning for IE 7*/
*+html #nav { /*Targeting IE7 in standards mode which it should be*/
margin-top: 144px;
}

/*Nav positioning for IE 5 and 6 only. This needs to stay below IE8s value in the document flow.*/
#nav {
_margin-top: 136px;
}

NOTES
-now that I look at it I can take out the IE8 line, because IE8 dosnt need a hack and the other selectors are specific for those browsers, but Ill leave it in just for reference.
-Properties starting with a *+html are for IE7(standards mode) only - possibly also targets IE8 if you have specified IE=8 in your meta tags which is a new microsoft feature with IE8 release, which we havnt for this site. If you have, perhaps use a different IE7 and below selector.
-Properties starting with a * html are for IE5, IE5.5 IE6 and IE7(quirks mode) only. This was bunging up IE6 it seems to override the underscore selector?? So i took it out - IE7 shouldn't render in quirks mode unless your doctype is wrong.
-Properties starting with an underscore _ are for IE 5 and 6 only.

Hack for IE8
I havn't tried this but look here
http://ladysign-apps.com/blog/archives/529

IE8 Compatibility View (Viewers can make the page render like IE7 if they want)

IE8 new Compatibility View note: It seems it gets my IE7 specific styling when in IE8 with 'compatibility view' switched on - this is good...
its what i was hoping for...

You (the coder) can make viewers see the page rendered like IE7, in IE8
by adding some code to your source, as a meta tag in the head, read here:
http://ladysign-apps.com/blog/archives/532
personally I think this is whigedy whigedy whak - but maybe if the whole site is broken in IE8 and client has no money at all for you to go through and fix, you could add this into the template as a temporary solution.

Drag... read this carefully: from http://www.evotech.net/blog/2009/03/ie8-css-support/
IE8 compliance mode / preventing IE7 rendering in the IE8 browser

Important to know is that IE8 has a button that allows users to render your page in IE7. If that button is clicked enough, your page will always render in IE7 for everyone (not just those who clicked the button). So, do you have to test your pages in IE8 in IE7 mode? No, you don’t. To ensure that your page is not rendered in IE7 mode inside the IE8 browser add the following meta tag to your pages:

(go to the link above) but i think its a bad idea - just lay out your IE only stylesheet to have your IE version filters in the right order, and then test in IE8 and IE8 compliance mode/IE7.

Ive only tried one little things so far, but it seems that IE8 in compliance mode is identical to IE7, so if your IE7 renders right, so should your IE8...

No more CSS expressions
http://blogs.msdn.com/ie/archive/2008/10/16/ending-expressions.aspx
Ive not used these, except that I got some things done by Psd2Html awesome slicing service, and their ie.css had them in there. For example:
border-left: expression( (this===this.parentNode.childNodes[0]) ? "none" : "auto");
This might not be a problem because often these expressions were used to get around IE layout bugs, which are gone in IE8 so the expression isn't needed anymore anyway. I just checked that site that has them and all looks fine and dandy in IE8.

Its possible maybe that this could be used to select and hack for versions below IE8 in a stylesheet that is ie.css, a stylesheet for all versions of IE. Maybe thats what they (psd2html) were intending.

Resources so far:

Pretty good tips and points
http://www.evotech.net/blog/2009/03/ie8-css-support/

Decent prep to IE8 issues and features, with some useful snippets
http://www.thesitewizard.com/webdesign/prepare-your-site-for-ie8.shtml

Heres some pretty heavy info mainly for scripting and IE8 compatibility
http://msdnrss.thecoderblogs.com/2009/03/12/site-compatibility-and-ie8/

IE 8 hacks (targeting IE8)
http://ladysign-apps.com/blog/archives/529

Massive collections of IE hacks!!! all versions
http://css-class.com/test/bugs/ie/ie-hacks.htm

and here - this looks definitive - click on the examples to see more info and the code, pretty much everything your looking for will be listed here.
http://fu2k.org/alex/css/cssjunk/ie8/tests/
However I disagree with the entry for IE8 standards mode for *+html selector - in my tests IE8 DOES NOT read things which have *+html in front of them. Im using the full finished version downloaded today aswell.
I did read somewhere that it might implement it if you have added the meta tag that forces IE8 to render IE8...

here is a cool page list of IE bug fix examples
http://centricle.com/ref/css/filters/tests/