Probleme beim Betrachten einer "div-Seite"

Status
Nicht offen für weitere Antworten.

cinpix

Mitglied
Hallo!
Ich bin beim Arbeiten mit div-Layers auf einen Fehler gestoßen und frage mich ernsthaft, warum dieser auftaucht
Hier der Code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>lalala</title>
 <meta name="description" content="lalalallalala">
 <meta name="author" content="Dieter">
 <meta name="keywords" content="lalalalaa">
 <meta name="generator" content="Ulli Meybohms HTML EDITOR">
 <style type="text/css">
 <!--
 body {
  font-family: Arial;
  font-size: small;
  color: #FFFFFF;
 }
 -->
 </style>
 </head>
 <body link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF">
 <div id="Layer1" style="position:absolute; width:100%; height:10%; left:0px; top:0%; background-color:#000000; z-index:1"></div>
 <div id="Layer2" style="position:absolute; width:100%; height:80%; left:0px; top:10%; background-color:#000000; z-index:2"></div>
 <div id="Layer3" style="position:absolute; width:100%; height:10%; left:0px; top:90%; background-color:#000000; z-index:3"></div>
 
 </body>
 </html>
Im IE ist ein weisser Rand auf der rechten Seite und im Firefox ist zwischen Layer2 und Layer3 ein kleiner weisser Abstand. Ist das auf falsches Codieren zurückzuführen?
Liegts an den Browsern?
pls help
ThX
 
Hallo cinpix,

füge in deinen Stylesheets mal noch folgenden Selektor ein:
Code:
    <style type="text/css">
    <!--
    html, body, div {
    	width: 100%;
    	height: 100%;
    	margin: 0;
    	border: 0;
    	padding: 0;
    }
    body {
    	font-family: Arial, sans-serif;
    	font-size: small;
    	color: #FFF;
    }
    ...
Dieser Selektor löscht initiale margin-, border- und padding-Werte der Browser.

Falls zwischen den DIV-Blöcken immer noch schmale Streifen zu sehen sein sollten (Opera macht im Standardmode manchmal solche Albernheiten), dann kannst du entweder den Hintergrund des BODY genau so einfärben wie ein DIV-Block, so dass es nicht mehr auffällt, oder machst die Höhe des entsprechenden DIV-Blockes einfach 1% größer.
Übrigens kannst du auf die expressive Angabe des z-Index verzichten, wenn du die Struktur der DIV-Blöcke im BODY so beibehältst. Die Blöcke werden automatisch übereinandergelegt, der erstgenannte immer zuunterst.
 
Ok, vielmals dankeschön hela!
Beim IE und Opera taucht dieser Fehler nicht mehr auf, aber im Firefox noch :-S
Hmmm....ärgerlich :-/
Wegen dem z-index: Das habe ich eh gewusst, dass man in meinem Fall auch darauf verzichten kann :-)
 
Eigenartig, bei mir nicht :confused:
Hab's gerade damit noch mal getestet (IE6, Opera 7.54 und Firefox 0.93):
Code:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>lalala</title>
  <style type="text/css">
  <!--
  html, body, div {
  	width: 100%;
  	height: 100%;
  	margin: 0;
  	border: 0;
  	padding: 0;
  }
  body {
  	font-family: Arial, sans-serif;
  	font-size: small;
  	color: #FFF;
  }
  #Layer1 {
  	position: absolute;
  	top: 0%;
  	left: 0px;
  	height: 10%;
  	background-color: #000;
  }
  #Layer2 {
  	position: absolute;
  	top: 10%;
  	left: 0px;
  	height: 81%;
  	background-color: #000;
  }
  #Layer3 {
  	position: absolute;
  	top: 90%;
  	left: 0px;
  	height: 10%;
  	background-color: #000;
  }
  -->
  </style>
  </head>
  <body>
  <div id="Layer1">Hallo</div>
  <div id="Layer2">Hallo</div>
  <div id="Layer3">Hallo</div>
  </body>
  </html>
 
Also die Variante, die du gerade gepostet hast, funktioniert bei mir auf allen 3 Browsern (IE6, Opera, Firefox)!
Echt eigenartig, dass diese bei dir wiederum NICHT funktioniert *verwirrt*
 
Hallo cinpix,
das ist ein Missverständnis: Bei mir funktioniert das, sonst hätte ich es nicht gepostet!
 
Status
Nicht offen für weitere Antworten.
Zurück