Currently, I have an elegant top menu on my website (clubcatcher.com) made using tables. (Please excuse my ID naming style and code formatting as I like to make the user download the fewest bytes of unnecessary whitespace as possible.)
People say that with tables, everything else on the page has to wait to load until everything in the table has completely loaded, and others believe using tables is bad for layout.
So I'm trying a new approach on my local server copy of the site by using unordered lists for the menu.
In my code, class TS represents the selected menu item, and class TE represents the end of menu and that a small gradient (about a few pixels high) on a black background should show like what you see on the real site now. With the new setup, instead of the black gradient, I get nothing on the same background color as the body background color.
I then tried removing width:auto from TE and the gradient appears as a box of the same width as the rest of the menu item tabs but on the next line.
I tried adding overflow:hidden to #TM without success.
All the images I mentioned are background images that are loaded from a single sprite sheet. I didn't have this many formatting problems with tables but I want to try another way. Maybe unordered lists aren't compatible with what I'm doing?
I'm looking for a solution that works with IE7 as well.
This is what I came up with so far:
JsFiddle (this link was inserted by a member who tested my code with jsfiddle since I couldn't access it.)
HTML:
<ul ID="TM">
<li><a href="url">menu item 1</a></li>
<li><a href="url">menu item 2</a></li>
<li class="TS"><a href="url">menu item 3</a></li>
<li><a href="url1">menu item 4</a></li>
<li><a href="url1">menu item 5</a></li>
<li><a href="url1">menu item n</a></li>
<li class="TE"> </li>
</ul>
CSS:
#TM LI{width:auto;float:left;display:block;margin:0;padding:0}
#TM {color:#FFF;background:#000;width:100%;margin:0;padding:0}
#TM .TE{width:auto;background:#000;color:#FFF;background:0 -112px}
#TM .TS{color:#000;background:#FF0 center -214px}
#TM LI A{background-color:#EEE;color:#000;height:20px;width:60px;margin:auto;display:block}
#TM LI{padding-bottom:0;width:100px;height:49px;color:#FFF;background:#000 center -163px no-repeat}
UPDATE
The following is the working code as taken directly from the live HTML. Only modification I made here was replacing the irrelevant elements requiring the background sprite with dots since it doesn't apply to the question.
HTML of working code:
<table ID="TM">
<tr>
<td><a href="http://collage-editor.clubcatcher.com/">Collage +Editor</a></td>
<td><a href="http://live-events.clubcatcher.com/">LIVE Events</a></td>
<td><a href="http://pictures.clubcatcher.com/">Photo Albums</a></td>
<td><a href="http://thenew.clubcatcher.com/social">Social Circle</a></td>
<td><a href="http://thenew.clubcatcher.com/order">Online Orders</a></td>
<td><a href="http://help.clubcatcher.com/">Find Answers</a></td>
<td><a href="http://thenew.clubcatcher.com/index2.php?A=GETOUT">Logoff</a></td>
<td class="TE"></td>
</tr>
</table>
CSS of working code:
#TM {color:#FFF;background:#000;width:100%;border-collapse:collapse;border:0}
#TM .TE{background:#000;color:#FFF;background:0 -112px}#TM .TS{color:#000;background:#FF0 center -214px}
#TM TD A{background-color:#EEE;color:#000;height:40px;width:60px;margin:auto;display:block}
#TM TD{padding-bottom:0;width:160px;height:49px;color:#FFF;background:#000 center -163px no-repeat}
#TM TD,#TM .TS,#TM .TE,...{background-image:url('http://i.clubcatcher.com/dcB')}
