IE 6/7: Problem bei verschachtelten, gefloateten DIVs -> Unschöner Abstand zw. DIVs

ribery · #1 (**permalink**) 12.11.2008, 15:28

Hallo zusammen,

es ist mal wieder zum Haare raufen mit dem Internet Explorer:

Ich habe in meinem mittleren "mainContent"-DIV einen weiteren DIV "articleTeaser" integriert und darin zwei weitere DIVs "articleTeaserPicture" und "articleTeaserArticleWrapper" mit float: left und float:right ausgerichtet.

Jetzt hat mir aber der IE den "articleTeaserArticleWrapper"-DIV aus mir unerfindlichen Gründen rechts ausgerichtet und ich habe einen unschönen Abstand links zum "articleTeaserPicture"-DIV

Hier der Screenshot:

Hier das CSS-Grundlayout:

HTML-Code:

body  {
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: #FFF;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}
.thrColFixHdr #container { 
	width: 960px; 
             background: #FFFFFF;
	margin: 0 auto;
	text-align: left;
} 
.thrColFixHdr #header { 
	background: #d2e6f2;
	border-top: 0;
	border-right: 1px solid #0079aa;
	border-bottom: 1px solid #0079aa;
	border-left: 1px solid #0079aa;
	padding: 0 10px 0 20px;  
}
.thrColFixHdr #logo { 
	background: #FFF; 
	padding: 20px 10px 20px 20px;}
.thrColFixHdr #menu {
	float: left; 
	width: 150px; 
            padding: 15px 0px 150px 20px;
}
.thrColFixHdr #mainContent { 
	margin: 0;
             padding: 0;}
.thrColFixHdr #footer { 
	padding: 0 10px 0 20px;
}

Und hier das CSS-Layout:

HTML-Code:

.thrColFixHdr #mainContent h1 { 
	padding: 0;
	color:#0079aa;
	font:1.63em/0.9em, "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 0.9em;
	margin-bottom: 0.9em;
}
.thrColFixHdr #mainContent h2 { 
	padding: 0;
	color:#3394bb;
	font:1.5em/1em, "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 1em;
	margin-bottom: 1em;
}
.thrColFixHdr #mainContent #articleTeaser { 
	margin: 0; 
	padding: 0 10px; 
	background: url(../images/home_teaser_back.gif) no-repeat;
	display: inline;
	float:left;
	border: 1px solid #000;
}
.thrColFixHdr #mainContent #articleTeaser .articleTeaserPicture { 
	margin: 0; 
	padding-top: 10px; 
	padding-right: 20px; 
	padding-bottom: 60px; 
	float: left;
	border: 1px solid #000;
}
.thrColFixHdr #mainContent #articleTeaser .articleTeaserArticleWrapper { 
	margin: 0; 
	padding: 0; 
	float: right;
	border: 1px solid #000;
}

Habe schon geprüft, ob ich mit "display: inline" weiterkomme, aber das hat nichts gebracht. Ich kann den Abstand zwar verringern, wenn ich dem "articleTeaserArticleWrapper"-DIV noch einen margin-right mitgebe, aber das kann's ja eigentlich nicht sein oder?

ribery · #2 (**permalink**) 13.11.2008, 08:05

Hat wirklich keiner 'nen heißen Tipp? Oder soll ich noch weitere Infos liefern bzw. etwas besser aufarbeiten?

andir · #3 (**permalink**) 13.11.2008, 11:35

Gibt es Gründe, die gegen eine Verwendung von float:left bei .articleTeaserArticleWrapper sprechen?

Nach deinem Code würde ich erwarten, dass .articleTeaserArticleWrapper sich rechts orientiert. Kenne aber dein HTML dazu nicht

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE Problem bei gefloateten DIVs	stefanw	CSS	10	26.10.2006 11:39
Problem mit verschachtelten Div's	Sombreo	CSS	9	22.07.2004 21:49