# DIV Layer: Im FF übereinander / im IE nebeneinander



## madbutt (25. Juli 2006)

Hallo, ich verzweifle gerade ein wenig...

hier mal mein Template (ich benutze das CMS Redaxo)

"Layer" = Container
"Nav" = Layer für ImageMap (Dummy 1pixel Gif)
"Content" = Layer für den Inhalt

Nun ist mein Problem, das im FF wie gewollt alles übereinander steht und auch funktioniert, aber im IE die Layer "Nav" und "Content" neben dem "Layer" stehen.
Was habe ich übersehen ? Ich such mir schon seit 2h den Wolf.

Danke schonmal !


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><?php echo $this->getValue("name"); ?></title>
</head>
<link rel="stylesheet"
      type="text/css"
      href="./files/style.css">

<body style="margin:20px 0px; padding:0px; text-align:center;">
<div id="layer" style="z-index:1; width:640px; height : 433px; border : 1px solid black;  
   margin : auto; text-align : right; padding : 0px; background-image:url("./files/bg.jpg');">

     <div  id="nav" style="position:absolute; z-index:2; width:640px; height : 433px; 
       border : 1px solid black; "><img src="./files/transparent.gif" width=640px 
       height=433px usemap="#map" border=0>
          <map name="map">
              <area shape="rect" coords="10,224,59,243" href="redaxo://3" />
              <area shape="rect" coords="73,240,129,262" href="redaxo://4" />
              <area shape="rect" coords="24,266,74,285" href="redaxo://5" />
              <area shape="rect" coords="109,268,167,286" href="redaxo://6" />
              <area shape="rect" coords="47,293,106,310" href="redaxo://7" />
              <area shape="rect" coords="113,299,195,317" href="redaxo://8" />
              <area shape="rect" coords="18,325,121,347" href="redaxo://9" />
           </map>
       </div>

       <div id="content" style="position:absolute; z-index:3; width:388px; height : 250px; 
         border : 0px solid black; text-align : right; padding : 0px; margin-left: 220px; 
         margin-top:32px; margin-right:32px; overflow:auto;">
         <?php echo $this->getArticle(); ?>
       </div>
</div>
</body>
</html>
```


----------



## Quaese (25. Juli 2006)

Hi,

positioniere das DIV mit der ID *layer* relativ (position: relative). Den enthaltenen Container
mit dem Bild richtest Du mit *top* und *left* oben links am Elternelement (layer) aus.

```
<div id="layer" style="position: relative; z-index: 1; width: 640px; height: 433px; border: 1px solid black; margin: auto; text-align: right; padding: 0px; background-image: url('./files/bg.jpg');">

	<div  id="nav" style="position:absolute; top: 0; left: 0; z-index:2; width: 640px; height: 433px;  border : 0px solid black;">
	  <img style="display: block;" src="./files/transparent.gif" width="640" height="433" usemap="#map" border="0">
	  <map name="map">
	      <area shape="rect" coords="10,224,59,243" href="redaxo://3" />
	      <area shape="rect" coords="73,240,129,262" href="redaxo://4" />
	      <area shape="rect" coords="24,266,74,285" href="redaxo://5" />
	      <area shape="rect" coords="109,268,167,286" href="redaxo://6" />
	      <area shape="rect" coords="47,293,106,310" href="redaxo://7" />
	      <area shape="rect" coords="113,299,195,317" href="redaxo://8" />
	      <area shape="rect" coords="18,325,121,347" href="redaxo://9" />
	   </map>
	</div>

	<div id="content" style="position:absolute; z-index:3; width:388px; height : 250px;
	 border : 0px solid black; text-align : right; padding : 0px; margin-left: 220px;
	 margin-top:32px; margin-right:32px; overflow:auto;">
	 <!-- <?php echo $this->getArticle(); ?> -->
	</div>
</div>
```
Das Bild selbst habe ich mit *display: block* ausgezeichnet, um einen Spalt zu vermeiden. Ausserdem werden
die Werte in den Attributen *width* und *height* im IMG-Tag ohne Pixelangaben notiert.

Ciao
Quaese


----------

