strange css error

cataleptic_state
cataleptic_state used Ask the Experts™
on
Hi,
I am getting a strange extra white space in my html from the css code I have created.

I am using z-indexes to overlap logos on the main banner.
I need the z-indexed items fixed to the bannerHolder container.

But the problem is with mainContentHolder below it, there is a white space then the footer appears.

I have attached the files
 index.php
 lunchbox-birmingham.css
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
When dealing with dynamic websites, it's much more helpful and quicker to post a live URL.  
LZ1
Top Expert 2011

Commented:
You may also want to start with a CSS reset. This resets all of the browsers default settings, so that when developing the site your leveling the playing field cross-browser.

http://meyerweb.com/eric/tools/css/reset/

Remember: This goes BEFORE any other CSS declarations.

Author

Commented:
Hi Sorry the site is uploaded to:

hxxp://www.lun##chbox##wes##tbro#m.com/##prev###iew/

Please remove the "#"'s
Thanks
Commented:
After a quick look at your code, Is there a reason you are using absolute positioning instead of relative/floats for such a large amount of content? If you were using floats the top section should expand dynamicaly with it's contents, and the bottom section will begin at the end of the container above, not drop so far below. I'm also seeing some negative positioning which can also cause issues. Use this quick fix right below the absolute positioned container (or create one):  
<div style="clear:both;"></div>

Open in new window

, or remove it all together. Absolute positioning should really only be used for elements inside a div relatively positioned to make sure the floats dont get 'killed.' I'd get rid of as much absolute positioning as you can, especially for your "contentHolder" div.
LZ1
Top Expert 2011

Commented:
How does this look to you?

I would definitely agree with Jen0910 and after looking at your code, this is the way to go.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style> 
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#viewport {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/dropshadow.png);
/*background-repeat: repeat-x;*/
height: 100%;
width: 1027px;
margin-right: auto;
margin-left: auto;
}
#contentHolder {
height: 100%;
width: 996px;
margin-right: auto;
margin-left: auto;
background:url(http://www.lunchboxwestbrom.com/preview/images/banner1.png) no-repeat top center;
}
#contentHolder2 {
height: 100%;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.topHeader {
height: 68px;
width: 995px;
position:relative;
z-index: 2;
margin-left:2px;
}
.bannerHolder {
height: 284px;
width: 995px;
position:relative;
z-index: 1;
margin-left:2px;
}
.bannerHolder .halalLogo{position:absolute;right:213px;top:117px;}
.LogoHolder {
height: 106px;
width: 408px;
position:relative;
z-index: 3;
margin-left:95px;
/* margin-top:48px;*/
}
.naviBG {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/navBG.jpg);
background-repeat: repeat-x;
height: 37px;
width: 980px;
position:relative;
z-index: 4;
margin-left:2px;
/* margin-top:408px;*/
padding-top:15px;
padding-left:15px;
}
.naviBG a {
text-decoration:none;
color:#FFFFFF;
font-size:19px;
}
.naviBG a:hover {
text-decoration:underline;
color:#FFFFFF;
font-size:19px;
}
.pipe {
color:#FFFFFF;
font-size:19px;
}
.halalLogoHolder {
height: 169px;
width: 187px;
position:relative;
}
.GreenBar {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/GreenBar.jpg);
background-repeat: repeat-x;
height: 9px;
width: 995px;
/* margin-top:458px;*/
margin-left:2px;
position:relative;
z-index: 7;
}
.mainContentHolder {
background-color: #e9b000;
background-image: url(http://www.lunchboxwestbrom.com/preview/images/ContentBG.jpg);
background-repeat: no-repeat;
background-position: left top;
height:auto;
/*margin-top:458px;*/
width:955px;
margin-left:18px;
padding:20px;
position:relative;
float:left;
}
p {
line-height:1em;
font-size:18px;
}
.ColumnLeft {
float: left;
width: 60%;
position: relative;
height:100%;
}
.ColumnRight {
float: right;
width: 30%;
position: relative;
height:100%;
}
.FooterBG {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/footerBG.jpg);
background-repeat: repeat-x;
width: 965px;
height:73px;
margin-left:18px;
padding:15px;
clear:both;
float:left;
}
.FooterBG a {
text-decoration:none;
color:#FFFFFF;
font-size:14px;
}
.FooterBG a:hover {
text-decoration:underline;
color:#FFFFFF;
font-size:14px;
}
.pipe2 {
color:#FFFFFF;
font-size:14px;
}
</style>
</head>

<body>
<div id="viewport">
  <div id="contentHolder">
<div class="topHeader"> <img src="http://www.lunchboxwestbrom.com/preview/images/topBarSignUp.png" alt="" /> </div>
<div class="LogoHolder"> <a href="index.php"><img src="http://www.lunchboxwestbrom.com/preview/images/lunchbox-logo.png" alt="" border="0" /></a> </div>    
<div class="bannerHolder"> <img src="http://www.lunchboxwestbrom.com/preview/images/HalalLogo.png" class="halalLogo" alt="" /> </div>



<div class="naviBG"> <a href="index.php">Home</a>  <span class="pipe">|</span>  <a href="about.php">About</a>  <span class="pipe">|</span>  <a href="menu.php">Menu</a>  <span class="pipe">|</span>  <a href="buffet.php">Buffet</a>  <span class="pipe">|</span>  <a href="contact.php">Contact</a> </div>
    
<div class="GreenBar"> </div>


</div>

  <div class="mainContentHolder"> 
    <div class="ColumnLeft"> 
    <img src="http://www.lunchboxwestbrom.com/preview/images/welcomeHeading.png" alt="" />
    <p>
    If you're looking to order food that is great tasting and great value then you've come to the right place.</p>
<br />
<p>
We are an independent sandwich bar based on West Bromwich High Street. We pride ourselves on good good honest food and the freshest ingredients.    </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="http://www.lunchboxwestbrom.com/preview/images/call-lunchbox-order.png" alt="" width="508" height="179" /></p>
    </div>
    
    <div class="ColumnRight"> <img src="http://www.lunchboxwestbrom.com/preview/images/SideMenu1.png" alt="" /></div>
    <div style="clear:both"> </div>
  </div>


  
<div class="FooterBG">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="49%">&nbsp;</td>
      <td width="18%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
    </tr>
    <tr>
      <td><p>Lunch Box © 2011</p>
        <p><a href="index.php">Home</a>  <span class="pipe2">|</span>  <a href="about.php">About</a>  <span class="pipe2">|</span>  <a href="menu.php">Menu</a>  <span class="pipe2">|</span>  <a href="buffet.php">Buffet</a>  <span class="pipe2">|</span>  <a href="contact.php">Contact</a>  <span class="pipe2">|</span>  <a href="terms.php">Terms &amp; Conditions</a></p></td>
      <td>&nbsp;</td>
      <td><img src="images/logosFooter.png" alt="" width="321" height="46" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div> 
</div>
    
</body>
</html>

Open in new window

Author

Commented:
Hi,
Thanks, I did remove the Absolutes, but i didnt upload them to the server but I still had the problem.
LZ1's solution worked better but the surrounding dropshadow only goes down half the page.

Usually when put something like this together I never have a problem (I never have the logos and content z-indexed)
LZ1
Top Expert 2011

Commented:
In this case, I would just put it on the body:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style> 
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: url(http://www.lunchboxwestbrom.com/preview/images/dropshadow.png) repeat-y center center;
}
#viewport {
height: 100%;
width: 1027px;
margin-right: auto;
margin-left: auto;
}
#contentHolder {
height: 100%;
width: 996px;
margin-right: auto;
margin-left: auto;
background:url(http://www.lunchboxwestbrom.com/preview/images/banner1.png) no-repeat top center;
}
#contentHolder2 {
height: 100%;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.topHeader {
height: 68px;
width: 995px;
position:relative;
z-index: 2;
margin-left:2px;
}
.bannerHolder {
height: 284px;
width: 995px;
position:relative;
z-index: 1;
margin-left:2px;
}
.bannerHolder .halalLogo{position:absolute;right:213px;top:117px;}
.LogoHolder {
height: 106px;
width: 408px;
position:relative;
z-index: 3;
margin-left:95px;
/* margin-top:48px;*/
}
.naviBG {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/navBG.jpg);
background-repeat: repeat-x;
height: 37px;
width: 980px;
position:relative;
z-index: 4;
margin-left:2px;
/* margin-top:408px;*/
padding-top:15px;
padding-left:15px;
}
.naviBG a {
text-decoration:none;
color:#FFFFFF;
font-size:19px;
}
.naviBG a:hover {
text-decoration:underline;
color:#FFFFFF;
font-size:19px;
}
.pipe {
color:#FFFFFF;
font-size:19px;
}
.halalLogoHolder {
height: 169px;
width: 187px;
position:relative;
}
.GreenBar {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/GreenBar.jpg);
background-repeat: repeat-x;
height: 9px;
width: 995px;
/* margin-top:458px;*/
margin-left:2px;
position:relative;
z-index: 7;
}
.mainContentHolder {
background-color: #e9b000;
background-image: url(http://www.lunchboxwestbrom.com/preview/images/ContentBG.jpg);
background-repeat: no-repeat;
background-position: left top;
height:auto;
/*margin-top:458px;*/
width:955px;
margin-left:18px;
padding:20px;
position:relative;
float:left;
}
p {
line-height:1em;
font-size:18px;
}
.ColumnLeft {
float: left;
width: 60%;
position: relative;
height:100%;
}
.ColumnRight {
float: right;
width: 30%;
position: relative;
height:100%;
}
.FooterBG {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/footerBG.jpg);
background-repeat: repeat-x;
width: 965px;
height:73px;
margin-left:18px;
padding:15px;
clear:both;
float:left;
}
.FooterBG a {
text-decoration:none;
color:#FFFFFF;
font-size:14px;
}
.FooterBG a:hover {
text-decoration:underline;
color:#FFFFFF;
font-size:14px;
}
.pipe2 {
color:#FFFFFF;
font-size:14px;
}
</style>
</head>

<body>
<div id="viewport">
  <div id="contentHolder">
<div class="topHeader"> <img src="http://www.lunchboxwestbrom.com/preview/images/topBarSignUp.png" alt="" /> </div>
<div class="LogoHolder"> <a href="index.php"><img src="http://www.lunchboxwestbrom.com/preview/images/lunchbox-logo.png" alt="" border="0" /></a> </div>    
<div class="bannerHolder"> <img src="http://www.lunchboxwestbrom.com/preview/images/HalalLogo.png" class="halalLogo" alt="" /> </div>



<div class="naviBG"> <a href="index.php">Home</a>  <span class="pipe">|</span>  <a href="about.php">About</a>  <span class="pipe">|</span>  <a href="menu.php">Menu</a>  <span class="pipe">|</span>  <a href="buffet.php">Buffet</a>  <span class="pipe">|</span>  <a href="contact.php">Contact</a> </div>
    
<div class="GreenBar"> </div>


</div>

  <div class="mainContentHolder"> 
    <div class="ColumnLeft"> 
    <img src="http://www.lunchboxwestbrom.com/preview/images/welcomeHeading.png" alt="" />
    <p>
    If you're looking to order food that is great tasting and great value then you've come to the right place.</p>
<br />
<p>
We are an independent sandwich bar based on West Bromwich High Street. We pride ourselves on good good honest food and the freshest ingredients.    </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="http://www.lunchboxwestbrom.com/preview/images/call-lunchbox-order.png" alt="" width="508" height="179" /></p>
    </div>
    
    <div class="ColumnRight"> <img src="http://www.lunchboxwestbrom.com/preview/images/SideMenu1.png" alt="" /></div>
    <div style="clear:both"> </div>
  </div>


  
<div class="FooterBG">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="49%">&nbsp;</td>
      <td width="18%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
    </tr>
    <tr>
      <td><p>Lunch Box © 2011</p>
        <p><a href="index.php">Home</a>  <span class="pipe2">|</span>  <a href="about.php">About</a>  <span class="pipe2">|</span>  <a href="menu.php">Menu</a>  <span class="pipe2">|</span>  <a href="buffet.php">Buffet</a>  <span class="pipe2">|</span>  <a href="contact.php">Contact</a>  <span class="pipe2">|</span>  <a href="terms.php">Terms &amp; Conditions</a></p></td>
      <td>&nbsp;</td>
      <td><img src="images/logosFooter.png" alt="" width="321" height="46" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div> 
</div>
    
</body>
</html>

Open in new window

Author

Commented:
cant really as the dropshadow will need to be in the centre
LZ1
Top Expert 2011

Commented:
In the background declaration of the body
 
body {
background: url(http://www.lunchboxwestbrom.com/preview/images/dropshadow.png) repeat-y center center;
}

Open in new window


The center center keeps it centered vertically and horizontally.
Top Expert 2011
Commented:
If it suits your application better, you can keep the background on the viewport, just add a clearing div after the footer like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style> 
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
height:100%;
}
#viewport {
height: 100%;
width: 1027px;
margin-right: auto;
margin-left: auto;
background: url(http://www.lunchboxwestbrom.com/preview/images/dropshadow.png) repeat-y center center;
clear:both;
}
#contentHolder {
height: 100%;
width: 996px;
margin-right: auto;
margin-left: auto;
background:url(http://www.lunchboxwestbrom.com/preview/images/banner1.png) no-repeat top center;
}
#contentHolder2 {
height: 100%;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.topHeader {
height: 68px;
width: 995px;
position:relative;
z-index: 2;
margin-left:2px;
}
.bannerHolder {
height: 284px;
width: 995px;
position:relative;
z-index: 1;
margin-left:2px;
}
.bannerHolder .halalLogo{position:absolute;right:213px;top:117px;}
.LogoHolder {
height: 106px;
width: 408px;
position:relative;
z-index: 3;
margin-left:95px;
/* margin-top:48px;*/
}
.naviBG {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/navBG.jpg);
background-repeat: repeat-x;
height: 37px;
width: 980px;
position:relative;
z-index: 4;
margin-left:2px;
/* margin-top:408px;*/
padding-top:15px;
padding-left:15px;
}
.naviBG a {
text-decoration:none;
color:#FFFFFF;
font-size:19px;
}
.naviBG a:hover {
text-decoration:underline;
color:#FFFFFF;
font-size:19px;
}
.pipe {
color:#FFFFFF;
font-size:19px;
}
.halalLogoHolder {
height: 169px;
width: 187px;
position:relative;
}
.GreenBar {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/GreenBar.jpg);
background-repeat: repeat-x;
height: 9px;
width: 995px;
/* margin-top:458px;*/
margin-left:2px;
position:relative;
z-index: 7;
}
.mainContentHolder {
background-color: #e9b000;
background-image: url(http://www.lunchboxwestbrom.com/preview/images/ContentBG.jpg);
background-repeat: no-repeat;
background-position: left top;
height:auto;
/*margin-top:458px;*/
width:955px;
margin-left:18px;
padding:20px;
position:relative;
float:left;
}
p {
line-height:1em;
font-size:18px;
}
.ColumnLeft {
float: left;
width: 60%;
position: relative;
height:100%;
}
.ColumnRight {
float: right;
width: 30%;
position: relative;
height:100%;
}
.FooterBG {
background-image: url(http://www.lunchboxwestbrom.com/preview/images/footerBG.jpg);
background-repeat: repeat-x;
width: 965px;
height:73px;
margin-left:18px;
padding:15px;
clear:both;
float:left;
}
.FooterBG a {
text-decoration:none;
color:#FFFFFF;
font-size:14px;
}
.FooterBG a:hover {
text-decoration:underline;
color:#FFFFFF;
font-size:14px;
}
.pipe2 {
color:#FFFFFF;
font-size:14px;
}
</style>
</head>

<body>
	<div id="viewport">
		<div id="contentHolder">
		<div class="topHeader"> <img src="http://www.lunchboxwestbrom.com/preview/images/topBarSignUp.png" alt="" /> </div>
		<div class="LogoHolder"> <a href="index.php"><img src="http://www.lunchboxwestbrom.com/preview/images/lunchbox-logo.png" alt="" border="0" /></a> </div>    
		<div class="bannerHolder"> <img src="http://www.lunchboxwestbrom.com/preview/images/HalalLogo.png" class="halalLogo" alt="" /> </div>



		<div class="naviBG"> 
			<a href="index.php">Home</a>  <span class="pipe">|</span>  <a href="about.php">About</a>  <span class="pipe">|</span>  <a href="menu.php">Menu</a>  <span class="pipe">|</span>  <a href="buffet.php">Buffet</a>  <span class="pipe">|</span>  <a href="contact.php">Contact</a> 
		</div>
    
	<div class="GreenBar"> </div>
	
	
</div>

  <div class="mainContentHolder"> 
    <div class="ColumnLeft"> 
    <img src="http://www.lunchboxwestbrom.com/preview/images/welcomeHeading.png" alt="" />
    <p>
    If you're looking to order food that is great tasting and great value then you've come to the right place.</p>
<br />
<p>
We are an independent sandwich bar based on West Bromwich High Street. We pride ourselves on good good honest food and the freshest ingredients.    </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="http://www.lunchboxwestbrom.com/preview/images/call-lunchbox-order.png" alt="" width="508" height="179" /></p>
    </div>
    
    <div class="ColumnRight"> <img src="http://www.lunchboxwestbrom.com/preview/images/SideMenu1.png" alt="" /></div>
    <div style="clear:both"> </div>
  </div>


  
<div class="FooterBG">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="49%">&nbsp;</td>
      <td width="18%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
    </tr>
    <tr>
      <td><p>Lunch Box © 2011</p>
        <p><a href="index.php">Home</a>  <span class="pipe2">|</span>  <a href="about.php">About</a>  <span class="pipe2">|</span>  <a href="menu.php">Menu</a>  <span class="pipe2">|</span>  <a href="buffet.php">Buffet</a>  <span class="pipe2">|</span>  <a href="contact.php">Contact</a>  <span class="pipe2">|</span>  <a href="terms.php">Terms &amp; Conditions</a></p></td>
      <td>&nbsp;</td>
      <td><img src="images/logosFooter.png" alt="" width="321" height="46" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div> 
<div style="clear:both;"></div>

</div>
    
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial