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 to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Menu shifts content below

    Ok I'm designing this website and I cant figure out why whenever I hover over a menu item, my content below shifts. This happens in IE and Fire fox. Another problem I am having is just with IE, when I hover a menu item the box of the item gets bigger. I've been playing around and am stumped. Any help is much appreciated.

    Heres the HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>A Plus Powder Coaters - A Grade Above The Rest</title>
    <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    
    <body style="height: 100%">
    
    <div id="layout">
      <div id="header">
        <div id="headerLogo">
           	  <a href="#"><img id="headerLogo" src="images/aplusLogo.png" alt="Logo" /></a>
       	</div>
        <div id="headerQuote">
            	<a href="#"><b>Request a Quote</b></a>
        </div>
        <div id="headerAddress">
           	<p>A Plus Powder Coaters, Inc.<br />1384 Kauffman Ave.<br />Columbiana OH 44408<br />(330) 482-1951&nbsp;♦&nbsp;FAX (330)482-1851</p>
        </div>   
        <div id="headerPci">
           	  <img id="pcologo" src="images/pcilogo.png" alt="pcilogo" /></a>
       	</div>
      </div>
    <div id="mainImage">
           	<img src="images/tempheaderimg.png" name="mainImage" id="mainImage" />
      </div>
      <ul id="menu">
     		<li><a href="index.html">HOME</a></li>
    		<li><a href="#">POWDER</a>
    			<ul>
    				<li><a href="/powder/generalinfo.html">GENERAL INFO</a></li>
    				<li><a href="/powder/capacity.html">CAPACITY</a></li>
    				<li><a href="/powder/substrates.html">SUBSTRATES</a></li>
                    <li><a href="/powder/colors.html">COLORS</a></li>
                    <li><a href="/powder/systems.html">SYSTEMS</a></li>
                    <li><a href="/powder/process.html">PROCESS</a></li>
    		  </ul>
    		</li>
    	<li><a href="#">BLASTING</a>
            	<ul>
               	  	<li><a href="/blasting/generalinfo.html">GENERAL INFO</a></li>
                    <li><a href="/blasting/capacity.html">CAPACITY</a></li>
                    <li><a href="/blasting/systems.html">SYSTEMS</a></li>
        		</ul>
        </li>
      <li><a href="#">QUALITY</a>
            	<ul>
               	  <li><a href="standards.html">STANDARDS</a></li>
                    <li><a href="testing.html">TESTING CAPABILITIES</a></li>
                    <li><a href="certifications.html">CERTIFICATIONS</a></li>
       	  </ul>
        </li>
    		<li><a href="gallery.html">GALLERY</a></li>
    		<li><a href="#">ABOUT US</a>
    			<ul>
    				<li><a href="history.html">HISTORY</a></li>
                    <li><a href="mission.html">MISSION</a></li>
                    <li><a href="services.html">SERVICES</a></li>
                    <li><a href="facility.html">FACILITY</a></li>
    		 	</ul>
    		</li>
    		<li><a href="#">CONTACT</a>
    			<ul>
    				<li><a href="directions.html">DIRECTIONS</a></li>
                    <li><a href="quote.html">QUOTE</a></li>
                    <li><a href="phonefax.html">PHONE & FAX</a></li>
    		 	</ul>
    		</li>
      </ul>
       
      <div id="content">
      		  <h2>A Plus Powder Coaters, Inc. offers:</h2>
    				<p><b>√</b> Quality<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>√</b> Service<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>√</b> Selection<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>
                    √</b> Capacity<br />
     				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>√</b> Craftsmanship<br /><br />
                  
    				State-of-the-art Facility<br /><br />
    				Powder Coating and Media Blasting services.</p>
    				<h2>Mission Statement:</h2>
    				<p>A Plus Powder Coaters, Inc. offers a high quality product, due to our commitment to Jesus Christ, and our pledge to be good stewards of all God has blessed us with.</p>
      </div>
      
    </div>
    
    </body>
    </html>
    And here is the CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	background-color: #000;
    	font-family: Arial;
    	font-size: 14px;
    	padding: 0;
    	margin: 0;
    	height: 100%;
    }
    #layout {
    	width: 800px;
    	display: block;
    	background-color: #FFF;
    	margin:auto;
    	margin-top: none;
    	padding: none;
    }
    #header {
    	float: left;
    	display:block;
    	width: 800px;
    	height: 110px;
    	backgroundcolor: #FFF;
    	border-bottom: 5px solid #000;
    }
    #headerLogo {
        margin-left: 10px;
        position: relative;
        top: 5px;
        float: left;
    }
    #headerAddress {
    	position: relative;
    	text-align:center;
    	left: 0px;
    	height:auto;
    	width:auto;
    	float: left;
    	margin-top:auto;
    	top: -5px;
    	font: 14px Arial, Geneva, sans-serif;
    }
    #headerQuote {
    	width:250px;
    	height: 20px;
    	position: relative;
        right: 10px;
    	float: right;
    	top: 0px;
    	padding-top:3px;
    	text-align:center;
    	font: 14px Arial, Geneva, sans-serif;
    	color: #FFF;
    	background-image:url(images/bgquote.png);
    }
    #headerQuote a:link, a:visited
    {
    	color:#FFF;
    	text-decoration:none;
    }
    #headerPci
    {
    	float:right;
    	top:3px;
    	right: 100px;
    	position:relative;
    	width:80px;
    	height:80px;
    }
    #mainImage {
    	margin-top: 0px;
    	float:left;
    	height: 215px;
    	width: 800px;
    }
    #menu, #menu ul
    {
    	padding: 0;
    	list-style: none;
    	width: 800px;
    	height: 30px;
    }
    #menu ul 
    {
    	padding: 0;
    	margin: 0;
    	list-style:none;
    	display:none;
    	position:absolute;
    }
    #menu li
    {
    	position: relative;
    	float: left;
    	border: 1px solid #595959;
    	width: 112.25px;
    	font: 12px Arial, Geneva, sans-serif;
    	background-color:#000;
    }
    #menu a:link, #menu a:visited 
    {
    	margin-left:0;
    	display: block;
    	text-decoration:none;
    	padding: 0.5em;
    	padding-left:0em;
    	text-align:center;
    	color: #FFF;
    	width: 112.25px;
    }
    #menu :first-child 
    {
    	/*border-left: 1px solid #CCC;*/
    }
    #menu li:hover ul 
    {
    	display:inline;
    	top: 30px;
    	position:relative;
    }
    #menu li:hover ul li
    {
    	width:150px;
    	height:30;
    }
    #menu li:hover  a
    {
    	color:#FFF;
    	width:auto;
    	margin-left:0;
    }
    #menu li:hover 
    {
    	background-color:#F00;	
    }
    #content 
    {
    	position:inherit;
    	float:none;
    	width: 440px; 
    	padding: 10px 20px 20px 45px;
     	display: block;
     	margin: 10px 10px 0px 0px;
    }
    #content h2 
    {
    	font-style:italic;
    	font-size:20px;
    }
    #content p
    {
    	
    }

  • #2
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    In your css file try to change this present code

    #menu li:hover ul
    {
    display:inline;
    top: 30px;
    position:relative;
    }

    as

    #menu li:hover ul
    {
    display:inline;
    top: 30px;
    position:absolute;
    }

    Your contents wont relatively.

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Awesome that fixed the content shift. Now instead of the menu dropping straight down on hover, it opens up to the right. Any ideas?


  •  

    Posting Permissions

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