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/

Recent finds and fixes typography and jquery fades

OS X and type rendering of knockout text (white text on a black background)

Normal body text in this situation on a mac looks bold, because of the anti-aliasing engine going overboard on knockout text. 

/*text-shadow: 0 0 0 #000;*//*makes light coloured text look thinner in safari see http://24ways.org/2006/knockout-type */

Except theres nothing like that for Firefox. So Im using a lighter font family which is installed by default in macs. 

font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

and hoping it dosnt look too think with people who have PCs and that font. 

JQuery fades side effect on Firefox 2 on a mac for type anti-aliasing. Or why on my Jquery gallery pages does the text suddenly look rubbish until I mouse over it?

/*-moz-opacity: 0.9999; *//*For Ffox 2.0 mac - Jquery fades on a page turn off its text anti-aliasing on that page. This style turns it off permanently so the problem isn't obvious. Double bonus of making knockout text not as heavy on os x. BUT - its makes a peekaboo bug on mac FF2&3 happen to Quicktime / Flash content so it cant be used.  */

This seemed like a good fix until I checked a page with embeded quicktime and it was making the video display a peek-a-boo type bug when your mouse went near it. Ive read this also happens with Flash content (or your SIFR!). 

IE7 cleartype (anti-aliasing) being turned off by Jquery

Theres also a similiar and just a shit problem that happens on IE7 to cleartype, in that the cleartype (IEs versions of anti-aliasing for web text) gets switched off when its part of your fading gallery (on mine text on the page is ok, just text thats being faded up with the gallery images looks rubbish). Aparently a fix is:

Assign a background colour to the bit thats being faded / the containing element of the text (but this isnt a solution for me because that area needs to be transparent (have no background assigned). 

this could also be a fix

http://groups.google.com/group/jquery-en/browse_thread/thread/221169cf3a03d32e/51326b4726541831?lnk=gst&q=text+anti-aliasing#51326b4726541831
> But for IE7 you need to remove the opacity filter after the  
> animation completes:
> $('#myDiv').fadeIn(function() {
> if ($.browser.msie)
> this.style.removeAttribute('filter');
> });

IE 6 div with class applied weirdness / bug - only applies first class styles in css source order

quick noteabout IE6 and having a div that has a class applied to it as in the html below. 

HTML is

CSS is

#adivoneverypage {its styles}

#adivoneverypage.aclassforacertainpage{

special styles for just one unique page- as a class -but inheriting 'base' styles from above that are common to allpages with this div. (Mainly just to reduce repetition in the CSS file)

}

#adivoneverypage.aclassforacertainpage2{

styles for a different unique page to above- as a class -but inheriting 'base' styles from #adivoneverypagethat are common to allpages with this div. 

}

#adivoneverypage.aclassforacertainpage3{

special styles for a different unique again page to above- as a class -but inheriting 'base' styles from #adivoneverypagethat are common to allpages with this div. 

}

so the problem being - that in IE6 -it only applies the special class styles which come first in the source order of the CSS, and none after that!!! its as if these special styles just arent there, IE6 STOPS reading the styling after the first one is applied. You can test by copy pasting the last special class style and putting that first (after the #adivoneverypage styles) in the CSS source order. Then its styles will be seen by IE6 - but not the ones below it. 

My fix to try is NOT USING class selectors on DIVS to make specific changes, but having just a unique div on every page and repeat the same a few times in the css instead of once and having all the classes inherit it. 

so the HTML is instead:

CSS is 

#adivforacertainpage {its styles}

and for each page have unique div IDs. Which is a shame because sometimes these divs on each page are practically identical except for maybe a bit of different padding is necessary for a certain page, or something like that, but otherwise they are the same size, have the same margins, positioning etc etc, so its a shame to have to repeat the CSS over and over again. 

A fix for the min-width problem?

Test this out it might be a good solution for the problem of not being able to set min-width in IE6. Look into what !important does...

#id {
min-height: 100px;
height:auto !important;
height:100px;
}

Looking forward - Internet Explorer and the CSS box model

For a run down of the Internet Explorer Box Model CSS problem /solutions see this link:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

To avoid problems with the IE5 Win border box model I have for years just been using the technique below automatically. I'm so used to using this method I'd actually forgotten why it was I did this in the first place. So I looked it up and what I was doing was to support IE5 Win! (Or IE6 in quirks mode - which it will never be because I always use a correct doctype).

Nesting Boxes Method For Avoiding Box Model Hacks
"One solution to the box model problem is to not assign padding or border to a DIV to which you have assigned a width. If you don't need a border effect, you can get your padding by simply setting margin or padding on all the box elements (DIVs, Ps, BLOCKQUOTEs, etc) contained with the DIV. If you need a border, simply nest a DIV within that DIV, do not assign it a width (it will fill up its parent DIV), and assign a border to the nested DIV."
Or more simply "...avoid specifying both width and padding or border for the same element. This ensures that all browsers will use the same total width, no matter which box model they use."

So, if you now make sites with the sentiment of 'fuck you IE5 Win you dont even exist' which alot of people are doing now, you can stop thinking 'padding is evil'.

A reminder, the padding/borders were only evil on a div with a stated width. Theres no problem if the div is auto width. Again I was so used to padding / borders being evil I was avoiding them everywhere in favor of margins.

It is archaic and time consuming to be going to all this extra effort of putting margins on all your little contained elements just for IE5. Or special hack values in your CSS. Instead use padding and borders to the W3C spec, and then if your project really does require IE5 support (lots of users who are old, poor, underfunded etc), add an IE5 only stylesheet using conditional comments, and in that, make the width of your divs be = (width+left border+right border+left padding+right padding).

One thing I just realised when writing that was that not having padding / borders on fixed width divs in the past made making layout size calculations alot simpler. All I've had to remember using the nesting method is margins+width, which simple to calculate.

But if Im switching to using padding and borders on my fixed width divs in the future, the calculation becomes: WIDTH MY DIV TAKES UP = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. Thats heaps of values to think about! And some times people like to have their text padding in ems so it relates to their font size, so if that is the case, then calculating the width your div takes up becomes tricky, how do you add a pixel and an em?

So depending on your situation, it could turn out to be better to keep doing the old nesting method on some layouts. But its nice to know you don't really have to anymore.

IE6 PNG Transparency Fixes

Looked for a few solutions for the IE6 transparency problem:

SUPERSLEIGHT:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Basically trialling supersleight right now, its like a magic bullet that just whacks all the transparent pngs on your page without you having to do anything except include link to supersleight.js in conditional comments in your head tag. Think this is the best thing to try first since its so quick to get working.

I like especially that conditional comments mean this is all kept away from everything else. Apply it to the whole site, then go through page by page (browsing in a complete version of IE 6 of course) and see if its messed anything up, like links becoming not clickable, forms not working, or backgrounds becoming positioned weirdly. Then you can add specific fixes for these in your IE only stylesheet. If your lucky, it will work right out of the box, because in the supersleight code its applied fixes for making links clickable and making INPUT (forms stuff) areas work.

If any links etc dont work, the easiest way to fix is put in your IE only stylesheet the thing thats not working with position relative and z-index:1 for good measure. You can just list everything you can think of aswell to be paranoid:
a, li a, INPUT, TEXTAREA, SELECT, OPTION, BUTTON {
position: relative;
z-index: 1;
}

Sometimes it still will break things, like when i had an image map, the rollovers stopped being active. I had to apply a position:relative to the div that was containing the image map which is a child of a background which has transparency. Dont think about it too much, just whatever is not working, put a position relative on the div it is in. (But if its in a div that has transparency, youll need to make and extra div wrapper inside the div that has transparency, and make THAT position:relative. Theres also the issue of it not being applied to the rolled over image out of the box, but havn't got to that yet, think it just has be be called again when the image is rolled over.

ALPHAIMAGELOADER ON ITS OWN:
If your lucky and your site has only a couple of transparent areas, ie backgrounds, then you can apply fixes specifically using the AlphaImageLoader on its own. This below worked fine for a background that i had set to background-repeat:repeat, BUT it was a FLAT colour background that was semi transparent, not a patterned one like stripes or something. It stretches your background which is ok for a non-patterned background or non-gradiented background. actually might be ok for a gradient that repeats only one direction, havnt tried it though.

eg. in an IE6 only conditional commented stylesheet add your fixes
#adivwithatransbkrndthatrepeats {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrnd.png',sizingMethod='scale');
height: 1% /*might be necessary sometimes to make it have layout*/
}

if you want to apply it to a background image that dosnt repeat, ie a single logo that is a background image then use it with the sizing method crop instead.
#adivwithatransbkrndthatdosntrepeat {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrndthatdosntrepeat.png',sizingMethod='crop');
}

Your links etc that are in the div getting the fix will stop being clickable, so youll need to then apply the position:relative bizzo as described above. And it dosnt work on divs or whatever that dont 'have layout'.

TWIN HELIX:
Will probably try this if i cant get the rollover to work using Supersleight, because it says it supports rollovers out of the box. The thing that concerned me was the way the relative linking had to be, it looked like it was going to be tricky with multiple folders site structure.
http://www.twinhelix.com/css/iepngfix/demo/

Some other solutions are listed here with more full descriptions of options:
http://www.dedestruct.com/2008/01/13/cross-browser-transparency-with-png/

JQUERY:
http://jquery.khurshid.com/ifixpng.php
and following on:
http://plugins.jquery.com/project/iFixPng2

This is an example of a site that uses tricky side columns with transparency fixes
http://www.builtbybuffalo.com/

Flash comboBox Component Bug

Bugs in Flash comboBox component.
I used this fix detailed on http://lailablog.blogspot.com/2005/12/flashs-combobox-component.html
Worked nicely.

"The ComboBox component in Flash does not behave as expected if used in a movieclip loaded by loadMovie or attachMovie. What happens is that the ComboBox won't open, as if it doesn't react to events.

1. Drag an instance of the component onto the stage of the movieclip that's loading the movieclip containing the ComboBox. It can then be deleted, the point is that the loading movieclip has the component in its library. This appeared to solve the problem for a lot of people.

Also theres a lockroot solution which I didnt try but is documented here:
http://livedocs.adobe.com/flash/9.0/main/00002626.html