Help with menu system IE vs. Firefox
bbcompent1 | Posted 5:47am 4. January 2010 Server Time |
I'm trying to utilize a menu that I found on dynamic drive for my menu structure. In IE, it looks perfect but in Firefox, it has this offset that is driving me crazy. I have been debugging this for about a day now and I have very little hair left. Can someone help me please? I've truncated the menu so it will fit here. Email me at dbrewerton@gmail.com for the full menu if necessary.
Here is my beta site: http://www.bgtracker.com/evh2com/
The original menu: http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/
My CSS is as follows (-moz is for mozilla compat � !important is supposed to be for IE):
.droplinebar{
overflow: hidden;
}
.droplinebar ul{
-moz-width: 700px;
-moz-margin: 0;
width: 700px !important;
margin-left:7px !important;
width: 700px;
margin: 0;
font: bold 12px Verdana;
background: transparent; /*default background of menu bar*/
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color: white;
-moz-padding: 9px 11px;
padding: 19px 9px 11px 20px !important;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color: white;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: #333333;
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #818284; /*sub menu background color */
visibility: hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: bold 11px Verdana;
padding: 12px;
padding-right: 8px;
margin: 0;
}
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #333333;
}
Here is my menu system:
<head>
<link rel="stylesheet" type="text/css" href="CSS/droplinebar.css" />
<script type="text/javascript" src="script/jquery.min.js"></script>
<script src="script/droplinemenu.js" type="text/javascript"></script>
<script type="text/javascript">
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>
<script src="script/rollover.js" type="text/javascript"></script>
</head>
<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="../default.asp">Home</a></li>
<li><a href="../solar.asp">Solar</a>
<ul>
<li><a href="#"><img src="../images/menu/evactube.jpg" width="25" height="25" border="0"> Evacuated Tubes</a></li>
<li><a href="#"><img src="../images/menu/paneltube.gif" width="25" height="25" border="0"> Panel Tubes</a></li>
<li><a href="#"><img src="../images/menu/solarelec.jpg" width="25" height="25" border="0"> Solar Electric</a></li>
</ul>
</li>
</ul>
</div> |
|
|
