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 !

PHP:

<!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.

HTML:

<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

DIV Layer: Im FF übereinander / im IE nebeneinander

madbutt

Grünschnabel

Quaese

Moderator

Neue Beiträge