Hello, apologies if this has already been covered but i wasn't sure what to search for to find information about the problem.
You can see from the screen grab that opera is introducing an unwanted gap below the 'top' div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Robots" content="NOINDEX" /> <meta http-equiv="PRAGMA" content="NO-CACHE" /><!-- Web Site: www.ssi-developer.net Comments: Copyright 2003 www.ssi-developer.net Licence: Creative Commons - Non-commercial Share-Alike --> <link rel="stylesheet" type="text/css" href="ev-layout.css" /> <link rel="stylesheet" type="text/css" href="2c-hd-ft-fixed-presentation.css" /> </head> <body> <div id="outer"> <div id="hdr" align="center">top</div> <div id="bodyblock" align="right"> <div id="l-col" align="center"> <h4 align="center">Menu</h4> <a href="#">Link</a><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /><br/> <a href="http://www.ssi-developer.net/main/templates/">View more templates.</a> </div> <div id="cont"> <h3 align="center">Two Column Fixed Width with Header &Footer</h3> <p>Test content, Test content.</p> </div> <!-- end of cont div //--> </div> <!-- end of bodyblock div //--> <div id="ftr" align="center">Footer</div> </div> <!-- end of outer div //--> </body> </html>
/* Layout Stylesheet */ body { margin:20px; background:#808080; color: #333333; text-align:center; padding:0; } #outer { text-align:left; width:650px; margin:auto; } #hdr { height:30px; background:#eeeeee; color: #333333; margin:0 0 0 0px; } #bodyblock { position:relative; background: #dcdcdc; color: #333333; width:650px; padding:0; margin:0 0 0 0px; } #l-col { float:left; background:#dcdcdc; color: #333333; width:145px; } #cont { width:495px; background:#ffffff; color: #333333; border:solid #000000; border-width:0 0 0 1px; text-align:left; } #ftr { height:25px; background:#c0c0c0; color: #333333; border:solid black; border-width:1px 0 0 0; margin:0; }
That was the html and stylesheet that i'm using (cannibalised from a css examples site)
I'm still very new to using CSS for layouts (actually this kind of problem is the kind of thing that has put me off CSS design in the past, but i'd really like to get a proper handle on it this time). If anyone could give me any idea why Opera is doing this, and how to avoid it, i'd be most grateful.
Thanks.
Opera misbehaving?
Someone helped me out with this.. It seems that the problem wasn't confined to opera. The solution was to change the bodyblock to position:absolute;.. this removed the unwanted gap.
If anyone could offer an explanation as to why this cured the problem i'd be very grateful to learn why.
Opera misbehaving?
Adding 'float:left' to #cont fixes it in a more reasonable way I guess. Then both middle divs have a float declaration.
Opera misbehaving?
thanks janim, that looks like a more logical solution.