Why does layout change in IE when UL is alone in a TD vs having an extra empty DIV?

I’m trying to find an answer to my layout question — I posted it to stack overflow:Why does layout change in IE when UL is alone in a TD vs having an extra empty DIV?. I’m posting it here as well, so I can upload a screenshot.

Update: There is now an answer on the stackoverflow question; One of the css rules makes the li tag white — it doesn’t have to, because the a is white. IE takes the spaces between the lis, and puts them in the enclusing td. This pushes the li down, causing it to overlap the border line.


I’m adding css-based tab navigation to a site that is still using table-based layout. When I place my tab list inside a td, there is a visual “gap” that you can see. If I put an empty div with “width: 100%” in the td, then my tab list displays correctly. (It also works fine outside the table.)Why does the div make the tabs lay out correctly, and is there a better way to make them do so without adding a content-free div?Here’s my test case: Test Case: Why does layout change in IE when UL is alone in a TD vs having an extra empty DIV?And a Screen Shot:

Screen shot of the error in IE 7

Comments are closed.