Header has white spaces!

Forum Moderators: not2easy

Message Too Old, No Replies

Header has white spaces!

Jamier101

11:46 am on Mar 17, 2011 (gmt 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;
}

rocknbil

4:47 pm on Mar 17, 2011 (gmt 0)

Did you try setting margin/padding to 0 on the body?

Fotiman

5:03 pm on Mar 17, 2011 (gmt 0)

I would try using Firebug to inspect the element and see what styles and box layout were being applied.

Jamier101

6:03 pm on Mar 17, 2011 (gmt 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.

Jamier101

6:11 pm on Mar 17, 2011 (gmt 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!