<h1> tag causes Horizontal Spaces Between DIV's

Discussion in 'CSS' started by feeble_fuel, Jun 16, 2008.

0
  1. #1
    Hello,

    I am trying to put header text within my page header DIV and it keeps putting empty padding/spaces between the page header and my navigation bar DIV.

    Of course it works in IE7 but not in FireFox so I figure it's my error. Can someone take a look my code and see what the heck I might be doing wrong?
    I've tried doing this just by defining it as a <p> instead of an <h1> and I get the same problem.

    I'm also a little new to designing a web page with CSS only and could use a basic explanation as to when one would define an #ID versus a .CLASS definition in my CSS?

    Any insight is much appreciated!

    This is my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Whole Athlete</title>
    <style type="text/css">
    body {
    margin: 0; padding-top: 6px;
    text-align: center;
    background-color: #000000;
    }
    #container {
    width: 971px;
    padding: 0;
    margin: 0 auto 0 auto; /* look at mini article on center page 5 if css slicing */
    text-align: left;
    }
    #header {
    height: 103px;
    padding: 0;
    margin: 0;
    background-color: #3366cc;
    background-image:url('assets/graphics/wa_header.jpg');
    }
    #NavBar {
    height: 28px;
    padding: 0;
    margin: 0;
    background-color:#CCCCCC;
    background-image:url('assets/graphics/NavGray.gif');
    }
    #PageHdr {
    height: 55px;
    width: 971px;
    padding: 0;
    background-color: #3366cc;
    background-image:url('assets/graphics/PageHdrBg.jpg');
    background-repeat: no-repeat;
    }

    #PageHdr h1 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 24px;
    margin-left: 24px;
    line-height: 24px;
    color: #000066;
    }

    #Login {
    position: relative;
    left: 867px;
    top: 35px;
    }

    #Content {
    background-image:url('assets/graphics/BodyFadeBg.jpg');
    background-repeat:repeat-y;
    }

    #Sponsors {
    height: 80px;
    background-color: #ffffff;
    }

    #PageBtmBg {
    background-image:url('assets/graphics/PageBtmBg.gif');
    background-repeat:no-repeat;
    height: 7px;
    }
    #Footer {
    background-color: #000000;
    font-size: 10px;
    color: #ffffff;
    text-align:left;
    padding-top:6px;
    }
    </style>
    </head>

    <body>
    <div id="container">
    <div id="header"><img id="Login" src="assets/graphics/login.gif" alt="Whole Athlete Login" /></div>
    <div id="NavBar">&nbsp;</div>
    <div id="PageHdr"><h1>The Whole Athlete approach</h1></div>
    <div id="Content">
    This is a test<br />
    This is a test<br />
    This is a test<br />
    This is a test<br />
    This is a test<br />
    This is a test<br />
    This is a test<br />
    This is a test<br />
    This is a test<br />
    This is a test<br />
    </div>
    <div id="Sponsors"></div>
    <div id="PageBtmBg"></div>
    <div id="Footer">&reg;2008 Whole Athlete all rights reserved.</div>
    </div>
    </body>
    </html>
     
    feeble_fuel, Jun 16, 2008 IP
  2. feeble_fuel

    feeble_fuel Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Anybody? Surely there must be a solution....
     
    feeble_fuel, Jun 17, 2008 IP
  3. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #3
    Yeah, your pagehdr div doesn't have margin assigned to it. So at a guess, your h1 (or p) is using the default margins (and the margin-left you set in the h1). Try sticking margin: 0; in.
     
    iamben, Jun 20, 2008 IP
  4. feeble_fuel

    feeble_fuel Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thank you! That did the trick!

    I appreciate the response and help.

    Cheers!
     
    feeble_fuel, Jun 20, 2008 IP
  5. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #5
    Pleasure :)
     
    iamben, Jun 20, 2008 IP