I'm looking to add a banner to the top of a site that is flush with the top of the screen, and it's just not happening!
I have a container div in which I have other divs called "banner" "left", "right" and "footer", they should speak for themselves. I've given the banner div a background image which is 83px high so I've said #banner { height: 83px; } (among other styles) and using a great technique I've found, I've given alll divs a different coloour background so I can see where problems arre happening.
But I still have a space at the top of the screen before the banner (i.e. it's not flush with the top of screen) and have had margin and padding set at 0 from the start and also 0 0 0 0 when attempting to find the cause of this error.
Using Firefox's web developer toolbar just now I've deleted every other style out of the CSS and it remains.
Here's the code that's left:
html, body { margin: 0 0 0 ; background: #9baabf; text-align: center; font-size: 100.01%; }
span.aaavanish { display: none }
a:link, a:visited { color: #555; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
/******************** General Div Positioning ********************/
#container { width: 100%; background-color: #f0f; overflow: hidden; margin-top: 0; padding-top: 0;}
#banner { height: 83px; background: #fff url('../images/image001.png') no-repeat; color:#fff; border: 0px none; margin: 0 0 0 0; }
#menu { position: absolute; top: 100px; left: 0px; width: 200px; border: 0px none; background: #fff000; margin: 0px; padding: 0px; height: 400px; }
#content { margin: 0 20px 20px 220px; border: 0px none; background: #00ff00; padding: 0; position: relative; }
#footer { background-color: #9baabf; width: 100%; margin: 0 auto; clear: both; }
<body>
<div id="container">
<div id="banner">
<!--webbot bot="Include" U-Include="includes/banner.asp" TAG="BODY" -->
</div><!-- end banner -->
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.</p>
</div><!-- end content -->
<div id="menu">
<!--webbot bot="Include" U-Include="includes/menu.asp" TAG="BODY" -->
</div><!-- end left navigation -->
</div><!-- end container div -->
<div id="footer">
<!--webbot bot="Include" U-Include="includes/footer.asp" TAG="BODY" -->
</div><!-- end footer div -->
</body>
Any help greatly appreciated!
Thanks
Nicole
