Browser problem with menu

[regdude]

Hi!

I used this script: http://javascript-array.com/scripts/simple_drop_down_menu/ to make a menu in a PHPBB2 forum.

From the IE view it is all fine, but from FF/Chrome it goes wrong!

As here:

http://img580.imageshack.us/img580/3213/menub.jpg

So the first is that the menubar background for some reasons goes 2 times bigger and messes up the background, the second thing is that the hover background of a button doesn't seem to cover up all text.

Here is the style:

<style type="text/css">
#topmenu
{	
z-index: 30
}

#topmenu li
{	
list-style: none;
font-size: 11px;  
font-weight: bold; 
color: #EEEEEE;
float:left
}

#topmenu li a
{	
display: block;
font-size: 11px;  
font-weight: bold;
padding: 4px 8px 6px 8px;
width: 60px;
background-image: url(images/cellpic2.gif);
background-repeat: repeat-x;
color: #EEEEEE;
text-decoration: none
}

#topmenu li a:hover
{	
background: #FE9801
}

#topmenu div
{	
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background-image: url(images/cellpic2.gif);
background-repeat: repeat-x;
border: 1px solid #4F4F4F
}

#topmenu div a
{	
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #4F4F4F;
color: #FFFFFF;
font-size: 11px
}

#topmenu div a:hover
{	
background: #FE9801;
color: #FFFFFF
}
</style>

[Hybride]

Comparing the original versus yours, you removed some of the margin/padding resets in some cases (such as the #topmenu, #topmenu li), which would be affecting the code placement.

 

And also, never design for IE first, always FF/Opera/Chrome, then you go back and fix the code for IE. They have much stricter, proper restraints when it comes to designing CSS-wise, and IE often implements the CSS commands differently than the other browsers.