CSS menu displaying wrong in Firefox (fine in IE)

If you goto http://www.regentrs.co.uk/test/about/index2.html in IE it looks as it should.

If you goto the same link in Firefox it's displaying wrong.

Anyone know of a fix? I have limited knowledge of CSS

Find the menu CSS below:

.menu2 {
width:433px;
font-size:1.6em;
position:relative;
z-index:100;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu2 ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu2 ul ul {
width:100px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu2 li {
float:right;
width:100px;
position:relative;
}
/* style the links for the top level */
.menu2 a, .menu a:visited {
display:block;
font-size:0.6em;
text-decoration:none;
color:#777777;
width:100px;
height:30px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#e0e0e0 url(corner.gif) top right no-repeat;
padding-left:10px;
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu2 a, * html .menu2 a:visited {
width:100px;
w\idth:100px;
}

/* style the second level background */
.menu2 ul ul a.drop, .menu ul ul a.drop:visited {
background:#d4d8bd url(../../graphics/drop.gif) bottom right no-repeat;

}
/* style the second level hover */
.menu2 ul ul a.drop:hover{
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
.menu2 ul ul :hover > a.drop {
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
.menu2 ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu2 ul ul ul a:hover {
background:#b2ab9b;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu2 ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu2 ul ul ul{
left:150px;
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu2 ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu2 a:hover, .menu ul ul a:hover{
color:#fff;
background:#777777;
}
.menu2 :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#777777;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}

if you could post up a screenshot of it in firefox as i dont currently have access to it. Thanks in advance.

AS IT CURRENTLY IS IN FIREFOX BELOW and HOW IT SHOULD BE IN INTERNET EXPLORER BELOW THAT

looks like a matter of a small css issue. What is the CSS you are using to style the menu?

__________________

Looks like you've got a random <ul>/<li> in there somewhere!

eek but where? Can anyone have a look?

www.regentrs.co.uk/test/style2_about.css

www.regentrs.co.uk/test/about/index2.html

I'll pay :-)

Code: Select all

<div class="menu2">
<li><a href="http://www.regentrs.co.uk/test/">Installation</a></li>
<li><a href="http://www.regentrs.co.uk/test/">Aluminium</a></li>
<li><a href="http://www.regentrs.co.uk/test/">uPVC</a></li>
</div>

is wrong it should be

Code: Select all

<div class="menu2">
<ul>
<li><a href="http://www.regentrs.co.uk/test/">Installation</a></li>
<li><a href="http://www.regentrs.co.uk/test/">Aluminium</a></li>
<li><a href="http://www.regentrs.co.uk/test/">uPVC</a></li>
</ul>
</div>

and

list-style-type:none;

should be in the li not the ul.

The following works in FF. haven't tried in IE but should be fine.

Code: Select all

.menu2 li {
float:right;
width:100px;
padding:0 0 0 12px;
position:relative;
list-style-type:none;
}

__________________

excellent thanks very much for you help

Just food for thought: list-style-type: none; in the <ul> versus the <li> makes no difference as it is inherited. While I don't know about support in all browsers, it would seem safer to place it in the ul instead of the li.

One may think that yes. Fact is in FF in the UL it didn't work in the LI it did so who knows! Maybe it was something else, maybe it was not. I personally have always applied it to the li since the li is the actual element affected and the UL only specifies the list type.

__________________

Hm, that's odd. I'll check into that because I've never put it in the li. I usually remove padding, however, so I may not have noticed it for that reason.