Image displayed in <li><ul> tags differently in Firefox

[ajayc]

This is the style sheet that is being used. It displays without any problem in IE but in Firefox there is a big space displayed after the tabs.

ul.tabs
{
margin:0 0 100px;
padding: 0;
list-style: none;
border: none;
}
ul.tabs li
{
display: block;
margin: 0;
padding: 0;
float:left;
}
ul.tabs a
{
display:block;
color:#2A568F;
text-decoration:none;
background: url(../images/tblTabOff.gif) no-repeat;
margin:0;
padding: 3px 22px 3px 45px;
border-right: 1px solid #AAAAAA;
position: relative;
font: bold 11px tahoma;
}
ul.tabs a:hover
{
color: #000000;
text-decoration: none;
background: url(../images/tblTabHglt.gif) no-repeat;
}
ul.tabs a.selected
{
position:relative;
z-index:102;
background: url(../images/tblTabOn.gif) no-repeat;
border-right: 1px solid #777777;
padding: 3px 22px 3px 45px;
margin: 0 4px 0 0;
color:#0C3160;
}

tr.tabsDescription td
{
background:#BFC1D7;
padding-left:10px;
padding-right:10px;
height:22px;
}

This is the page which uses the stylesheets.

<table width='100%' cellpadding=0 cellspacing=0>
<tbody id='AdvancedSearchTab'>
<tr>
<td valign=bottom>
<ul class='tabs'>
<li><a href="javascript:ShowSearchTabs('RegSearch');">&nbsp;Regular Search</a></li><li><a class='selected' style='left: -24px;'>Advanced Search</a></li></ul></td></tr>
<tr class='tabsDescription'>
<td><font size=1>Search for using any of the columns </td>

There is a big space between The tabs and the tab description. But it looks right in IE.

Your help is greatly appreciated!

Ajay

[Robin_reala]

margin:0 0 100px;

I'm not sure what you meant this to be, but it's not right. Margin can take 1 (all), 2 (tb/lr), or 4(t/r/b/l) values. I assume Firefox is assuming you left off the 4th value and assigning 100px margin to the bottom of your list.