Link to home
Start Free TrialLog in
Avatar of cataleptic_state
cataleptic_stateFlag for United Kingdom of Great Britain and Northern Ireland

asked on

strange css error

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
Avatar of LZ1
LZ1
Flag of United States of America image

When dealing with dynamic websites, it's much more helpful and quicker to post a live URL.  
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.
Avatar of cataleptic_state

ASKER

Hi Sorry the site is uploaded to:

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

Please remove the "#"'s
Thanks
SOLUTION
Avatar of Jen0910
Jen0910
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

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

cant really as the dropshadow will need to be in the centre
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.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial