Random space above image?

**ParrotBoy** · 03-04-2011, 06:13 PM

I'm doing a website for a friend, I've been working on it for a few days now but I've one into one very minor but very annoying problem.
testforcram - Home
Just beneath the header image and between the banner, there is a tiny gap which I can't seem to remove no matter what. I have tried so many different fixes, but none have prevailed (just to point out, I'm only using weebly because my friend doesn't want to pay to host the site properly and it also acts as a good CMS)

Weird thing is it only occurs in Firefox and Chrome, seems to display fine through Internet Explorer (that's a first haha)

Here's my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>%%TITLE%%</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Broadcasting daily in the northeast of England"/>
<style type="text/css">
</style>
<link href="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>

</head>

<body>
<div id="topbg"></div>
<div id="whitespace"></div><div id="nav-wrap"><div id="navigation">
<div id="nav-content">
%%MENU%%
</div>
</div></div>
<div id="whitespace"></div> <div id="header"><div id="headerwrp"><img src="/files/theme/header.jpg" width="1022" height="157" /></div>
<div id="headimg"></div>
<div id="mainwrp">
<div id="content">%%CONTENT%%</div></div>
<div id="footer"><a href="http://parrotdesign.co.uk"><img src="/files/theme/bottom.png" width="196" height="20" border="0"/></a></div>
</div>

<div style='padding: 20px; width:100%; text-align:center;'>%%WEEBLYFOOTER%%</div>
</body>
</html>

And my CSS:

@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0; }

body {
font: 14px Georgia, serif;
color: #000;
background-image: url(background.jpg);
float: inherit;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

}
#navigation {
background-image: url(navbg.jpg);
width:940px;
height:24px;
overflow: hidden;
margin-left: auto;
margin-right: auto;

}

#nav-wrap {

width: 100%;
height:24px;
background-image: url(navbg.jpg);

}
#nav-left {
float:left;
background-color:#12283c;
width:13px;
height:54px;
}
#nav-content ul {
float:left;
width:940px;
height:20px;
padding:0px 0px 0px 0px;
margin-left:20px;
}
#nav-content li {
float:left;
display:inline;
font-family: arial, verdana, sans-serif;
text-align:center;
font-size:14px;
color:#fff;
font-weight:normal;
padding:6px 35px 0px 0px;
margin-top:-2px;
margin-right:3px;
}
#nav-right {
float:left;
background-color:#12283c;
width:13px;
height:54px;
}
#nav-bottom {
background: transparent url(below_nav.gif) no-repeat left top;
width:986px;
height:14px;
margin-left: auto;
margin-right: auto;
}
#navigation a:link {
color:#fff;
font-size:14px;
font-weight:normal;
text-decoration:none;
}
#navigation a:visited {
color:#fff;
font-size:14px;
font-weight:normal;
text-decoration:none;
}
#navigation a:hover {
color:#ccc;
font-size:14px;
font-weight:normal;
text-decoration:none;
}
#active a:link {
color:#ccc;
text-decoration:none;
}
#active a:hover {
color:#ccc;
text-decoration:none;
}
#active a:visited {
color:#ccc;
text-decoration:none;
}
a:link,a:hover,a:visited {
color:#12283c;
font-weight:normal;
text-decoration:underline;
}
#content {
background-color: #fff;
height: auto;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}

#footer {
height: 10px;
width: 197px;
margin-right: auto;
margin-left: auto;
}

#topbg {
height: 15px;
width: 100%;
background-image: url(topbg.jpg);

}

#whitespace {
height: 5px;
width: 100%;
background-color: #FFF;
}

#mainwrp {
width: 1056px;
margin-left:auto;
margin-right:auto;
margin="0";
padding="0";
}

#headerwrp {
width: 1022px;
margin-left:auto;
margin-right:auto;
}

#header {
height: 157px;
width: 100%;
margin-right: auto;
margin-left: auto;
background-image: url(headerbg.jpg);
}

#headimg {
background-image: url(header.png);
width:1056px;
height:196px;
margin-left:auto;
margin-right:auto;

}

If anyone could help fix this it'd be greatly appreciated.

Cheers

**djb** · 03-04-2011, 07:05 PM

I might be stating the obvious but have you tried giving #headerwrp a height of 157 and also setting the margin and padding to 0? If I look at it with Firebug it definitely seems to be #headerwrp making the gap.

**Corrosive** · 03-05-2011, 08:59 AM

Tidying and optimising your HTML might make it easier to debug;

Code:

<div id="topbg"></div>
<div id="whitespace"></div><div id="nav-wrap"><div id="navigation"> 
<div id="nav-content">
%%MENU%%
</div>
</div></div>
<div id="whitespace"></div> <div id="header"><div id="headerwrp"><img src="/files/theme/header.jpg" width="1022" height="157" /></div>
<div id="headimg"></div>

Do you really need all those divs and are you sure that your header image shouldn't be in the div called 'headimg'?

**ParrotBoy** · 03-05-2011, 04:36 PM

Originally Posted by djb

I might be stating the obvious but have you tried giving #headerwrp a height of 157 and also setting the margin and padding to 0? If I look at it with Firebug it definitely seems to be #headerwrp making the gap.

*doy* Setting the height fixed it. Thanks so much! I feel like an idiot haha.

Originally Posted by Corrosive

Tidying and optimising your HTML might make it easier to debug;

Code:

<div id="topbg"></div>
<div id="whitespace"></div><div id="nav-wrap"><div id="navigation"> 
<div id="nav-content">
%%MENU%%
</div>
</div></div>
<div id="whitespace"></div> <div id="header"><div id="headerwrp"><img src="/files/theme/header.jpg" width="1022" height="157" /></div>
<div id="headimg"></div>

Do you really need all those divs and are you sure that your header image shouldn't be in the div called 'headimg'?

Sorry about the messy html, this is only my second website and I need to learn a thing or two. Thanks anyway.

Thread: Random space above image?

LinkBack

Thread Tools

Display

Random space above image?

Similar Threads

Go Forth & Simplify: The Graphic Design of James Random.

Testimonials- Are they worth the space they take up?

Studio Space To Let

500+ Space Brushes for Photoshop

Photoshop Tutorials > How to put one image inside another image

Posting Permissions