Previous Message
Next Message

IE6 home page crash of anchor with padding, position:relative, and white-space:nowrap

Sent by Karen Stevenson on 1 November 2004 13:01


I am in the process of setting up a new site design and had erratic reports
that the home page (valid xhtml and css) was "hanging" and would not load.
After hours and hours of tearing the code apart line by line, I found that I
could consistently get the page to hang under very specific circumstances.
When I say the page hangs, I mean it completely locks up and you have to
close the window and kill the process to get out of it.

The following combination caused the page to crash:

1) two or more relatively positioned anchors with padding and
"white-space:nowrap"
2) in a xhtml page coded to standards mode
3) when viewed in IE6 (service pack 2) and set up as the IE home page (the
first page you go to when opening a new window)

The page did not crash if I omitted ANY ONE of "position:relative",
"white-space:nowrap", or padding in my css for the anchors. 

The page did not crash if I had only ONE anchor with these properties, only
if I had TWO or more.

The page did not crash, even with all these characteristics if I forced the
page into IE6 quirks mode. 

The page did not crash in any other browser except IE6 -- earlier versions
of IE did not crash. 

And the page did not crash even in IE6 if I went to any other page on the
web before going to the target page. 

I have service pack 2 on my version of IE, so I can't confirm if IE6 without
service pack 2 has the same problem.

Ironically this came up after I started applying "position:relative" to
practically everything in my css to fix another IE6 bug where various parts
of the page that are visible in other browsers seem to "disappear" in IE6. 

Here is what I finally got my test case down to. It is a very simple page
that will crash as the IE6 home page. You can get it to work correctly as
the IE home page if you change the html to force it into quirks mode, remove
the second anchor from the html, or remove any one of the three css
attributes for the anchor:

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> 
<head>
<style type="text/css"> 

a {
  padding:2px;
  white-space:nowrap;
  position:relative;
  }  

</style>
</head>
<body>

<div>
   <a href="#">Option 1</a>
   <a href="#">Option 2</a>
</div>

</body>
</html>

Anyway, it is definitely something to be aware of, and there may be other
css combinations that will cause crashes in home pages. Obviously IE6 does
something different with its home page (or the first page it opens) than
with other pages. My conclusion is that css designers should ALWAYS check to
make sure their design behaves properly if set up as the IE home page. (How
many of us would normally have a design site set up as our IE home page --
probably no one!!)

Hope this helps someone else. It took me hours and hours to figure out what
was going on!

Karen Stevenson
http://www.elderweb.com/


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message