3 replies [Last post]
cbit
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-04-04
Posts: 10
Points: 0

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 &amp;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.

cbit
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-04-04
Posts: 10
Points: 0

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.

janim
Offline
Regular
phinland
Last seen: 15 years 33 weeks ago
phinland
Joined: 2004-04-26
Posts: 11
Points: 0

Opera misbehaving?

Adding 'float:left' to #cont fixes it in a more reasonable way I guess. Then both middle divs have a float declaration.

cbit
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-04-04
Posts: 10
Points: 0

Opera misbehaving?

thanks janim, that looks like a more logical solution.