Forum Moderators: not2easy
Here is my beta site: <snip>
The original menu: [dynamicdrive.com...]
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 style="position:absolute; left: 9px; top: 31px;"> <a href="../community.asp" class="MainHeaderNav" onMouseover="showhint('Connect with your eVANHEE Community and get involved!', this, event, '300px')">Community</a> <a href="../shopping.asp" class="MainHeaderNav" onMouseover="showhint('Browse our line of products to maintain your system', this, event, '300px')">Shopping Tools</a> <a href="../finance.asp" class="MainHeaderNav" onMouseover="showhint('Your system can fit your budget. Ask us how by checking out our easy financing options by contacting us today!', this, event, '300px')">Financial Services</a> <a href="https://my.evanhee.com" class="MainHeaderNav" onMouseover="showhint('Access or sign up for your My eVANHEE Account today!', this, event, '300px')">My Account</a></span></div><div style="position:absolute; left: 545px; top: 28px;">
<table height="33" border=0>
<tr><td height="31" valign="top"><form action="../search/search.asp" method="get" onsubmit="return isSearchTermValid( this );">
<input type="text" name="searchTerm" size="20" maxlength="35" value="">
<input type="submit" name="Submit" value="Search" style="font:Verdana; font-size:10px;">
</form></td>
</tr>
</table></div>
<br>
<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>
<li><a href="../geothermal.asp">Geothermal</a>
<ul>
<li><a href="#"><img src="../images/menu/geoforcedair.jpg" width="25" height="25" border="0"> Forced Air</a></li>
<li><a href="#"><img src="../images/menu/georadiant.jpg" width="25" height="25" border="0"> Radiant Boiler</a></li>
<li><a href="#"><img src="../images/menu/geocombo.jpg" width="25" height="25" border="0"> Combination</a></li>
<li><a href="#"><img src="../images/blank.gif" width="25" height="25" border="0"> Why Geothermal?</a></li>
</ul>
</li>
<li><a href="../wind.asp">Wind</a>
<ul>
<li><a href="#"><img src="../images/menu/windturbine.jpg" width="25" height="25" border="0"> Wind Turbines</a></li>
<li><a href="#"><img src="../images/blank.gif" width="25" height="25" border="0"> Why Wind Power?</a></li>
</ul>
</li>
<li><a href="../hybrid.asp">Hybrid</a></li>
<li><a href="../support.asp"> Support</a>
<ul>
<li><a href="support.asp"><img src="../images/menu/prodsup.jpg" width="25" height="25" border="0"> Product Support</a>
<ul>
<li><a href="support.asp">Protect It</a></li>
<li><a href="support.asp">Use It</a></li>
<li><a href="support.asp">Maintain It</a></li>
</ul>
</li>
<li><a href="support.asp"><img src="../images/menu/ordersup.jpg" width="25" height="25" border="0"> Order Support</a></li>
<li><a href="contact_us.asp"><img src="../images/menu/contactus.jpg" width="25" height="25" border="0"> Contact Us</a></li>
</ul>
</li>
<li><a href="../experience.asp"> Experience</a>
<ul>
<li><a href=""><img src="../images/menu/eneraudit.jpg" width="25" height="25" border="0"> Energy Audits</a></li>
<li><a href=""><img src="../images/menu/deseng.jpg" width="25" height="25" border="0"> Design Engineering</a></li>
<li><a href=""><img src="../images/menu/loopinst.jpg" width="25" height="25" border="0"> Loop Installation</a></li>
<li><a href=""><img src="../images/menu/sysinst.jpg" width="25" height="25" border="0"> System Installation</a></li>
</ul>
</li>
</ul></li>
</div>
--
No URL's please, see TOS [webmasterworld.com]
[edited by: limbo at 2:17 pm (utc) on Jan. 1, 2010]
Welcome to WebmasterWorld :)
First thing to ask, is whether you are using a CSS reset? Worth validating your HTML/CSS too. A misfire in the CSS can often be indicated by layout issues in FF. Lastly ensure you work FF to IE not the other way round. Best to develop sites in a web standards compliant browser and debug the CSS/JS/HTML in IE.
brewerton.getmyip.com
I'm beginning to see that there are some distinct differences with how different browsers can interpret the same line or just ignore them altogether. Thanks :)
