IE8 – What you need to know

IE8 CSS Support and Rendering Mode, IE8 debugging, etc.

IE8 and CSS

IE8 came out today. I appended the CSS selector browser support blog post to include IE8 CSS Selector support and IE7 compliance mode CSS Selector support. Most notable is that IE8 Supports all of CSS2.1 and passes the Acid 2 test.

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:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Alternatively, if you want your pages to render in IE7 mode you can write: <meta http-equiv="X-UA-Compatible" content="IE=7" />. The issue with this is that IE7 rendering in IE8 is not identical to plain IE7. So, I recommend against using this meta tag.

So, to ensure that you DON’T have to test in IE7, IE8 and IE8 in IE7 mode, add the code above.


To learn more about what IE8 supports, check out IE8 CSS Selector support.

IE8 bugs

IE8 JavaScript Bug: Apparently IE8 doesn’t much care for prototype and prototip. I think it’s an issue with className that causes IE8 to choke. In the meantime, if you are using Ruby on Rails, then you’re probably using prototype.js. And, if you’re using prototype.js, then IE8 chokes, so you have to use the meta tag. And, if you use the
<meta http-equiv="X-UA-Compatible" content="IE=7" /> tag, make sure it’s the FIRST thing on your page, because IE8 suck ass, just like IE7 and IE6.

If you’re more of an ASP.net fan (which I am NOT!), there is another issue with menus not showing. Mark Hidreth explains it in his blog., but in short, the solution is to add a z-index of greater than zero to <asp:Menu>. Thanks to Attiq Jafar for alerting me to this bug and solution.

IE8 Disappearing Page Bug: If you put two adjacent nodes, both positioned absolutely, and set only one of x- or y- positioning, you may get a blank page.

Differences between IE7 compatibility mode and IE8

These are just a few differences that I have found so far. Please do NOT consider this an exhaustive list

  1. default padding on <p> is not equal
  2. table { border-collapse: collapse;} is NOT rendered the same. If dashed, IE8 is properly dotted or dashed, whereas IE7 overlays the lines and it looks ugly, and otherwise does not collapse
  3. border bottoms on an inline element will not display in IE7 if the border is the lowest part of the page. The page will not grow to include the border, unless the bordered element is block. IE8 will grow.
  4. border: hidden; IE7 does NOT understand the value of hidden for the border property.
  5. border-style: outset The coloring is different for IE7 than IE8. IE7 is darker on the bottom/right. IE8 has the darker color on the top/left. Groove and
  6. RGB – IE7 displays RGB mixed number types: The spec states that values for RGB should be three integers or three percentages, but not a combo of the two. (IE7 and IE6 display mixed types. IE8 and standards compliant browsers dow not render colors with mixed value types.
  7. IE8 has support for content:, counter-increment: and counter-reset: IE7 doesn’t!
  8. Empty declarations overide in IE7, but not 8: IE7 will not show a property if there is a malformed declaration after the element. p { color:green; color: } – IE8 will show green. IE7 wont.
  9. Identifiers starting with a digit or non-letter character followed by a digit: Identifiers starting with dash-number choke IE7: If there is a series of classes or ids listed, including ones that start with a dash followed my an integer, IE7 will choke, and ignore all the selectors in the series. For example,
    .-3myClass, .blue {color: blue;}
    #-3myClass, .blue {color: blue;}
    .3myClass, .blue {color: blue;}
    #3myClass, .blue {color: blue;}

    The element with a class of blue will NOT inherit the blue from either of these declarations

  10. @import is not correctly supported in IE7: @import “support/import-coloroveride.css”; (see the one before it for comparison)
  11. border-width: thin appears to be 1px wide in IE8 and 2px wide in IE7
  12. clearing: if you clear an element in IE7 after a floated element, and the element has a margin top, that will be the space between it and the floated element. In IE8, the margin top will be the space between it and the last non-floated element.
  13. box model: Some people believe that IE got the box model right, and the w3c got the box model wrong. IE8 gets the box model right according to the w3c.


IE8 CSS Hack

This IE8 CSS hack uses the star hack to target IE7 and lower, but you can use any other of the many IE hacks to target older IE browseres.

 p.myclass {    
     color: green;    
     *color: red; 
}  
body:last-child p.myclass {
     color: blue; 
} 

IE8 Developer Toolbar (or Firebug for IE8)

IE8 comes with a developer toolbar. The developer toolbar is definitely more robust than what came with IE7. Similar to Firebug, you highlight an element, and can edit CSS on the fly, but the mechanism is less robust. The CSS module informs you of inherited CSS and current values (in reverse order from Firebug). The CSS panel has check boxes next to each css property so you can turn on and off that property, and you can indeed edit the value or property by clicking on the value or property. You can’t use the up/down arrows like in Firebug, and unlike Firebug, the change isn’t instant: you have to click out of the property to see the change. However, it is definitely an improvement on the previous dev toolbar.

I should probably write a tutorial on this developer toolbar, but I really don’t care enough about this browser to put the effort in to it…. but maybe.

This entry was posted in Web Development. Bookmark the permalink.

54 Responses to IE8 – What you need to know

  1. Pingback: Apogeonline » Tutte le novità di Internet Explorer 8

  2. Pingback: Kurz und gut VI  miradlo bloggt

  3. Pingback:   What you need to know - IE8 by Web Front

  4. Tim says:

    In other versions of IE you had a character you could put in front of any css property to target specific IE versions

    For IE7 you had

    /

    For IE6 you had

    _

    For both you had

    *

    What is the special character for IE8? These special characters were the only thing i liked about IE period. Don’t tell me they removed them in cacky IE8.

    Im trying to fix tiny unusable form elements on 200+ sites without the user having to click compatibility view or Tools>Internet Options>Advanced tab>uncheck the “Enable visual styles on buttons and controls in webpages“ :(

  5. Estelle Weyl says:

    Hi Tim-

    The hack is that none of the IE’s understand the :last-child pseudo class. So, you declare what you want IE to receive, overwrite that with the star hack for IE7 and IE6, then tell all compliant browsers what you want with the body:last-child hack. the body is always the last child of HTML.

    You can also use as a quick fix so IE8 will always serve your page as IE7. Not a good long term solution, but i have done that to any site where I have issues until i have the time to fix them for real.

  6. Tim says:

    Ah OK thanks a lot Estell. I’ve booked marked this page. Ive got the code on email for when I’m at work tomorrow think I’ll just write a shell script to grep sed replace all my html files for now :D Thanks again.

    I’m guessing <!–[if IE 8]><![endif]–> Will work also?

    P.S you page is quite funny in places :D

  7. “Most notable is that IE8 Supports all of CSS2.1…”

    This statement is unfortunately wrong; CSS 2.1 doesn’t yet have an approved full test suite, and subsequently is still only a Candidate Recommendation.

    However, IE8 RTW still contains many spec violations and bugs.

  8. Estelle Weyl says:

    I want to point you all to an explanation of x-ua-compatible and other IE8 craziness: http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-compatible-situation

  9. Estelle Weyl says:

    Hi James-

    There are two test suites at http://www.w3.org/Style/CSS/Test/CSS2.1/ and one from 2008 at http://www.w3.org/Style/CSS/Test/CSS2.1/current/html4/. My understanding is that IE8 wasn’t released until they passed all the CSS 2.1 tests. Do you have any examples of IE8′s CSS spec violations?

  10. Mohd says:

    Cheers!

    Thanks for the “X-UA-Compatible” hint!

    IE 8 always destroys your IE 7 works..

    Regards

  11. Thanks for this article. Very helpful in trying to get to the bottom of the Emulate=IE7 and IE=7 craziness.

    Thank you.

  12. Darren says:

    What is the reasoning behind using ugly hacks like * when there are approved methods such as:

    <!–[if lte IE 6]>

    …to include a stylesheet with IE-specific rules?

  13. Estelle Weyl says:

    Darren – using the term “ugly” is a bit harsh. You may like the IE specific comments, but some others may find catering to non-standard, browser specific HTML (versus including the non-standard code in the CSS) as an ugly hack, especially since it requires an extra http request, or, even worse, in page CSS. Each HTTP request slows down page rendering.

    The star hack is viewed by many as a quick way to target IE7/6 without having to maintain 2 files, and providing the option of including the IE6/7 override directly after the standards compliant declaration.

    Additionally, as a blog author, it is so quick and easy to include a star hack and write “use any hack you wish” — one line of code with a star in front of it is much easier to write and read than any of the multitude of hacks. You’re free to use whichever hack you wish, as noted in the article above.

  14. nick says:

    quote: “but I really don’t care enough about this browser to put the effort in to it”

    I found this to be paramount to saying I don’t really care about that chainsaw wielding cannibal in the next room.. IE8 is coming to get us web developers.. And it’s not going to be pretty.

    Of course I say this while troubleshooting some mysteriously disappearing tabs on one of my client’s sites – after they had the nerve to download IE8.

  15. SteveShaw says:

    Fantastic. The short term fix to force the browser to render the page as IE7 worked a treat.

    Not sure what I will have to do to fix the problem properly but for now it works.

    Thanks a lot for this Estelle !!!

  16. Yoav says:

    Can you please elaborate on the box model differences between IE7 mode and IE8 mode?
    I understand the differences between quirks mode and IE7/IE8 in that aspect, but what is the difference between these two?

    Thanks!

  17. JMM says:

    In IE8 I have a color problem. Some jpeg images are showing extreme color changes (like yellow to turquoise). Colors still come up correctly in IE7 and FireFox. Has anyone else experienced this? Or have an idea of what could be causing it.

    Example: (the car on the main page should be yellow):

    http://www.infinityepoxy.com

    Test it out on both versions to see the difference.

    Thanks.

  18. Estelle Weyl says:

    Very bizarre. I saved both the yellow and blue to my desktop, and both look yellow in my FF, Opera, Chrom and IE6, but blue in my IE8 / IE7compat. It looks like the red is missing (which was a known problem in some very old version of IE). Did you save this in Photoshop? Perhaps as a print mode jpg instead of a web (RGB) image? Try saving as RGB, and see if you get the same problem. If you still have issues after that, let me know, and i’ll do some testing. If it works, let us all know too, so we know the solution.

  19. JMM says:

    Ok, fixed the color blues… no pun intended. I’m not exactly sure what the specifics of the issue was, but I noticed that the only jpegs suffering from the problem were ones that I batch resized with a Freeware program called “Image Resize Magic”. It must have did something wacky to the images profile??? I can’t talk bad about the developers, but I won’t be using this software again. (I didn’t know how to batch process images in photoshop – until now)

    Quick tutorial on doing this here (for CS3):
    http://smartboydesigns.com/2009/02/05/batch-image-resizing-in-adobe-photoshop-cs3/

    I decided to resize the pics using photoshop (Thank God I kept the originals). For the processing I did decide to check the box for converting the profile to RGB (I dont think this is necessary however- I tested one without it and it still worked) Re-uploaded them and all is well again.

  20. JMM says:

    Correction – Software is named “Photo Resize Magic”.

  21. Pingback: Rotating Text with CSS | WCZone Web Design! | Akron Ohio Website Design - Akron Web Development, Cleveland Web Design, Business Website,Web Programming, Akron, Summit County - Services Cuyahoga Falls Website Design Web Development, Business Website,Web Pr

  22. Pingback: IE8 Compatibility Mode and IE7 are Not the Same Thing - Pop Art Blog

  23. Pingback: IE8 Compatibility Mode and IE7 are Not the Same Thing at Space Ninja

  24. Hi,

    Thanks for this article. Its been very useful in a little project i’m doing at work.

    When IE8 is in compatability mode does it use any ie7 specific stylesheets thats are called through conditional comments or does it choose to ignore these completely?

    Thanks

  25. Estelle Weyl says:

    Hi Jason-

    When you tell IE8 to pretend it is IE7, it does include any conditional comments that standard IE7 would include.

  26. Pingback: Rotating Text with CSS « Om Net Solution

  27. Kaela says:

    Hey, just wanted to let you know that I was in a rush to fix up the site for work, everything IE7 and before were messed up, and this helped me set everything straight! You saved my neck, thanks a bunch!

  28. Ocean says:

    Found that IE8 dont understand the screen resulution.

    It says I use 1344×840. When i use 1680×1050. So my javascript dont work as it should. anyone know a way around it?

  29. Pingback: AGGHH! Website a mess in IE, anyone know about fixing?

  30. Pingback: Rotating Text with CSS | Web Technology

  31. nic says:

    thank you for the information – and also for releasing my IE-pain and MS-hatred a little :-)

    what I wonder: what standards do they follow now???

  32. bee says:

    updating web site and tested home page in Firefox, Safari, Opera, Chrome … OK. IE6 OK-ish, IE7/8 aaargghh!

    IE7/8 loses the flyout menu (probably fixable but I’m tired right now) but I can’t get it to display right because of the javascript scroller falling off the bottom of the page. If I use marquee to make the scroll work in IE, it doesn’t work in Firefox.

    Any ideas? Test page at http://www.sunseekerdoors.co.uk./2009-cb
    Thanks.

  33. bee says:

    update: this js-marquee works! http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm (well, except IE6 where it only works for the first cycle then drops below the display area);
    the problem with the flyout menu in IE7/8 appears to be caused by using STRICT – using Transitional creates other problems but we’re working on it …

  34. Estelle Weyl says:

    Hi Bee-
    Your javascript marquee example is working for me in IE6 just as it is on Dynamic drive. Your flyout menus are working for me in all IE’s as well. The main layout issue I see is caused by default font size rendering being differet in IE6. you may want to consider a font reset like Nate Koechley’s YUI font-reset.css.

  35. Pingback: Tune Up Your PC » Post Topic » Особенности рендеринга CSS в IE8

  36. Pingback: IE8 и режим совместимости с IE7 | BonzaDesign

  37. Andy says:

    Hey, great article to start with.Thanx!
    Here’s my problem, i use css to style fonts in a div. The problem is, i can see the color properly in firefox or netscape but when using ie8 the fonts are grey!
    Any idea what that might be??
    Here’s my css which is actually very simple

    .myclass {
    color: red;
    }

  38. Selami Ozlu says:

    or

    do not help my case.
    My application works fine on previous IE (7, 6) but with IE8
    i get the message “Object does not support this property or method” in my code line where runtimeStyle method exists:

    document.all.dbNetGridTable.rows[2].runtimeStyle[currentStyleValue] = ”

    Any suggestion?
    Regards,
    Selami Ozlu
    [email protected]

  39. Selami Ozlu says:

    ….

    and

  40. Selami Ozlu says:

    meta tags do not help me.

  41. To Andy…its how you called red “red”. Try the color number.

  42. mandy says:

    hello sir i have one proble regarding to IE7 and IE8 my website design work properly in to IE7 but not working in IE8 please help me in which field i have to change

  43. Mark says:

    Nothing about that tag works… I don’t know where you are getting that information.

    Also this comment box is almost white on white here

  44. Pingback: İnternet Explorer 8′in CSS Desteği | Taha Kıv

  45. raj says:

    thanks for this code, it’soldved my probme

  46. Dave Stuart says:

    Excellent Post! Keep blogging!

    Dave

  47. Pingback: IE8 Band-Aid | Chazz Layne

  48. fastreplies says:

    Hi Estelle

    Subject: image effects using CSS

    We’re using CSS mouse over thumb to open large image in center of the page regardless of where thumb itself is located on top or the bottom of the page using bottom: 150px; left: 175px;

    It’s working fine in every browser but IE8. The problem with IE8, large image stays 150px from the top so when we scroll to bottom thumbs, we can’t see large image. To understand better what I mean, please visit http://www.amray.com/searches/new/ and try FF, Safari or even IE6 and then IE8

    What can we do to CSS to force IE8 to obey it?
    Please use my email address to reply

    Thanks in advance

  49. Hari Durgam says:

    Hi

    Is it better using CSS HAcks in a Website? Plz Can any one Explain what is the Advantages and Disadvantages

    Thanks
    Hari Durgam

  50. Paul says:

    Hi,

    I hope you can help.

    We are a small business and have developed our own website using Expression Web, CSS and used IE8.

    In general IE8 renders CSS well; eg the box problem.

    We now have a web site which looks great when viewed on IE8. Clearly, when viewed from IE7 or 6 it does look very messy.

    Could you advise what approach should be taken to ensure that a standards designed web site works on older browsers eg IE7 or 6

    Any help appreciated.

    Regards

    Paul

  51. Pingback: Ä°nternet Explorer 8′in CSS DesteÄŸi « CSS Feed

  52. Pingback: Rotating Text with CSS | Web Design News

  53. Is it better using CSS HAcks in a Website? Plz Can any one Explain what is the Advantages and Disadvantages
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>