HTML Layer Positioning (DIV Tag Query)

jArgHA · 30-06-2005 12:40pm #1

I've a pretty simple layout for a site - I'm changing a site which contains frames to just use layers for the content layout. please see the attached GIF for an idea of how the site and layers look.

the problem i have is that when I view the site in IE its fine, but in Firefox, there is unwanted spacing (around 10pixels) appearing both above and below layer1 (shown in GIF image). I have tried various properties within the DIV tags for the layers - positioning: relative, and I have a "topmargin" attribute of 0 in the BODY tag. I also added
body { margin-top: 0px; margin-bottom: 0px; } to the attached CSS stylesheet.

A simplified snippet of the source code is shown below. Does anyone know how to get rid of this unwanted vertical space appearing above and below layers when viewed in Firefox?

<body bgcolor="theorangecolor" topmargin="0">

<center>

  <div id="layer1" style="position:relative; width:530px; height:30px; z-index:1;">
    <!--  BANNER IMAGE HERE  -->
  </div>

  <div id="layer2" style="position:relative; width:530px; height:20px; z-index:1;background-color: #993333; layer-background-color: #993333; border: 1px none #000000;">
    <!--  MENU LINKS HERE  -->
  </div>

  <div id="layer3" style="position:relative; width:530px; height:300px; z-index:1; background-color: #7b0000; layer-background-color: #7b0000; border: 1px none #000000;">
    <!--  LAYER3 CONTENT HERE  -->
  </div>

  <div id="layer4" style="position:relative; width:530px; height:1000px; z-index:1; background-color: #f3f3f3; layer-background-color: #f3f3f3; border: 1px none #000000;">

</center>

</body>

colm_c · 30-06-2005 12:56pm

Why are you using 'layers'?

Wouldn't be simplier to not use any relative positioning? because <div> tags will drop to the next line anyway...

For removing the gap in firefox try adding these:

body {
padding: 0;
margin: 0;
}

hostyle · 30-06-2005 1:18pm

You only need the * rule, but the below is a better way of doing what you are trying to do, as the <center> tag is deprecated.

<html>
<head>
<style type="text/css">

* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  background: #353D54;
  color: #000000;
  text-align:center;
}

#everything {
  margin: 0 auto;
  background: #FFFFFF;
  width: 530px;
  text-align: left;
}

#layer1 {
  height:30px; 
}

#layer2 {
  height:20px;
  background: #993333;
}

#layer3 {
  height:300px; 
  background: #7b0000; 
}

#layer4 {
  height:1000px;
  background: #f3f3f3; 
}

</style>
</head>

<body>

<div id="everything">
  <div id="layer1">
    <p>banner</p>
  </div>

  <div id="layer2">
    <p>menu</p>
  </div>

  <div id="layer3">
    <p>layer3</p>
  </div>
	
  <div id="layer4">
    <p>layer4</p>
  </div>
</div>

</body>
</html>

jArgHA · 01-07-2005 12:41pm

many thanks for the tips. I didn't realise that <center> tag was deprecated, gotta get myself a good book on CSS2.

thanks again,
jAH

HTML Layer Positioning (DIV Tag Query)

Comments