Is it a bug? Testing your site for IE 8

I have spent many hours pouring over a page in Internet Explorer (6 and 7) trying to work out where that extra padding comes from. Now I have another tool in my arsenal to work out if the problem lies with me, or if it’s just a bug.

The Windows Internet Explorer Testing Center produced in “conjunction with the Beta 2 release of Internet Explorer 8” provides a series of CSS cases that can be used to assess how well a browser conforms to CSS 2.1 standards. This is more useful than the Acid 3 test because it provides a way for developers to test their code rather than, what the acid test is, a yard stick for browser makers.

The site structure of the testing centre is particularly unfriendly, but if you know where to find it, the information is there. Take, for example div centering using auto margins.

The following test should display as one div with a thick blue border. This is produced by three divs. One empty div with an id of “reference” has a red border and is positioned absolutely. However this is overladen by two other divs (ids 1 and 2) which sit within each-other. To pass this test no red should be visible.

Firefox displays as it should:

However IE 6 and 7 have an awful time:

Instead of using the auto margin to centre the second div inside the first it add additional margin so the first div fills the whole screen

Strangely within this website the CSS cases are sorted by chapter and start at chapter 4. As they are not labeled this is what the cover (roughly):

• Chapter 4: How browsers treat malformed code
• Chapter 5: Selectors
• Chapter 6: HTML attributes and CSS specificity
• Chapter 7: media targeting
• Chapter 8: Box model (borders, padding, margins)
• Chapter 9: Positioning
• Chapter 10: height / width
• (no chapter 11)
• Chapter 12: Generated content and lists
• (no chapter 13)
• Chapter 14: Backgrounds
• Chapter 15: Fonts
• Chapter 16: Text
• Chapter 17: Tables
• Chapter 18: User interface

N.B. After further research this order follows the chapters in the CSS 2.1 specification. There is Some method to this madness. However should we read into the fact that chapters 11 (visual effects) and 13 (print/paged media) have been omitted? Will IE8 at least support the CSS 2 standards?

This site wasn’t intended to highlight bugs in previous versions of Internet Explorer, but instead to demonstrate how IE8 now conforms to the standards. However it does a great job of the former, showing just how far the browser has come (but from such small beginnings).

IE8 may be finally catching up to the standard, but it looks like they’re still a long way behind providing support for the standards of the future. Apart from perhaps some selectors there is no talk of support for CSS 3.  At least in the meantime we have in this site a tool to stop us hitting out head against the brick wall of IE. Thanks guys!