Hello,
So my page was looking fine in all browsers except for older versions of IE, so I went back and played with the code until it looked fine in Chome FF IE (all of them) however, my main menu and the colored box that are beneath it are in very different positions when you view the page in Opera. I have the menu relatively positioned so it will stay put when you zoom out and it, but that seems to have confused Opera. Any help you could offer would be greatly appreciated.
The link to the page
http://www.edirecthost.com/hhmobileh...are/?preview=1
Here is my code for the menu
Code:
<style>
#all {
position: relative;
margin-bottom: 0px !important;
margin-bottom: 0px;
z-index: 2005;
height: 165px;
margin-left: 1px !important;
}
ul#topnav {
position: relative;
margin: 0;
padding: 0;
float: left;
width: 787px !important;
width: 790px;
list-style: none;
font-size: 1.1em;
margin-top: 141px !important;
padding-top:0px;
margin-top: 0px;
margin-left: 5px !important;
margin-left: 0px;
z-index: 9999;
}
.esbDm {
max-width:980px !important;
min-width:980px;
}
#esbtLogo {
height: 370px !important;
height: auto;
width:980px !important;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative;
z-index: 2;
}
ul#topnav li a {
float: left;
text-indent: -9999px;
height: 63px;
z-index: 2;
}
/*BEGIN OF HOVER*/
ul#topnav li.products:hover a, ul#topnav li.products a.products:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -144px -63px;
width: 238px;
}
ul#topnav a.inner {
background: none !important;
}
/*END OF HOVER*/
ul#topnav a.home {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) 0px 0;
width: 144px;
padding: 0px;
}
ul#topnav a.home:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) 0 -63px;
width: 144px;
}
ul#topnav a.products {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -144px 0px;
width: 238px; height: 62px;
/*Acutally Shows With JScript*/
}
ul#topnav a.products:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -144px -63px;
width: 238px;height: 62px;
/*Acutally Shows With JScript*/
}
ul#topnav a.about {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -383px 0px;
width: 191px;
}
ul#topnav a.about:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -383px -63px;
width: 191px;
}
ul#topnav a.contact {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -574px 0px;
width: 214px;
}
ul#topnav a.contact:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -574px -63px;
width: 214px;
}
a.inner {
background: none;
}
#hamend {
position:relative;
z-index: 2;
margin-left:672px !important;
margin-left:782px;
margin-top: -146px !important;
margin-top: -203px;
width:292px;
height:200px;
}
#banner {
position:relative;
width: 981px !important;
height: 130px;
background-color:#0898ff;
margin-top: -25px !important;
margin-top: -107px;
margin-left: 500px;
margin-left: -22px;
z-index: 1;
padding-left: 0px !important;
}
ul#topnav li .row {clear: both; float: left; width: 500px; margin-bottom: 10px;
position:relative; width: 500px;}
ul#topnav li .sub ul{
list-style: none;
margin: 0; padding: 0;
width: 150px;
float: left;
}
ul#topnav .sub ul li {
width: 100%;
color: #fff;
}
ul#topnav .sub ul li h2 {
padding: 0; margin: 0;
font-size: 1.3em;
font-weight: bold;
}
ul#topnav .sub ul li h2 a {
padding: 5px 0;
background-image: none;
color: #000;
font-family: Arial, Helvetica, sans-serif;
outline: 0;
}
ul#topnav .sub ul li h2 a:hover {
padding: 5px 0;
background-image: none;
color: #000;
font-family: Arial, Helvetica, sans-serif;
text-decoration:underline;
outline: 0;
}
ul#topnav .sub ul li a {
float: none;
text-indent: 0; /*--Reset text indent--*/
height: auto;
background: url();
padding-top:5px;
padding-bottom: 5px;
outline: 0;
display: block;
text-decoration: none;
color: #000;
font-family: Arial, Helvetica, sans-serif;
margin-left: 2px;
font-size: medium;
}
ul#topnav .sub ul li a:hover {
color: #000;
outline: 0;
text-decoration: underline;}
#bottom ul li a.bot {
width: 499px !important;
width: 499px;
position:absolute;
text-align:center;
padding-top:5px !important;
background:#FFFFFF !important;
color:#00F !important;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif !important;
font-weight:bold !important;
padding-left: 1px !important;
margin-left: 0px !important;
}
#bottom ul li a.bot:hover {
background:#B2B2B2 !important;
color:#000 !important;
text-decoration:underline;}
#white {
width: 100%;
height: 1px;
margin-top: 0px !important;
margin-top: -300px;
}
.sub {
position: absolute;
top: 61px; left: 0;
background: #9bbeff;
padding-top: 20px;
width: 500px !important;
padding-bottom: 20px;
display: none;
max-height: 300px;
}
p#sublogo_top {
position:absolute;
margin-left: 330px;
margin-top: 60px;
z-index: 2006;
font-family: "Myriad Web Pro", Arial, sans-serif;
font-size: 2.5em;
width: 325px;
}
p#sublogo_bot {
position:absolute;
margin-left: 495px;
margin-top: 100px;
z-index: 2006;
font-family: "Myriad Web Pro", Arial, sans-serif;
font-size: 2.5em;
width: 200px;
}
p#num {
position:absolute;
margin-left: 550px;
margin-top: 150px;
z-index: 2006;
font-family: "Myriad Web Pro", Arial, sans-serif;
font-size: 1.3em;
color: #FF0000;
width: 220px;
}
div#rulerlin {
margin-top:96px;
}
#hhlogo {
height:208px;
width:325px;
}
</style>
<p id="sublogo_top">Mobile Home Supply</p>
<p id="sublogo_bot">& Hardware</p>
<p id="num">Call Us At: 1-800-758-6541</p>
<div id="hhlogo" style="margin-top:3px;">
<img src="http://p.b5z.net/i/u/10145668/h/H-H_logo.gif" alt="H&H Mobile Home Logo" height="208" width="325">
</div>
<div id="all" style="100%">
<ul id="topnav">
<li style="z-index:2">
<a href="http://www.edirecthost.com/hhmobilehomehardware/home1/" class="home" style="z-index: auto;">Home</a>
</li>
<li class="products" style="z-index:3">
<a href="#" class="products">Products</a>
<div style="opacity: 0; display: none; width: 450px;" class="sub">
<div class="row" style="width: 485px;">
<ul style="padding-left: 15px;">
<li style="width: 150px;"><h2><a href="#" class="inner">Hardware</a></h2></li>
<li style="width: 150px;"><a href="#" class="inner">Doors</a></li>
<li style="width: 150px;"><a href="#" class="inner">Hinges</a></li>
<li style="width: 150px;"><a href="#" class="inner">Fasteners</a></li>
</ul>
<ul style="padding-left: 5px;">
<li style="width: 150px;"><h2><a href="#" class="inner">Cabinet</a></h2></li>
<li style="width: 150px;"><a href="#" class="inner">Knobs</a></li>
<li style="width: 150px;"><a href="#" class="inner">Pulls</a></li>
<li style="width: 150px;"><a href="#" class="inner">Hinges</a></li>
</ul>
<ul style="padding-left: 5px;">
<li style="width: 150px;"><h2><a href="#" class="inner">Lighting</a></h2></li>
<li style="width: 150px;"><a href="#" class="inner">Ceiling Fans</a></li>
<li style="width: 150px;"><a href="#" class="inner">Light Fixtures</a></li>
<li style="width: 150px;"><a href="#" class="inner">Outdoor Lighting</a></li>
</ul>
</div>
<div class="row">
<ul style="padding-left: 15px;">
<li style="width: 150px;"><h2><a href="#" class="inner">Plumbing</a></h2></li>
<li style="width: 150px;"><a href="#" class="inner">Kitchen Faucets</a></li>
<li style="width: 150px;"><a href="#" class="inner">Bath Faucets</a></li>
<li style="width: 150px;"><a href="#" class="inner">Sinks</a></li>
</ul>
<ul style="padding-left: 5px;">
<li style="width: 150px;"><h2><a href="#" class="inner">Electrical</a></h2></li>
<li style="width: 150px;"><a href="#" class="inner">Receptacles</a></li>
<li style="width: 150px;"><a href="#" class="inner">Breakers</a></li>
<li style="width: 150px;"><a href="#" class="inner">Safety Equipment</a></li>
</ul>
<ul>
<li style="width: 150px;"><h2><a href="#" class="inner">Tools</a></h2></li>
<li style="width: 180px;"><h2><a href="#" class="inner">Lawn/Garden</a></h2></li>
<li style="width: 150px;"><h2><a href="#" class="inner">Janitorial</a></h2></li>
</ul>
</div>
<div id="bottom">
<ul style="height: 20px; width:480px; margin-right: -10px;">
<li style="margin: 0pt;" class="row"><a href="http://www.google.com/" class="bot" style="width: 500px;">View All H&H Products!</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="about">About</a>
</li>
<li>
<a href="#" class="contact">Contact Us</a>
</li>
</ul>
<div id="hamend"><img src="http://p.b5z.net/i/u/10145668/i/Hammer_End_Edit.gif" alt="Hammer Claw" height="292" width="162"></div> <div id="banner" style="z-index: 0; margin-bottom: -142px; width: 100%; float:right;"><div id="rulerlin"><img src="http://p.b5z.net/i/u/10145668/h/ruler.png" alt="Ruler Image" height="35" align="bottom" width="981"><div id="white"></div></div>
</div>
</div>
Thank you so much!
Before you post, read our: 
