Problem mit Darstellung im IE6.0

Status
Nicht offen für weitere Antworten.

Admi

Erfahrenes Mitglied
Tja, Seite hat Fortschritte gemacht, aber es gibt noch einen Fehler den ich nicht wegbekomme.
Die Seite wird im MFirefox richtig angezeigt. Nur der IE macht Mucken. Er zeigt mir Box 4 (also der untere Abschluss) nicht an. Dafür zeigt er alles gelb, was in der CSS die Farbe von Box3 ist?

Wie krieg ich nun hin, das auch der IE das CSS schnallt und nicht nur der MF.

CSS-Datei:
HTML:
/* CSS Document */
   html, body{
   background-color:#000000;
   color:#000000;
   scrollbar-base-color: #000000;
   scrollbar-track-color: #ffffff;
   scrollbar-face-color: #ffffff;
   scrollbar-highlight-color: #000000;
   scrollbar-3d-light-color: #000000;
   scrollbar-darkshadow-color: #ffffff;
   scrollbar-shadow-color: #000000;
   scrollbar-arrow-color: #000000;
   }
   p { 
   	font: 8pt/11pt georgia;
   	margin-left:10px; 
   	margin-top:10px;
   	text-align:left;
   	}
   h1 {
   	font: 8pt/11pt georgia;
   	text-align:center;
   	font-weight:bold;
   }
   a:link {
   	font: 8pt/11pt georgia;
   	margin-left:15px;
   	text-decoration:none; 
   	color:#FFFFFF;
   	}
   a:visited { 
   	text-decoration:none;
   	color:#FFFFFF;
   	}
   a:hover, a:active {
   	color:#000000;
   }
   #box1{ position:absolute; top:10px; left:10px; width:980px; height:560px; z-index:1; background:red; overflow:visible;}
 #box2{ position:absolute; top:0px; left:0px; width:980px; height:150px; z-index:2; background-image:url(pics/1.jpg); overflow:visible;}
   #box3{ position:absolute; top:150px; left:0px; width:980px; height:410px; z-index:2; background:yellow; overflow:visible;}
   #box4{ position:absolute; bottom:0px; left:0px; width:980px; height:20px; z-index:3; background-image:url(pics/4.jpg);}
 #box5{ position:relative; top:0px; left:0px; width:150px; max-width:150px; height:390px; z-index:3; background-image:url(pics/2.jpg); overflow:visible; float:left;}
 #box6{ position:relative; top:0px; right:0px; width:150px; max-width:150px; height:390px; z-index:3; background-image:url(pics/3.jpg); overflow:visible; float:right;}
 #box7{ position:relative; top:0px; left:0px; width:680px; max-width:680px; height:390px; z-index:3; background:white; overflow:auto; float:left;}

HTML-Datei
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>SSV</title>
   <meta name="language" content="de">
   <link href="styleneu.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
   <div id="box1">
   	<div id="box2"></div>
   	<div id="box3">
   		<div id="box4"></div>
   		<div id="box5">
   			<h1>Menu</h1>
   			<p>
   			<a href="news.htm">News<br></a>
 			<a href="vorsitz.htm">Vorsitz<br></a>
 			<a href="referate.htm">Referate<br></a>
  		    <a href="events.htm">Veranstaltungen<br></a>
  		    <a href="guestbook.htm">G&auml;stebuch<br></a>
 			<a href="kontakt.htm">Kontakt<br></a>
   			</p>
   		</div>
   		<div id="box6">
   			<h1>Zufallsstudent</h1>
   		</div>
   		<div id="box7"></div>
   	</div>
   </div>
   </body>
   </html>
 
Hi,

zunächst würde ich den äussersten Container (box1) relativ positionieren. Damit hast du die
Möglichkeit, die darin enthaltenen Elemente absolut zu seinen Koordinaten anzuordnen.

Alle enthaltenen Elemente würde ich anschliessend absolut positionieren. Da es sich lediglich
um feste Grössenangaben handelt, ist das der bequemste Weg.

Die Ränder um den äussersten Containers habe ich auch durch margin-Angaben im BODY
erzeugt.

Das StyleSheet (ohne Link-, Überschriften und Paragraphenformatierung) habe ich entsprechend
überarbeitet:
Code:
html, body{ margin:0 10px 0 0!important;
            margin: 0 10px 10px 0;
            padding: 0 0 10px 0 !important;
            padding: 0;
            background-color:#000000;
            color:#000000;
            scrollbar-base-color: #000000;
            scrollbar-track-color: #ffffff;
            scrollbar-face-color: #ffffff;
            scrollbar-highlight-color: #000000;
            scrollbar-3d-light-color: #000000;
            scrollbar-darkshadow-color: #ffffff;
            scrollbar-shadow-color: #000000;
            scrollbar-arrow-color: #000000;}

#box1{ position:relative;
       top:10px;
       margin-left: 10px;
       width:980px;
       height:560px;
       z-index:1;
       background:red;
       overflow:visible;}

#box2{ position:absolute;
       top:0px;
       left:0px;
       width:980px;
       height:150px;
       z-index:2;
       background-image:url(pics/1.jpg);
       overflow:visible; }

#box3{ position:absolute;
       top:150px;
       left:0px;
       width:980px;
       height:410px;
       z-index:2;
       background:yellow;
       overflow:visible;}

#box4{ position: absolute;
       bottom: 0;
       left: 0;
       width: 980px;
       height: 20px;
       z-index: 4;
       background-image:url(pics/4.jpg);}

#box5{ position:absolute;
       top:0px;
       left:0px;
       width:150px;
       max-width:150px;
       height:390px;
       z-index:3;
       background-image:url(pics/2.jpg);
       overflow:visible;}

#box6{ position:absolute;
       top:0px;
       right:0px;
       width:150px;
       max-width:150px;
       height:390px;
       z-index:3;
       background-image:url(pics/3.jpg);
       overflow:visible;}

#box7{ position:absolute;
       top:0px;
       left:150px;
       width:680px;
       max-width:680px;
       height:390px;
       z-index:3;
       background:white;
       overflow:auto;}
Wird bei mir im IE, FF und Opera (7.54) korrekt angezeigt.

Ciao
Quaese
 
Omfg...dieses Forum verdient einen Award für fastest answers :)
vielen Dank...ich werde mich dann weiter dem "try and error" Prinzip widmen und meinen Editor mit selfhtml martern :D
 
Status
Nicht offen für weitere Antworten.
Zurück