Welcome to WebmasterWorld Guest from 54.158.29.163

Forum Moderators: not2easy

Message Too Old, No Replies

Header has white spaces!

     
11:46 am on Mar 17, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 11, 2010
posts: 131
votes: 0


I've been putting together a page and I've come across and error I can't seem to resolve, when I put the banner into the header everything looks okay but when I view it in a browser I get white spaces either side of the image... any idea's?

index.php
<body>
<div id="wrapper">
<div id="container">
<div id="header"><img src="images/banner.jpg" /></div>
</div>
</div>
</body>


style.css
body {
background-image:url(../images/background.gif);
background-repeat:repeat;
}

#wrapper {
width:80%;
height:auto;
margin:0 auto;
background-color:white;
border:thin solid;
border-color:#999999;
}

#container {
width:auto;
margin:0 auto;
height:auto;
overflow:auto;
}

#header {
width:800px;
height:auto;
margin:0 auto;
text-align:center;
}
4:47 pm on Mar 17, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Did you try setting margin/padding to 0 on the body?
5:03 pm on Mar 17, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4987
votes: 12


I would try using Firebug to inspect the element and see what styles and box layout were being applied.
6:03 pm on Mar 17, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 11, 2010
posts: 131
votes: 0


Unfortunately that didn't resolve the issue, I'm completely lost on this as I've never had the problem before. Everything is telling me that the header div box is wrong but I can't see why.
6:11 pm on Mar 17, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 11, 2010
posts: 131
votes: 0


Solved it! I had the wrapper set to 80% of the browsers width and the header set at 800px therefore it would always be trying to fill in the spaces when a large browser window is opened!