List menu problem (difference IE - FF)

ul list menu difference between Internet Explorer and Firefox

[esco]

Hi guys,

I usually work with list menu's for the sites I develop.
Now I had a site that was made with a crappy typo3 menu.
I had to copy the design and use it with my cms.
So I thought "Hey I just use my list menu, mwuahaha".
But now I have a hover/margin problem. Firefox displays everything correct, but in IE the margin-bottom disappears when I hover over an item that has a submenu (another UL).
The link is: <>
Thanks in advance

[edited by: SuzyUK at 1:08 pm (utc) on Mar. 11, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

[SuzyUK]

Hi esco and Welcome to WebmasterWorld!

sorry about the link thing.. IE does have some problems with lists at timesd (what doesn't it have problems with hehe)

if possible could you isolate a small example of your menu (we don't need all the options) which shows the missing margin and post it here along with the relevant CSS, it may be easier for someone to spot that way

thanks
-Suzy

[esco]

Hi Suzy,
Thanks for your welcome words and your quick response.
A little example of this menu:

<ul id="menue">
<li><a href="">Producten - Modellen</a>
<ul>
<li><a href="#">BMW 1 Serie</a></li>
<li><a href="#">BMW 3 Serie</a></li>
<li><a href="#">BMW 5 Serie</a></li>
<li><a href="#">BMW 6 Serie</a></li>
<li><a href="#">BMW 7 Serie</a></li>
<li><a href="#">BMW X3</a></li>
<li><a href="#">BMW X5</a></li>
<li><a href="#">BMW Z4</a></li>
<li><a href="#">BMW Classics</a></li>
<li><a href="#">Concept Cars</a></li>
</ul>
</li>
<li><a href="">Wheel Selector</a></li>
</ul>

In this example the problem should appear if you hover over "Producten - Modellen" (margin-bottom disappears)
The relevant IE stylesheet:

/**********************************************
List menu
***********************************************/
ul#menue, ul#menue ul
{
list-style-type:none;
padding:0;
margin:0;
font:11px Arial;
z-index:100;
}
ul#menue {
width:242px;
}
ul#menue li
{
margin: 0;
text-align: left;
/*background: #013262;
color:#FFF;*/
text-decoration:none;
line-height:20px;
height:20px;
padding-left:5px;
border:none;
}
ul#menue li:hover {
margin: 0;
text-align: left;
/*background-color: #0352A2;*/
text-decoration:none;
line-height:20px;
height:20px;
padding-left:5px;
border:none;
}
ul#menue li a
{
/*color:#FFF;
background:#013262;*/
text-decoration:none;
display:block;
}
ul#menue li a:hover {
/*background-color: #0352A2;*/
text-decoration:none;
display:block;
}
ul#menue li > ul
{
position:relative;
left:+242px;
top:-25px;
display:none;
}
ul#menue li:hover > ul
{
display:block;
}
ul#menue li ul
{
margin-top:5px;
margin-left:-6px;
/*background: #013262;*/
min-width:100px;
width:auto;
}
ul#menue li ul li {
 width:auto;
margin-bottom:0px;
text-align:left;
padding-left: 10px;
}
ul#menue li ul li:hover {
/*background-color: inherit;*/
padding-left: 10px;
margin-bottom:0px;
}
ul#menue li ul li a
{
/*color:#0352A2;
background:#FFF;*/
text-decoration:none;
display:block;
padding-left:25px;
}
ul#menue li ul li a:hover {
/*background-color: #0352A2;
color: #FFF;*/
}
ul#menue li ul li ul
{
margin-top:5px;
margin-left:-19px;
background: none;
}
ul#menue li ul li ul li{
 width:auto;
text-align:left;
background:none;
margin:0;
}
ul#menue li ul li ul li:first-child {
 width:auto;
text-align:left;
background:none;
margin:0;
}
ul#menue li ul li ul li:hover{
 width:auto;
text-align:left;
background:none;
margin:0;
}
ul#menue li ul li ul li a
{
/*color:#0352A2;
background:#FFF;*/
text-decoration:none;
display:block;
}

Sorry for the massive css code. But I included all available item definitions so the items are not overwritten by other code.
I see I forgot the css for the colors, I will add them in a few moments

[esco]

This is the "blue style"
I have different stylesheets for different categories.

/*
############## LIST MENU ##############
*/
ul#menue li {
background-color: #013262;
color: #FFF;
}
ul#menue li:hover {
background-color: #0352A2;
}
ul#menue li a
{
color:#FFF;
background:#013262;
}
ul#menue li a:hover {
background-color: #0352A2;
}
ul#menue li ul
{
background: #001c37;
}
ul#menue li ul li {
background: #001c37;
}
ul#menue li ul li:hover {
background-color: #001c37;
}
ul#menue li ul li a
{
color:#0352A2;
background:#FFF;
}
ul#menue li ul li a:hover {
background-color: #0352A2;
color: #FFF;
}
/*
########## EINDE LIST MENU ##########
*/

I also set up a page on my dev with this config. Just for test.
Can I link that, Suzy?