Crash IE6 with Pure XHTML and CSS

Right… I know this is a bit late and all… as IE7 is slowly taking over from IE6… but it is still heavily used… and when designing, I still definitely try to test all my stuff in IE6 also.

Anyway, as I was recently doing a new menu for something, I discovered that when ever I tested the page on IE6, it would crash!! So after a bit of investigation… and a lot of stripping of the code… I found that it is the most simple CSS and XHMTL page that can actually crash IE6 completely!

The code I have on the page validates 100% on W3C!!

Link to the page (I suggest you download it and try it on IE6 when you are not doing anything else with it…)

Here is the page contents:

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <title>test</title>
  6. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  7. <meta http-equiv="content-style-type" content="text/css" />
  8. <meta http-equiv="content-language" content="en-GB" />
  9. <style type="text/css" >
  10. #shortcuts {
  11. font-size: 16px;
  12. text-align:left;
  13. width:636px;
  14. }
  15. #shortcuts img {
  16. padding-right: 10px;
  17. }
  18. #shortcuts span {
  19. display:block;
  20. padding-top: 10px;
  21. }
  22. #shortcuts a:link, #shortcuts a:active, #shortcuts a:visited {
  23. padding: 5px;
  24. margin:5px;
  25. display:block;
  26. float:left;
  27. width:190px;
  28. height: 70px;
  29. color:#000000;
  30. background-color:#ffffff;
  31. background-image:url("img/home/bg1.gif");
  32. text-decoration:none;
  33. }
  34. #shortcuts a:hover {
  35. color:#ffffff;
  36. background-color:#000000;
  37. background-image:url("img/home/bg2.gif");
  38. text-decoration:none;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. Crashing IE 6 with pure XHTML and CSS :)<br />
  44. This Page Is Valid XHTML 1.0 Transitional!<br />
  45. W3C CSS Validator Results: No error or warning found, Valid CSS information<br /><br />
  46. Hover over the Menu links<br />
  47.  
  48. <div id="shortcuts">
  49.  
  50. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="1" /><span>Menu 1</span></a>
  51. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="2" /><span>Menu 2</span></a>
  52. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="3" /><span>Menu 3</span></a>
  53.  
  54. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="4" /><span>Menu 4</span></a>
  55. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="5" /><span>Menu 5</span></a>
  56. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="6" /><span>Menu 6</span></a>
  57.  
  58. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="7" /><span>Menu 7</span></a>
  59. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="8" /><span>Menu 8</span></a>
  60. <a href="#"><img src="x.png" align="left" border="0" width="64" height="64" alt="9" /></a>
  61.  
  62. </div>
  63.  
  64. </body>
  65. </html>

After a bit of investigation, the only way I found I could stop it from behaving odd (there were some repetition of text where there should be none)… plus of course the lovely crash!… was that I had to insert a “div clear both” in between each “row” of the menu… not ideal of course, if you want to have it dynamic and flow with the page.

Leave a Reply