✔ IE8 Darstellungsproblem z-index?

M

minddavid

Grünschnabel
Ich habe eine Seite erstellt. Eigentlich funktioniert alles, nur mein IE (8) macht Probleme. Am Anfang war nur menu nicht sichtbar. Dann habe ich mehreres probiert. z-index negativ, positiv, ohne, position:... . Kurzum, ich bin verzweifelt.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


  <title>Seite</title>
  <link href="Design.css" rel="stylesheet" type="text/css">

  <style type="text/css">
<!--

-->
  </style>
</head>


<body>

<div id="head">
</div>

<div id="menu">
Menu
</div>

<div id="foot">Mail <a style="color: rgb(255, 255, 255);" href="impressum.html">Impressum</a> <a style="color: rgb(255, 255, 255);" href="sitemap.html">Sitemap</a>
</div>

<div id="left">
<div style="text-align: center;">
</big><br>

</div>


<div style="position: absolute; left: 18px; top: 20px; width: 202px; height: 40px;">
</a></div>
 </div>

<div id="content">

Inhalt

</div>



</body>
</html>

Und hier das Css-file dazu.

Code: 
html {
height:100%; max-height:100%; padding:0;
margin:0; border:0; background:#fff; font-size:76%; font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ }
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {position:absolute;  z-index:-3; overflow:auto; position:absolute; top:200px; bottom:25px; left:245px; right:0; background:#eee;}
* html #content {top:1; left:1; right:30; bottom:1; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; border-top:200px solid #fff; border-bottom:25px solid #fff; border-left:245px solid #fff;}
#content p {padding:10px;}
#head {position:absolute; z-index:-1; margin:0; top:0; left:0; display:block; width:100%; height:200px; background:url(kopfleiste.jpg) #000; background-position:0 0; background-repeat:no-repeat; font-size:4em; overflow:hidden; color:#fff;}
#foot {position:absolute;  z-index:-2; margin:0; bottom:0; left:0; display:block; width:100%; height:25px; font-size:1em; overflow:hidden; text-align:center; background:rgb(170,170,170); color:#fff;}
#left {position:absolute;  z-index:-4; left:0; top:200px; bottom:25px; width:245px; background:url(chimney.jpg) rgb(170,170,170); font-size:1.2em; overflow:auto; background-repeat:no-repeat;}
* html #left {height:100%; top:1; bottom:1; border-top:200px solid #fff; border-bottom:25px solid #fff; color:#fff; text-align:center;}
#menu {position:absolute; z-index:2; margin:0; top:180; left:245; right:0; display:block; right:0; height:20px; width:100%; background:#000; font-size:1.2em; overflow:hidden; color:#fff; a:hover { font-weight:bold; color:white; text-decoration:none; }}
*html #menu {top:1; left:245; right:1; bottom:1; height:100%; max-height:100%; width:100%; overflow:hidden; position:absolute; border-top:180px solid #fff; border-left:0px solid #fff;}
.bold {font-size:1.2em; font-weight:bold;}
dd {display:none;}
 
Als erste Gegenmaßnahme würde ich mal das HTML-Dokument mit einer anderen Doctype-Angabe den standardkonformen Browsern, zu denen auch der IE8 zählt, im standardkonformen Modus übergeben, ansonsten verhält sich der IE8 im derzeitigen "Quirks Mode" wie der IE6 aus dem letzten Jahrhundert, der mit den kombinierten Positionsangaben (top/bottom u. left/right) nichts anzufangen weiß.

So dürfte sich der IE8 dann auch wie seine Konkurrenten Firefox, Opera, Safari & Co. verhalten.

In diesem Fall mußt du dein CSS aber dahingehend korrigieren, die fehlenden Einheitenangaben zu ergänzen.

mfg Maik
 
Maik hat gesagt.:
Als erste Gegenmaßnahme würde ich mal das HTML-Dokument mit einer anderen Doctype-Angabe den standardkonformen Browsern, zu denen auch der IE8 zählt, im standardkonformen Modus übergeben, ansonsten verhält sich der IE8 im derzeitigen "Quirks Mode" wie der IE6 aus dem letzten Jahrhundert, der mit den kombinierten Positionsangaben (top/bottom u. left/right) nichts anzufangen weiß.

So dürfte sich der IE8 dann auch wie seine Konkurrenten Firefox, Opera, Safari & Co. verhalten.

In diesem Fall mußt du dein CSS aber dahingehend korrigieren, die fehlenden Einheitenangaben zu ergänzen.

mfg Maik
Zum Vergrößern anklicken....
Bingoo :-)

ie8.jpg

mfg Maik
 
Ich habe jetzt das doctype durch
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
ersetzt und Einheiten ergänzt, es hat sich aber nichts geändert.
 
Mein css sieht jetzt so aus:
Code: 
html {
height:100%; max-height:100%; padding:0px;
margin:0px; border:0px; background:#fff; font-size:76%; font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ }
body {height:100%; max-height:100%; overflow:hidden; padding:0px; margin:0px; border:0px;}
#content {position:absolute;  z-index:-3; overflow:auto; position:absolute; top:200px; bottom:25px; left:245px; right:0px; background:#eee;}
* html #content {top:1px; left:1px; right:30px; bottom:1px; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; border-top:200px solid #fff; border-bottom:25px solid #fff; border-left:245px solid #fff;}
#content p {padding:10px;}
#head {position:absolute; z-index:-1; margin:0px; top:0px; left:0px; display:block; width:100%; height:200px; background:url(kopfleiste.jpg) #000; background-position:0px 0px; background-repeat:no-repeat; font-size:4em; overflow:hidden; color:#fff;}
#foot {position:absolute;  z-index:-2; margin:0px; bottom:0px; left:0px; display:block; width:100%; height:25px; font-size:1em; overflow:hidden; text-align:center; background:rgb(170,170,170); color:#fff;}
#left {position:absolute;  z-index:-4; left:0px; top:200px; bottom:25px; width:245px; background:url(chimney.jpg) rgb(170,170,170); font-size:1.2em; overflow:auto; background-repeat:no-repeat;}
* html #left {height:100%; top:1px; bottom:1px; border-top:200px solid #fff; border-bottom:25px solid #fff; color:#fff; text-align:center;}
#menu {position:absolute; z-index:2; margin:0px; top:180px; left:245px; right:0px; display:block; right:0px; height:20px; width:100%; background:#000; font-size:1.2em; overflow:hidden; color:#fff; a:hover { font-weight:bold; color:white; text-decoration:none; }}
*html #menu {top:1px; left:245px; right:1px; bottom:1px; height:100%; max-height:100%; width:100%; overflow:hidden; position:absolute; border-top:180px solid #fff; border-left:0px solid #fff;}
.bold {font-size:1.2em; font-weight:bold;}
dd {display:none;}

Hab ich was übersehen?
 
Eigentlich nicht, zur Gegenkontrolle kannst du ja mal dem IE8 meinen Quellcode zeigen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>


  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


  <title>Seite</title>
  <link href="Design.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
html {
height:100%; max-height:100%; padding:0;
margin:0; border:0; background:#fff; font-size:76%; font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ }
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {position:absolute;  z-index:-3; overflow:auto; position:absolute; top:200px; bottom:25px; left:245px; right:0; background:#eee;}
* html #content {top:1px; left:1px; right:30px; bottom:1px; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; border-top:200px solid #fff; border-bottom:25px solid #fff; border-left:245px solid #fff;}
#content p {padding:10px;}
#head {position:absolute; z-index:-1; margin:0; top:0; left:0; display:block; width:100%; height:200px; background:url(kopfleiste.jpg) #000; background-position:0 0; background-repeat:no-repeat; font-size:4em; overflow:hidden; color:#fff;}
#foot {position:absolute;  z-index:-2; margin:0; bottom:0; left:0; display:block; width:100%; height:25px; font-size:1em; overflow:hidden; text-align:center; background:rgb(170,170,170); color:#fff;}
#left {position:absolute;  z-index:-4; left:0; top:200px; bottom:25px; width:245px; background:url(chimney.jpg) rgb(170,170,170); font-size:1.2em; overflow:auto; background-repeat:no-repeat;}
* html #left {height:100%; top:1px; bottom:1px; border-top:200px solid #fff; border-bottom:25px solid #fff; color:#fff; text-align:center;}
#menu {position:absolute; z-index:2; margin:0; top:180px; left:245px; right:0; display:block; right:0; height:20px; width:100%; background:#000; font-size:1.2em; overflow:hidden; color:#fff; a:hover { font-weight:bold; color:white; text-decoration:none; }}
*html #menu {top:1px; left:245px; right:1px; bottom:1px; height:100%; max-height:100%; width:100%; overflow:hidden; position:absolute; border-top:180px solid #fff; border-left:0px solid #fff;}
.bold {font-size:1.2em; font-weight:bold;}
dd {display:none;}
  </style>
</head>


<body>

<div id="head">
</div>

<div id="menu">
Menu
</div>

<div id="foot">Mail <a style="color: rgb(255, 255, 255);" href="impressum.html">Impressum</a> <a style="color: rgb(255, 255, 255);" href="sitemap.html">Sitemap</a>
</div>

<div id="left">
<div style="text-align: center;">
</big><br>

</div>


<div style="position: absolute; left: 18px; top: 20px; width: 202px; height: 40px;">
</a></div>
 </div>

<div id="content">

Inhalt

</div>



</body>
</html>


Vielleicht mußt du ja auch nur seinen Cache leeren, damit er die neue Fassung deiner Dateien lädt.

Achja, wenn ein Eigenschaftswert null beträgt, ist die Angabe der Einheit nicht nötig ;)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück