CSS Forum

**angele803** · 03-06-2006, 11:20 PM

I am working on a site for someone and am having a problem with lining the menu up correctly. It looks exactly like I want it to look in IE, but if firefox, there is a gap above the menu. I have uploaded it here: http://www.cushionglide.com/cushionGlide.shtml

Anyone know why there is this gap in firefox? I know my code is a mess, but I would appreciate any help!

Thanks!

CSS:

Code:

/* Layout Stylesheet */

body {
 margin:20px;
 background:#8DA1C0;
 color: #333333;
 text-align:center;
 padding:0;
 }

#outer {
 background-color: #FFFFFF;
 text-align:left;
 border:1px solid #000000;
 width:758px;
 margin:auto;
 }

#hdr {
 height:126px;
 background:#eeeeee;
 background-image: url(images/header.gif);
 background-repeat: no-repeat;
 color: #333333;
 }

 #topMenu {
 float: right;
 }


#bodyblock {
 position:relative;
 background: #ffffff;
 color: #333333;
 width:758px;
 padding:0;
 }

#l-col {
 float:left;
 background:#ffffff;
 color: #333333;
 padding:5px;
 margin: 5px;
 width:155px;
 text-align: center;
 }

#cont {
 width:550px;
 background:#ffffff;
 color: #333333;
 text-align:left;
 margin: 10px;
 padding: 5px;
 border: 2px;
 border-color: #8DA1C0;
 border-style: solid;
 }

#productsTop{
background-image: url(images/products.gif);
background-repeat: no-repeat;
width:155px;
height: 27px;
}

#productsMiddle{
background-image: url(images/productsMiddle.jpg);
width: 155px;
background-repeat: repeat-y;
}

#productsBottom{
background-image: url(images/productsBottom.jpg);
background-repeat: no-repeat;
width:155px;
height:21px;
}

HTML:

Code:

<head>
<title>Cushion Glide</title>
<link rel="stylesheet" type="text/css"
href="layout.css" />
</head>

<body>
<div id="outer">
<div id="hdr" align="center">
<div id="topMenu">
<a href="http://www.cushionglide.com"><img src="images/home.gif" border=0px /></a>
<a href="/contactUs.html"><img src="images/contactUs.gif" border=0px /></a>
<a href="/terms.html"><img src="images/terms.gif" border=0px /></a>
<a href="/viewCart.html"><img src="images/viewCart.jpg" border=0px /></a>
</div>
</div>

<div id="bodyblock" align="right">
<div id="l-col" align="center">
<h4 align="center">
<div id="productsTop"></div>
<div id="productsMiddle">
<!--#include file="productMenu.html" -->
</div>
<div id="productsBottom"></div>
</div>

<div id="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
<br style="clear: both;" />
</div>
</div>

</body>
</html>

**metho** · 03-07-2006, 10:54 AM

When the source is viewed for this page, it's seriously stuffed. Theres two doc declarations and 2 sets of body/html tags. Another problem is with some div elements not including a closing tag.

Clean up your code and the problem may go away. Otherwize I'd be checking for default margins and padding for the elements making up the products menu name. Try applying margin: 0px; padding: 0px to these elements.

**angele803** · 03-07-2006, 04:59 PM

hmm, well I was puzzled for a while with the 2 sets of body/html tags, because it wasnt showing up in my document, but it was showing up in the "ViewSource". I finally figured out where that was coming from. It is coming from my "ssi" for my product menu. I am just learning how to handle server side includes and may need to do some more research on how to format that Product Menu file. Anyway, I messed with the margins and removed the border around the main content and it is looking okay now. Thanks for the help!