Hello,

I'm doing the usual horizontal list. The client requires the use of background image tabs. I thought it would be easiest to avoid auto-expanding tabs and just make the tabs a fixed width.

HTML:
HTML Code:
<div id="menu">
<ul>
<li><a href="http://www.dogsniff.com">Hot Topics</a></li>
<li><a href="http://www.dogsniff.com/upcoming">What's New</a></li>
<li><a href="http://www.dogsniff.com/comments">Comments</a></li>
<li><a href="http://www.dogsniff.com/submit">Submit</a></li>
</ul>
</div>
CSS:
HTML Code:
#menu ul {
height: 30px; 
display: inline; 
margin: 0; 
padding: 0;
}
#menu ul li {
background-image:url(tab001.gif);
display: inline;  
height: 30px; 
text-align: center;
font-weight: bold; 
padding: 5px 0 0 0; 
margin: 0px; 
list-style-type: none;
width: 116px;
 }
This looks great in IE, but is a dud in Firefox (which usually means I'm doing something completely wrong).

In IE, each LI is 116px wide and 30px tall making the background image display perfectly.

Firefox is ignoring the height and width tags displaying only the top left portion of the image tab.

I've got a feeling that I'm going to need some kind of "block" thingy, but I really only know enough about CSS to be dangerous.

Any ideas?

Brandon