nicht angemeldet
CSS Layout zerschossen >> Internet Explorer
Hallo,
vielleicht könnt Ihr mir ja helfen. Ich habe eine Seite mit CSS gebastelt
und es scheint in allen Browsern zu funktionieren außer im Internet Explorer nicht!
Ich hab absolut keine Ahnung woran´s liegen kann...
Die Seite findet Ihr unter: http://www.pommer.eu/test/index.html
Ich beschreib euch mal den Aufbau anhand der Seite die hinter dem FOTO-Link
hinterlegt ist.
Mal abgesehen von der Navigation spielt sich alles in der zentrierten Box id=site ab.
In dieser Box gibt es auf der linken Seite eine weitere Box namens id=content_photo,
die mit fester Breite am linken Rand der Box id=site kleben soll. Rechts daneben gibt
es die Box id=content die einen <i frame> beinhaltet. Abschließend rechts daneben
befinden sich 8 kleine Boxen namen id=thumb_1, _2, _3 etc. Soweit so gut.
Das Problem ist nun, dass im Internet Explorer (nicht der für Mac) die id=content_photo Box
etwas nach rechts über die id=content Box geschoben wird. Dazu kommt noch, dass die
8 kleinen Boxen nach rechts ganz aus der id=site rausfliegen. aber warum??
Wär superklasse wenn Ihr helfen könntet.
Hier der für die Seite FOTO zustandige CSS Code:
body {
color: black;
background-color: #2A2A2A;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 0px;
text-align: center; /* Zentrierung im Internet Explorer */
margin-top: 100px;
}
div#site {
text-align: left; /* Seiteninhalt wieder links ausrichten */
padding-top: 0px;
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 800px;
height: 400px;
padding: 0px;
border: 0px;
}
html body div#site {
border-color: gray; /* Farbangleichung an den Internet Explorer */
}
/* Content */
div#content {
margin-left: 200px;
width: 550px;
height: 400px;
padding: 0px;
border: 0px;
}
div#content_photo {
text-align: left;
text-decoration: none;
top: 100px;
width: 200px;
height: 400px;
position: absolute;
z-index: 10;
background-color: #00FF00;
}
/* Thumbs */
div#thumb_1 {
margin-left: 552px;
top: 100px;
width: 48px;
height: 48px;
background-color: #2A2A2A;
position: absolute;
z-index: 2;
}
div#thumb_2 {
margin-left: 552px;
top: 150px;
width: 48px;
height: 48px;
background-color: #2A2A2A;
position: absolute;
z-index: 3;
}
div#thumb_3 {
margin-left: 552px;
top: 200px;
width: 48px;
height: 48px;
background-color: #2A2A2A;
position: absolute;
z-index: 4;
}
div#thumb_4 {
margin-left: 552px;
top: 250px;
width: 48px;
height: 48px;
background-color: #2A2A2A;
position: absolute;
z-index: 5;
}
div#thumb_5 {
margin-left: 552px;
top: 300px;
width: 48px;
height: 48px;
background-color: #2A2A2A;
position: absolute;
z-index: 6;
}
div#thumb_6 {
margin-left: 552px;
top: 350px;
width: 48px;
height: 48px;
background-color: #2A2A2A;
position: absolute;
z-index: 7;
}
div#thumb_7 {
margin-left: 552px;
top: 400px;
width: 48px;
height: 48px;
background-color: #2A2A2A;
position: absolute;
z-index: 8;
}
div#thumb_8 {
margin-left: 552px;
top: 450px;
width: 48px;
height: 50px;
background-color: #2A2A2A;
position: absolute;
z-index: 9;
}
body,td,th {
color: #ECECEC;
}
-
Hallo lee,
Die Seite findet Ihr unter: http://www.pommer.eu/test/index.html
ein erster Schritt sollte immer der Gang zu einem Validator sein, z.B. Validome.org
Dort wirst du erfahren, dass deine Seite einen schwerwiegenden Fehler aufweist, so fehlt der/das einleitende <head>-Tag. Oftmals sind Fehldarstellungen nach einer Korrektur verschwunden.
Mit freundlichen Grüßen,
André
