Opera misbehaving?

3 replies [Last post]

Tue, 2004-06-08 13:10

cbit

Offline

newbie

Last seen: 17 years 1 week 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.

Tags:

Beginners CSS Questions

Tue, 2004-06-08 15:35

cbit

Offline

newbie

Last seen: 17 years 1 week ago

Joined: 2004-04-04

Posts: 10

Points: 0

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.

Tue, 2004-06-08 17:18

janim

Offline

Regular

phinland

Last seen: 16 years 50 weeks ago

phinland

Joined: 2004-04-26

Posts: 11

Points: 0