FF seems to be showing this correctly, where both "Crate Accessories" and "Exercise Pens" are on the 2nd line. But IE wants to put "Exercise Pens" on the 1st line, seemingly ignoring the "float" command where it should be on the 2nd line to the right of Crate Accessories. Why is IE6 doing this and will it react the same in IE7?

CSS Code:

Code:
#category li {
font-family:Arial, Helvetica, sans-serif;
width:130px;
line-height:1.4em;
text-align:center;
list-style-type:none;
float:left;
padding:20px 20px 10px 10px;
margin-right:10px;
}


HTML

Code:
<div id="category" style="clear:left; margin-left:-20px;">
<ul>
 <li><img src="/Dog-Crates/Wire-Crates_80px.jpg" alt="Wire Dog Crates" width="104" height="80"><br><strong>Wire Crates </strong></li>
  
 <li><img src="/Dog-Crates/Soft-Crates_80px.jpg" alt="Soft Dog Crates" width="97" height="80"><br>
   <strong>Soft Crates </strong></li>
 
  <li><img src="/Dog-Crates/Wicker-Crates_80px.jpg" alt="Wicker Dog Crates" width="100" height="80" style="border: solid #b5b5b5 1px;"><br>
   <strong>Wicker Crates </strong></li>
   
 
  <li style="clear:left;"><img src="/Dog-Crates/Dog-Crate-Accessories_80px.jpg" alt="Crate Accessories" width="70" height="80"><br><strong>Crate Accessories</strong></li> 

  <li><img src="/Dog-Crates/Exercise-Pens_80px.jpg" alt="Exercise Pens" width="94" height="80"><br><strong>Exercise Pens</strong></li>
</ul>
</div>