Imagine my surprise, when I pointed my PDA browser (Pocket Internet Explorer aka PIE, Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240×320)) to www.cnet.com and my browser crashed! Ouch. There seems to be a bug in my PIE!
I couldn’t resist lifting up the hood to see if I could identify the culprit. Surprise, surprise, it is what I call the “the siamese twin float listing whammy”. Poor little PIE, can not handle two elements in a row that are both styled with a float and width followed immediately by an ordered or unordered list. Here is a simple example so you too can experience the pain.
<style type=”text/css”>
<!–
#thing1 {
float: right;
width: 10px;
}
#thing2 {
float:right;
width: 10px;
}
–>
</style>
</head>
<body>
<div id=thing1>
<img src=”../images/thing1.jpg” alt=”Thing 1″ />
</div>
<div id=thing2>
<ol>
<li>Float</li>
<li>Float</li>
<li>List</li>
<li>#$%^!</li>
<ol>
</div>
</body>
I also posted a sample page that will crash pie.
Solutions? Well, other than avoiding the float/width, float/width, list combo, if you will insert anything in your code (another tag, text, a non-breaking space) any where between the floated elements and/or the list you will solve this problem.
So don’t get caught by the vicious “siamese twin float listing whammy” there are a lot of us out here browsing with PIE!