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

Answer 1

I see no difference at all in IE6.

Answer 2

The gap is caused by IE's funny ways with lists. Since ul tags can only contain <li>s, IE apparently also believes the whitespace between the list items is inappropriate and moves it inside the preceding list item, in your case following the <a>.

That then causes the white background of the selected tab to overlap the <ul>s bottom border (due to its positioning).

It looks like the easiest way to solve it in this example is simply to remove the background color on ul.tabnav li.current. In fact, I think you can remove that entire ruleset, since the border doesn't do anything either.

---

If none of that helps you fix it on the actual site, a last resort could be to get rid of all whitespace outside the <li> tags. E.g.

<ul><li><a>Home</a></li><li>etc.</li></ul>

or something like this if you want to retain some semblance of formatting:

   <ul><!--
   --><li><a>Home</a></li><!--
   --><li>etc.</li><!--
   --></ul>

But that whitespace is also all that's responsible for the spacing between the tabs, so you'd have to add a right margin to bring it back.