Random space above image?

P

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>
Click to expand...

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;

}

​
Click to expand...

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'?
 
djb said:
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.
Click to expand...

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

Corrosive said:
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'?
Click to expand...

Sorry about the messy html, this is only my second website and I need to learn a thing or two. Thanks anyway.
 
You must log in or register to reply here.
Back
Top