Float und Margin
leisetreter
- css
1 Ingo Turski0 leise
Hallo Leute,
ich habe ein Problem mit Margins im Umgang mit geschachtelten DIVs unter Verwendung von Float.
Der Layer in dem die "gefloatetn" DIVs drin stehen wird im IE einfach unerlaubt breiter (in meinem Beispiel um 10 Pixel).
Habe schon im Forum gesucht und leider keine Lösung gefunden oder sie übersehen.
Was mach ich falsch? Kann mir jemand helfen?
Vielen Dank!
Der Quelltext sieht im Beispiel so aus:
<!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" lang="en" xml:lang="en">
<head>
<title>Floating-Margins on IE?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
.headerTeaser{
margin: 0px 10px 0px 0px;
width:100px;
height:100px;
float:left;
background:#FF00FF;
}
#contentMiddle{
margin:0px 0px 0px 0px;
padding:0px;
width:330px;
height:110px;
text-align:left;
background:#999999;
}
--></style>
</head>
<body>
<div id="contentMiddle">
<div class="headerTeaser">layer 1</div>
<div class="headerTeaser">layer 2</div>
<div class="headerTeaser">layer 3</div>
</div>
</body>
</html>
Hi,
Der Layer in dem die "gefloatetn" DIVs drin stehen wird im IE einfach unerlaubt breiter (in meinem Beispiel um 10 Pixel).
margin: 0px 10px 0px 0px;
aus 10px werden also 20px, doppeltes margin also. Wenn Du das in englisch übersetzt in google eingibst: "double margin bug", dann findest Du prompt die Antwort...
freundliche Grüße
Ingo
Spitzenmässige Antwort und auch schön schnell...
Fetten Dank Dir Ingo!