Firefox zeigt es richtig an IE6 und 7 nicht

mrno · 30. Oktober 2008

Hi zusammen,
ich habe ein Problem mit meinem Div Layout.
Ich will ein Menü links haben und ein Hauptfenster rechts. Das Klappt auch. Im Firefox wird mir der unten genannte Code richtig angezeigt im IE leider nicht. Soviel ich weiß fehlt dem IE dafür die Width und Height angaben um es korrekt anzuzeigen. Diese kann ich ihm aber leider nicht liefern da ich weiß, daß das Hauptmenü um 20px vom Normalen Menü weg sein soll sowie 20px vom Rechten, Oberen und Unterem Rand. Dies benötige ich leider nachher für meine Darstellung damit meine Seite gut aussieht. Hat einer eine Idee wie ich das lösen kann. Bin am verzweifeln.

HTML:

<html>
<head>
 <link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
 <div id="tttnavigation">
  <div class="tttmenubox" id="tttnavigationBox">
   <ul class="navigationUL">
    <li>0.Item</li>
    <li>1.Item</li> 
    <li>2.Item</li>
    <li>3.Item</li>
   </ul>
  </div>
 </div><div id="tttbody">
 <div id="mainWindow">12</div>
 </div>
</body>
</html>

Code:

*{
 margin:0;
 padding:0;
}

html,body{
 height:100%;
 width:100%;
}

div#tttnavigation,div#tttbody{
 position:absolute;
}

div#tttnavigation{
 bottom:10px;
 top:10px;
 left:10px;
 width:150px;
 background-color:yellow;
}

div#tttbody{
 bottom:10px;
 left:170px;
 right:10px;
 top:10px;
 background-color:blue;
}

Maik · 30. Oktober 2008

Hi,

der IE7 zeigt das Layout richtig an, wenn das Dokument mit dem geeigneten Doctype im standardkonformen Modus übergeben wird.

Der IE6, der die Kombination der angewandten top/bottom- und left/right-Positionierung für ein Element grundsätzlich nicht unterstützt, muß weiterhin im Quirksmodus laufen, um Folgendes anzuwenden:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title> ... </title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/layout_iefix.css" />
<![endif]-->
</head>
<body>
 <div id="tttnavigation">
  <div class="tttmenubox" id="tttnavigationBox">
   <ul class="navigationUL">
    <li>0.Item</li>
    <li>1.Item</li>
    <li>2.Item</li>
    <li>3.Item</li>
   </ul>
  </div>
 </div><div id="tttbody">
 <div id="mainWindow">12</div>
 </div>
</body>
</html>

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mit dem XML-Prolog vor der Doctype-Deklaration wird ausschliesslich der IE6 in den Quirksmodus geschaltet, der IE7 hingegen läuft, wie die übrigen Browser, im Standardsmodus.

Code:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/layout_iefix.css" />
<![endif]-->

Mit Hilfe des Conditional Comments und dem Operator "lt" (= less-than = kleiner als) weisen wir allen Vorgängerversionen des IE7 das Stylesheet layout_iefix.css zu:

Code:

div#tttnavigation {
top:0;
height:100%;
border-top:10px solid #fff;
border-bottom:10px solid #fff;
z-index:2;
}
div#tttbody{
top:0;
left:0;
height:100%;
width:100%;
border-top:10px solid #fff;
border-right:10px solid #fff;
border-bottom:10px solid #fff;
border-left:170px solid #fff;
z-index:1;
}

mfg Maik

Firefox zeigt es richtig an IE6 und 7 nicht

mrno

Erfahrenes Mitglied

Maik

Neue Beiträge