Databases
StackOverflow2013
Postsdbo
POWhy does layout change in IE when UL is alone in a TD vs having an extra empty DIV?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does layout change in IE when UL is alone in a TD vs having an extra empty DIV?
    text
    copied!<p>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.)</p> <p>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?</p> <p>Here's my test case:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt;&lt;title&gt; Strange gap &lt;/title&gt; &lt;style type ="text/css" &gt; /* stolen from http://unraveled.com/publications/css_tabs/, then hacked to death */ ul.tabnav { /* general settings */ border-bottom: 1px solid #cbcbcd; /* set border COLOR as desired */ list-style-type: none; padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */ margin: 3px 0px 0px 0px; /* Right on top of the next row */ } ul.tabnav li { /* do not change */ display: inline; } ul.tabnav li.current { /* settings for selected tab */ border-bottom: 1px solid #fff; /* set border color to page background color */ background-color: #fff; /* set background color to match above border color */ /* border: solid 1px red; */ } ul.tabnav li.current a { /* settings for selected tab link */ background-color: #fff; /* set selected tab background color as desired */ color: #000; /* set selected tab link color as desired */ position: relative; top: 1px; padding-top: 4px; /* must change with respect to padding (X) above and below */ } ul.tabnav li a { /* settings for all tab links */ padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ border: 1px solid #cbcbcd; /* set border COLOR as desired; usually matches border color specified in #tabnav */ background-color: #cbcbcd; /* set unselected tab background color as desired */ color: #666; /* set unselected tab link color as desired */ margin-right: 0px; /* set additional spacing between tabs as desired */ text-decoration: none; border-bottom: none; } /* end css tabs */ &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; I'm making some tab navigation with css. I copied the code from &lt;a href=" http://unraveled.com/publications/css_tabs/"&gt; http://unraveled.com/publications/css_tabs/&lt;/a&gt;, and hacked it up. There's an odd behavior that I see on IE (v 7). There's a gap below. &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;ul class="tabnav"&gt; &lt;li class="current"&gt;&lt;a &gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a &gt;Search&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; No gap below this &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt; &lt;div style="width: 100%"&gt;&lt;!-- This div forces the menu to render properly in IE7. I don't know why --&gt;&lt;/div&gt; &lt;ul class="tabnav"&gt; &lt;li class="current"&gt;&lt;a &gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a&gt;Search&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; why? The difference is the presence of a div with style="width: 100%" on it in the second case. I don't know why this fixes the rendering; I'd like a better way to do it without adding an extra empty div. This page should be in standards mode (or at least non-quirks mode). &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; For comparison, it works fine outside of a table: &lt;ul class="tabnav"&gt; &lt;li class="current"&gt;&lt;a &gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a &gt;Search&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I've now crossposted this to my blog: <a href="http://www.bacondrivencoding.com/2008/2009/07/why-does-layout-change-in-ie-when-ul-is-alone-in-a-td/" rel="nofollow noreferrer">Bacon Driven Coding: Why does layout change in IE when UL is alone in a TD vs having an extra empty DIV?</a>, with a screenshot so people can see what I'm talking about.</p> <p>Here's the screenshot:</p> <p><a href="http://www.bacondrivencoding.com/2008/wp-content/uploads/2009/07/ie7.PNG" rel="nofollow noreferrer">Mind the Gap http://www.bacondrivencoding.com/2008/wp-content/uploads/2009/07/ie7.PNG</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload