Vertical Menu using Lists

floating issue with netscape

[billyray]

Hi guys,
My vertical menu previews ok in IE.
In netscape 7.0 it is positioned around 40px from left. This has displaced table that is holding menu.
How can I fix problem so that menu works in both browsers?

Thanks

please no URL's

THE HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<ul id="vertnav" style="margin-left:0px;">

<li><a href="../final/index.htm">Home Page</a></li>
<li><a href="../final/wiss.htm">What is Self Storage?</a>
<ul>
<li><a href="../final/wu.htm">What is Self Storage?</a></li>
<li><a href="../final/pg.htm">The Picture Gallery</a></li>
<li><a href="../final/security.htm">Security</a></li>
</ul>
</li>

<li><a href="../final/wu.htm">Why Us?</a></li>

<li><a href="../final/house.htm">Household Storages</a></li>

<li><a href="../final/business.htm">Business Storage</a></li>

<li><a href="../final/boxes.htm">Boxes & Packaging</a></li>

<li><a href="../final/FAQ.htm">FAQs</a>
<ul>
<li><a href="../final/wswbn.htm">What size will be needed?</a></li>
<li><a href="../final/pmt.htm">Packing and Moving Tips</a></li>
</ul>
</li>

<li><a href="../final/agree.htm">The Agreement</a> </li>

<li><a href="">Contact Us</a>
<ul>
<li><a href="../final/contact.htm">Contact Us</a></li>
<li><a href="../final/htfu.htm">How to find us</a></li>
<li><a href="../final/ot.htm">Opening Times</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>

THE CSS

#vertnav{list-style: none;
}

#vertnav ul {
padding:0;
margin:0;
list-style: none;
width:12em;
z-index:99;
overflow:visible;
position:absolute;
background-color:#DFDFDF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

}

#vertnav li {
position: relative;
background-color:#CE0000;
border:solid 1px #CECECE;
width:146px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
display:block;
margin-bottom:10px;

}

#vertnav a {
list-style: none;
text-decoration:none;
display:block;
/*padding:0.1em;
/*margin:0.2em 0 0.2em 0.1em;*/
color: #FFFFFF;
background-color:#CE0000;
width:146px;
/*height:1em;*/
height:100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

}
#vertnav a:hover{

background-color:#0099CC;
color:#FFFFFF;
}

#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{

display:none;
position:absolute;
top:0;
left:147px;

}

#vertnav li:hover ul ul, #vertnav li:hover ul ul ul{
display:none;

}

#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{
display:block;

}

li>ul {
top: auto;
left: auto;

}

/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */

[Span]

Hi,
maybe you've found out already, but lists have default padding too.
Just try to control it:

<ul id="vertnav" style="margin-left:0;padding-left:0;">

[Noisehag]

Yeah, I suggested this to billyray already and he said it didn't work. What operating system are you using bro? It is working fine on mine. I'm using Win XP Pro with Netscape 7 and IE 6.

Also, check your sticky. I sent you an addy to a menu builder that works very well and will save you a ton of time trying to build your own.

[kumarsena]

hey

i could use that addy to that menu builder as well..
:)

thanks