Random space above image?

ParrotBoy

New Member
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
 
Last edited:
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.
 
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'?
 
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.

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.
 
Back
Top