Avatar of cataleptic_state
cataleptic_state
Flag 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
CSSHTML

Avatar of undefined
Last Comment
LZ1

8/22/2022 - Mon
LZ1

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

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.
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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
SOLUTION
Jen0910

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
LZ1

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

cataleptic_state

ASKER
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

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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
cataleptic_state

ASKER
cant really as the dropshadow will need to be in the centre
LZ1

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
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.