Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Opera Viewing Problems

    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!

  • #2
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    waiting from expert with sound solution

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How long does this expert take to reply?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •