...

View Full Version : Menu shifts content below



scurti130
10-24-2010, 06:20 PM
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


<!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


@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
{

}

meandnet
10-25-2010, 06:50 AM
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.

scurti130
10-25-2010, 02:34 PM
Awesome that fixed the content shift. Now instead of the menu dropping straight down on hover, it opens up to the right. Any ideas?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum