IE-Fehler bei Boxen mit margin?

Status
Nicht offen für weitere Antworten.

geos

Mitglied
Hallo,
ich erstelle gerade ein Layout mit Boxen:
- Seite auf 920px optimiert -> #container umfasst alle Boxen
- #banner
- 7 nebeneinanderliegende Boxen -> alle float:left
- #footer
(CSS-Auszug siehe unten).
Das Layout hatte zuerst funktioniert, dann habe ich ein margin benötigt -> für die Boxen mit float. Danach hat der IEX6 die letzten Boxen umgebrochen. IEX fügt irgenwie genau 20 px nach der 1. Box mit float: left ein -> habe es ausgetestet.
Operea, FF und MOZ zeigen die Seite so an wie ich es geplant habe.
Finde den Fehler bzw. den Grund nicht.

Hier der Link und unten der CSS-Auzug:

http://geos.no.ip.info/lohmer/index02.html

HTML:
/*übergeordneter Container für Seitenbreite auf 920px*/
#container {	width:920px;
				margin:0px auto;
}
/*Banner Kopfzeile*/
#banner{	height: 60px;
			background-color: #A9BFF3;
			padding: 0px;
			margin: 0px 0px 0px 0px;
			text-align:center;
	}
/*linker und rechter Rand */	
#borderLeft, #borderRight { 	float:left;
								height:550px;
								width:10px;
								background-color:#56638F;
								margin:0px;
								padding:0px;
							}
/*linker und rechter Bereich neben Eingang*/

#frontLeft, #frontRight {	float:left;
							height:470px;
							width:180px;
							background-color:#FBFAF7;
							margin:40px 35px 40px 35px;
							padding:0px;
							}
/*Glasfront neben Tür rechts und links*/
#doorLeft, #doorRight {		float:left;
							height:548px;
							width:48px;
							background-color:#FBFAF7;
							border: 1px solid #8C8983;
							margin:0px;
							padding:0px;
							}
/* Eingangstür*/
#door {						float:left;
							width:230px;
							height:470px;
							background-color:#FBFAF7;
							margin:40px 35px 40px 35px;
							padding: 0px;
							}


#footer{ 				clear:both;
						color:#FFFFFF;
						font:bold 9px verdana,helvetica,arial, sans-serif;
						background-color:#1C2536;
						padding:5px 10px 5px 5px;
						margin: 0px;
						text-align:right;
			}

Gruß GeoS
 
Der IE interpretiert margin-Angaben bei floatenden DIVs falsch.

Erweitere das Stylesheet mit folgender CSS-Regel für den IE:

Code:
* html #frontLeft { /* Fehlerkorrektur für IE */
margin: 40px 35px 40px 22px;
}
 
Danke,

klappt!

Noch eine Frage: Wieviel Px werden im IEX vorschoben? Gibt es da eine Regel?
Oder gibt es eine Seite mit detaillierten Infos!

Gruß
Geos
 
In der Regel verdoppelt der IE die Werte bei floatenden DIVs, manchmal sind es aber auch 'zufällige' Werte, die von ihm hinzuaddiert werden, wie z.B. der 'altbekannte' 3px-Abstand.
 
Status
Nicht offen für weitere Antworten.
Zurück