vertical nav border problem

problem displaying bottom borders in IE

[songmaike]

Hi everyone!

I have a small problem that is driving me bonkers. I have a simple vertical navigation on the left side of the page and when I view it in FF it is perfect, but when I view it in IE the sub menu "ul ul" displays incorrectly. The line above the sub menu is gone and the border below is doubled! Here is my css code:

#navigation {
position: absolute;
top: 180px;
left: 0;
width: 160px;
font-family: Verdana;
font-size: 12px;
padding-left: 5px;

}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #6699FF;

}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #6666CC;
border-right: 0px solid #6666CC;
background-color: #FFFFFF;
color: #6666CC;
text-decoration: none;
}
#navigation li a:hover {
background-color: #6666CC;
border-left: 12px solid #6666CC;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #6699FF;
margin:0;

}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #FFFFFF;
color: #6666CC;
}
#navigation ul ul a:hover {
background-color: #6666CC;
color: #FFFFFF;
}

the menu is a simple:

<div id="navigation">
<ul>
<li><a href="index2.php">home</a></li>
<li><a href="putaojiu.php">putaojiu</a></li>
<li><a href="funziona.php">come funziona</a></li>
<li><a href="abbonarsi.php">abbonarti</a></li>
<ul>
<li><a href="modulo.php">il modulo</a></li>
<li><a href="materiali.php">materiale</a></li>
<li><a href="testi.php">i testi</a></li>
</ul>
<li><a href="chisiamo.php">chi siamo</a></li>
<li><a href="contatti.php">contatti</a></li>
</ul>
</div>

any ideas? I know I'm probably overlooking something stupid . . . . help?

Michael

[sldesigns]

I don't know if this is good news or bad news, but on the mac I don't see a line over home in either ie or ff. But there is no doubling in either browser. They look exactly the same.

[songmaike]

Hi sldesigns,

thanks for having a look. Actually there isn't any line above the home link, so you saw it as it should be. The line that disappears is between, "abbonarti" and "il modulo" and the then double line is between "i testi" and "chi siamo" . . . . . thanks again sldesigns.

[songmaike]

I've figured out exactly what is going wrong, but I can't figure out yet how to fix it.

The bottom border of the last li before the sub ul instead of staying where it should in IE it lands on the bottom border of the last li in the sub ul . . . . thus I have one li with no bottom border and another with two.

I can't figure out why though. Do I need a hack here? Anyone out there have an idea?