ansaurus

Question

Why are there extra spaces in my css page layout? (css/beginner)

Answer 1

+1 A:

I ran your code and it doesn't look like there's extra space. Here are some things to try:

Make sure you're using a proper DOCTYPE
Make sure the PHP you're using isn't outputting extra whitespace
Use a modern browser (IE7+, FF3.6, Chrome 5, etc.)

The only other thing that could help us diagnose this better is to post the physical output of the PHP (view source, copy and paste).

Hope this helps!

mattbasta 2010-07-09 19:56:01

Thanks for the input. I'm using the latest firefox, got no PHP scripts in yet. The div for main and footer doesn't have a margin separating them, but the header-subheader does? I posted the link for the image. http://www.freeimagehosting.net/uploads/54aaee204f.jpg

ggfan 2010-07-09 19:59:24

You've definitely got PHP in there (the `<??>` tags), so that might be giving you hell. What it looks like to me is that you're inserting an element in your subheader that has a margin. Maybe a `<p>` tag? Again, double check that you've got a valid doctype (`<!DOCTYPE html>` will do) and toss some CSS in along the lines of `#subheader * {margin:0 !important;}`. You should notice a difference.

mattbasta 2010-07-09 23:10:30

Answer 2

+1 A:

#header{
    background-color: aqua;
    padding-top: 2px;
    font-size: 15px;
    padding: 5px;    
}

You have bottom padding on your #header, so this could look like 5px between your #header and #subheader which follows it. Although this should have an aqua background-color as it's strictly part of the #header.

w3d 2010-07-09 19:59:08

Answer 3

+1 A:

When I use this HTML code there is white space

  <body>
  <div id="header">
    header
  </div>
  <div id="subheader">
    sub
  </div>
<div id="wrapper">
  <div id="main">
    lorem ipsum dolor sit amet
  </div>
  <div id="rightnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="leftnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="footer">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
</div>

But when I put headers in wrapper there is no white space

<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="subheader">
    sub
  </div>
  <div id="main">
    lorem ipsum dolor sit amet
  </div>
  <div id="rightnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="leftnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="footer">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
</div>

Maybe that will help

jcubic 2010-07-09 20:01:28

Answer 4

A:

If you have a block elements (h1,h2... ul etc.) in your subheader you should reset their default margins to avoid this 'white space'. Fore example:

<style>
    #subheader ul { margin:0px; padding:0px;}
</style>

Vasil Dakov 2010-07-14 23:06:15

ansaurus

tags:

views:

answers:

Why are there extra spaces in my css page layout? (css/beginner)

related questions