Log in

View Full Version : <h1> tag causes Horizontal Spaces Between <DIV> in Firefox but not IE7


feeble_fuel
06-19-2008, 09:52 AM
Hello,

I've have spent way, way too much time trying to figure this out have posted on various forums with no responses at all, and just can't find a solution. I'm about to go back to using Tables for this layout.

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 I'm doing something wrong when it doesn't work in FireFox. 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.

Any insight is much appreciated!

Here is a link to the site as it stands. Like I said, it works in IE7 but not in Firefox.
http://www.stickpeopleproductions.com/WholeAthlete/index.html

Here 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('http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/wa_header.jpg');
}
#NavBar {
height: 28px;
padding: 0;
margin: 0;
background-color:#CCCCCC;
background-image:url('http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/NavGray.gif');
}
#PageHdr {
height: 55px;
width: 971px;
padding: 0;
background-color: #3366cc;
background-image:url('http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/PageHdrBg.jpg');
background-repeat: no-repeat;
}

#PageHdr h1 {
padding: 0;
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('http://www.stickpeopleproductions.com/WholeAthlete/assets/graphics/BodyFadeBg.jpg');
background-repeat:repeat-y;
}

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

#PageBtmBg {
background-image:url('http://www.stickpeopleproductions.com/WholeAthlete/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="http://www.stickpeopleproductions.com/WholeAthlete/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>

I appreciate any help on this...
rangana
06-19-2008, 10:05 AM
See if adding the highlighted helps:


#PageHdr h1 {
padding: 0;
margin-top:0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 24px;
margin-left: 24px;
line-height: 24px;
color: #000066;
}
harryknight
06-20-2008, 03:48 PM
Hi there,
I am not sure why you have your styles in your HTML page AND your CSS sheet?:confused:
Medyman
06-20-2008, 04:01 PM
@Harry
The OP doesn't have an external stylesheet. They're declaring all their styles within the HTML <head>. There is nothing wrong with doing this. It's just that it's sometimes neater to move the styles to an external page.

@feeble_fuel
The <h1> tag has some default margins and padding associated with it. Different browsers will treat is differently. As rangana suggested, if you want consisted rendering across browsers, explictly declare how much margin and/or padding you want. If you want everything to be flush (i.e. no margin/padding), use:


margin:0;
padding:0;

It looks like you only want left padding, so perhaps something like this is more appropriate:


margin:0 0 0 24px;
padding:0;

What's the purpose of the line-height declaration? You _probably_ don't need that.
feeble_fuel
06-20-2008, 06:41 PM
Thank you for the suggestions and solution. I added the margins in as suggested and it worked! Thank you!

I had the height in there hoping that would take care of the positioning of the text within the div, but it was useless and have taken it out.

To answer the question of why the css is within my html doc is simply for your convenience in the forum so you can see the css and code that I'm using. It allows you to do a simple copy and paste to your computer to test out without having to extract it from an external style sheet.

When I go to production, I will move it to an external style sheet for the clean look.

Thanks everyone for the help!

Cheers,

Kelly
harryknight
06-21-2008, 09:56 AM
@Harry
The OP doesn't have an external stylesheet. They're declaring all their styles within the HTML <head>. There is nothing wrong with doing this. It's just that it's sometimes neater to move the styles to an external page.

Ooops sorry - I viewed the CSS and have done so again and now see it is embedded sorry about that. *my* confusion!

Harry