homepage Welcome to WebmasterWorld Guest from 54.211.73.232
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Extra empty space after <div> that cannot be removed
jj2ii3344



 
Msg#: 4328039 posted 8:12 pm on Jun 19, 2011 (gmt 0)

Hi all, I am relatively new to CSS and came across a problem where there are some empty spaces after a div block that cannot be removed. A section of the code is embedded below. Also some note:

- There is a background image that is used on the entire page
- banner.png is a 1024 by 164 image
- When the below code is used. The following is rendered:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<center>
<table border="10" width="1024" height="100" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/banner.png" style="z-index:1; position:relative; top:40px; left:0px;"></img>
<div style="position:relative; top:-15px; left:0px; background-color:#ffffff; height: 80px;"></div>
<div style="z-index:2; position:relative; top:-115px; left:0px; height: 10px; text-align:center;"><a href="">SHOP LASHES</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
<a href="">TIPS & TECHNIQUES</a>
&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;&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;<a href="">ABOUT ENVY
ME</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<a href="">CONTACT US</a></div>
</td>
</tr>
</table>
</center>

Many thanks!

[edited by: alt131 at 1:59 am (utc) on Jun 20, 2011]
[edit reason] Side Scroll and 404 [/edit]

 

jj2ii3344



 
Msg#: 4328039 posted 8:13 pm on Jun 19, 2011 (gmt 0)

Sorry, link to screen capture is at:
[appwalk.com...]

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4328039 posted 8:56 pm on Jun 19, 2011 (gmt 0)

Help! Nearest passing moderator! My window is not 4000px wide :(

You can eliminate a lot of potential problems by first making sure the document validates. In your case you've got three languages mixed together: XHTML forms such as <link ... />, Transitional tags such as <center> ... and a DTD that says HTML Strict. On top of that, you've got the undefined attribute "height", and no charset declaration.

And, on the CSS side: you've got a stylesheet. Use it. There are times when inline styles are necessary, but it's a last resort.

Now, that plea for moderatorial help was triggered by something that has no place in the html. Sure, you can sometimes deal with simple problems by shoving in a non-breaking space. For example, a single &nbsp; takes up fewer bytes and is faster than {white-space: nowrap} if you only need one of them to lock a whole table column into place. But when you've got mile-long strings of them, they're doing a job that should be done by something else. Here it appears to be horizontal spacing. What happens if the user doesn't have the identical font you do? Same name doesn't always mean identical to the last pixel.

Now, is the "extra space" that you're asking about the white space between the text (which, incidentally, is much too pale for most readers' comfort) and the bottom "copyright" bar? Your html snippet cuts out before we get to this point.

jj2ii3344



 
Msg#: 4328039 posted 9:09 pm on Jun 19, 2011 (gmt 0)

Thank you very much for the detailed response Lucy! I am definitely going to re-read your response and re-work the document.

As for the extra space, I am referring to the bit between the header and the beginning of the main section where the white space is broken up by the background.

Here is the complete html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<center>
<table border="0" width="1024" height="100" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/banner.png" style="z-index:1; position:relative; top:40px; left:0px;"></img>
<div style="position:relative; top:-15px; left:0px; background-color:#ffffff; height: 80px;"></div><div style="z-index:2; position:relative; top:-115px; left:0px; height: 10px; text-align:center;">
<a href="">SHOP LASHES</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">TIPS & TECHNIQUES</a>
&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;&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;
<a href="">ABOUT ENVY ME</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<a href="">CONTACT US</a></div>
</td>
</tr>
</table>
</center><center>
<table border="0" width="1024" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td valign="top" style="border-right: 1px solid #b3b3b3; padding-left: 25px; padding-right: 25px;"><img src="images/aboutenvyme.jpg" align="left">
</td>
<td width="100%" valign="top"><div class="text" style="padding-left: 65px; padding-right: 65px; padding-top: 65px; padding-bottom: 65px;">Brand description brand description brand description brand description brand
descriptionbrand description brand description brand description brand description
brand description brand description brand description brand description
brand description brand description brand description brand description brand
description brand description brand description brand description brand description
brand description brand description brand description</div></td>
</tr>
<tr><td><div style="height: 50px;">&nbsp;</div></td></tr>
</table>
</center>
<center>
<table border="0" width="1024" height="28" cellpadding="0" cellspacing="0" background="images/bannerlower.png">
<tr>
<td width="50%" align="left" valign="middle" style="padding-left: 25px;"><font class="footer">&copy; <i>2011 ME COSMETICS. ALL RIGHTS RESERVED.</i></font></td>
<td width="50%" align="right" valign="middle" style="padding-right: 25px;"><font class="footer">PRIVACY POLICY</font></td>
</tr>
</table>
</center>
</body>
</html>

[edited by: alt131 at 1:58 am (utc) on Jun 20, 2011]
[edit reason] Side Scroll [/edit]

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4328039 posted 11:03 pm on Jun 19, 2011 (gmt 0)

As lucy24 says you need to validate the HTML (eg. "</img>" !) and use your stylesheet.

Avoid "spacers", use CSS instead...
<div style="position:relative; top:-15px; left:0px; background-color:#ffffff; height: 80px;"></div>


You seem to be relying on position:relative quite a bit, which I would have thought is complicating your markup and is probably the underlying cause of the "empty space" you are seeing. Relatively positioned elements don't 'free' the space they would otherwise occupy.

Your banner.png should be a background-image of one of your containers, you can then easily place text on top of it. Ideally, only images that you would call 'content' should be part of the page content ie. in an IMG tag.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved