Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Extra space between header and main content 1

Status
Not open for further replies.
73pixieGirl

73pixieGirl

Programmer
Oct 3, 2006
65
US
Hello...I'm working on a web page, using CSS and XHTML (a newbie), and I can't figure out what is causing there to be a space (2-3px) between my header image (in a div tag), and my main content area (another div tag). I thought it was the image, but I created a new one with the same dimensions and still shows the space. When I rename the image to one that doesn't exist (so it shows the box with the red x), the space goes away, and the borders of my divs are aligned, which before one was 1 or 2px off. Some other things that might be helpful, I'm using IE, and my files reside on my PC (not ready to move them to the server). I'll post my code for you to see, and if you have any comments on how I might better the code I would appreciate it! Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
#welcome
{
background-image: url('images/watermark.gif');
background-repeat: no-repeat;
background-position: center;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

#welcome h1
{
font-family: Arial, Verdana;
font-size: 12pt;
color: #000000;
padding-top:50px;
padding-left:50px;
}

#welcome p
{
font-family: Arial, Verdana;
font-size: 10.5pt;
color: #000000;
padding-left:50px;
padding-right:50px;
}
</style>
</head>

<body>
<div id="header" style="width: 800px;height: 154px">
<img src="images/header2.jpg" alt="This is the header image" />
</div>
<div id="welcome" style="width: 800px;height: 450px">
<h1>Welcome!</h1>
<p>This is where the page content will go.</p>
</div>
<div id="footer" style="width: 800px;">
<img src="images/footer2.jpg" alt="This is the footer image." />
</div>
</body>
</html>
 
Sort by date Sort by votes
You don't have to enclose your img within a div. Try removing the div around your img, and set the width of your image to 800px.

I could be wrong on this, but I believe, by default, there is extra buffer space between div tags.
 
Upvote 0 Downvote
Hi rjoubert...thanks for responding! I removed the div tags, set the width and height of my img tag, and the space is still there. Any other suggestions?
 
Upvote 0 Downvote
Try taking the padding out of your style for "welcome h1"

#welcome h1
{
font-family: Arial, Verdana;
font-size: 12pt;
color: #000000;
[red]padding-top:50px;[/red]
[red]padding-left:50px;[/red]
}
 
Upvote 0 Downvote
Try setting your margins to 0.

#welcome {
margin: 0px;
}

#welcome h1 {
margin: 0px;
}

#welcome p {
margin: 0px;
}

Thanks - Woodson02
 
Upvote 0 Downvote
Hi Woodson02...I saw your thread and tried setting the margins to 0px but the space is still there. It's got to be something silly I'm missing!
 
Upvote 0 Downvote
try:
Code: 
#header
 { width: 800px;
  height: 154px;
  margin: 0px;
  padding: 0px;
  background-image: url('images/header2.jpg');
  border: 1px solid #000000;
}

...
<div id="header"></div>
The border is just to see if that's what you really want - you can remove it when you're happy with the results.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
It worked! Thank you very much! I was about ready to go back to using tables. ;-)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
364
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
892
PeDa
PeDa
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
257
jason.lex
jason.lex
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
307
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top