minor problem: css layout

SooTyLaD · 30 Mar 2007 at 09:41

how do

got a small problemo, for once, my layout works in IE (6&7) but not Firefox...

have only just started on the basic design but its already playing up, would someone mind casting their eyes over it?

html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		
		<title>Test</title>
		
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    
  </head>
  
<body>
	
<div id="container">
	
  <div id="thumbs">
  </div>

  <div id="main" class="opaque">
  </div>
  
  <div id="sponsors">
  </div>
  
</div>

<div id="backstrip"></div>

</body>

</html>

css:

Code:

* { padding: 0; margin: 0; border: 0; }

#container { position: relative; width: 840px; margin-left: 120px; background-color: #444; height: 1000px; z-index: 7; }

#thumbs { height: 300px; margin-top: 200px; padding-right: 420px; background-color: #ccc; }

#main { position: absolute; right: 0px; top: 170px; width: 400px; height: 500px; background-color: #000; }

#sponsors { }

#backstrip { position: absolute; top: 200px; left: 0; height: 300px; width: 100%; background-color: #888; z-index: 3; }

/* NAVIGATION CSS */

/* MISC */

.opaque {	opacity: .5; filter: alpha(opacity=50); }

Firefox seems to mess the whole thing up

it is all moved down the page...

weirdly, it fixes if i put a border around #container... but i dont want a border...

i love css put it can be proper wierd sometimes...

SooTyLaD · 1 Apr 2007 at 10:38

anyone have any ideas?

Augmented · 1 Apr 2007 at 11:54

Bit of an odd one that. #container seems to not have a layout property in Fx, and so appears to be inheriting the properties of the nearest positioned element... I think! Could perhaps be related to how Fx is handling the z-indexes and 'stacking' the elements.

Anyhow, the errant bit of code is:

Code:

#thumbs { height: 300px; [COLOR=Yellow]margin-top: 200px;[/COLOR] padding-right: 420px; background-color: #ccc; }

Instead of the margin, you could position: relative/absolute it down by 200px; instead, depending on what works with your content:

Code:

#thumbs { 
position: relative;
top: 200px;
height: 300px; 
padding-right: 420px;
background-color: #ccc; }

minor problem: css layout

SooTyLaD

SooTyLaD

SooTyLaD

SooTyLaD

Augmented

Augmented