PDA

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?