Jump to content

Browser problem with menu


regdude

Recommended Posts

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>

Link to comment
https://forums.phpfreaks.com/topic/200444-browser-problem-with-menu/
Share on other sites

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.