37
I'm going bananas here, somehow below all of my images in my page there is a gap, a margin which isn't there in the code. Even Firebug can't see it but Firefox and Safari are rendering it - EVEN WITHOUT CSS AT ALL!
This never happened to me before...!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Paranoid</title> <link rel="stylesheet" href="includes/style.css" type="text/css" /> </head> <body> <div id="container"> <div id="sidebar"> <img src="images/logo.png" id="logo" /> <ul id="menu"> <li class="menu1">Main</li> <li class="menu1">System</li> <li class="menu1">View</li> <li class="menu1">Policy</li> </ul> <div id="sidebar_bottom"></div> </div> <div id="main_content"></div> <div class="clear"></div> </div> </body> </html> body{ background: #497e9f url(../images/bg.png) repeat-x top; } #container{ width:864px; margin: 8px auto 0 auto; } #sidebar{ /*width:139px;*/ float: left; } #sidebar_bottom{ height:10px; background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat; } #sidebar #logo{ margin-bottom: 2px; } #sidebar #menu{ background: #f2f2f2; border: 0 1px solid #cecece; margin: 0; list-style: none; }