✔ Pixel Abstand Problem mit Float beim IE

julchen · 4. Juli 2005

Hallo,
ich habe ein Problem im IE mit dem Abstand zwischen meinen 3 spaltigem Layout. Menü - Inner und News. Beim IE grenzen die divs nicht direkt an einander an. Es entsteht ein Zwischenraum bzw. Abstand von ca. 3 Pixel zum inneren Div. Beim Firefox ist das nicht so, nur beim IE 6.
Wodran liegt das?

<!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" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>unbenanntes Dokument</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
height:100%;
text-align: center /* Zentrierung für den IE */
background-color:#333333;
}
#content {
margin: 0 auto; /* Zentrierung andere Browser */
width: 760px;
height:100%;
text-align: left; /* Schriftausrichtung in allen Browsern linksbündig */
background-color:#ffffff;
}
#content #menue {
margin: 0;
width: 150px;
height:100%;
float: left;
background-color:#55442f;
}
#content #news {
margin: 0;
width: 150px;
height:100%;
float: right;
background-color:#cc552f;
}
#content #inner {
margin: 0 150px;
height:100%;
background-color:#dd8869;
}
</style>
<body>
<div id="content">
<div id="menue">Menue</div>
<div id="news">News</div>
<div id="inner">Inner</div>
</div>
</body>
</html>

Gruss
Peter

exitboy · 8. Juli 2005

was ich bei Dir vermisse ist die Cleaner Funktion:

.cleaner {
clear:both;
height:1px;
font-size:1px
border:0px none;
marin:0; padding:0;
background_transparent;
}

wenn Du das zum Schluss als letztes DIV nach der Mitte einsetzt sollte es weg sein.

Quaese · 8. Juli 2005

Hi,

es handelt sich bei deinem Problem um den sogenannten 3-Pixel-Bug. Er tritt auf, wenn neben
Elemente, die mit float aus dem Textfluss genommen wurden, normal positionierte gesetzt
werden. In einem solchen Fall entsteht im IE eine Lücke von 3 Pixeln zwischen den Elementen.
In deinem Fall wird der Container #inner neben #menue (float: left) und #news (float: right)
angeordnet. Deshalb auch die beiden Lücken.

Abhilfe kannst du schaffen, indem du den linken bzw. rechten Aussenabstand für den IE mit negativen
Werten korrigierst (margin-left: -3px, bzw. margin-right: -3px). Weiterhin müssen die margin-Werte
für den mittleren Container noch entsprechend angepasst werden (margin: 0 147px).

Im Folgenden die entsprechend angepasste CSS-Passage:

Code:

#content #menue {
margin: 0;
width: 150px;
height:100%;
float: left;
background-color:#55442f;
}
* html #content #news{ margin-left: -3px;}
#content #news {
margin: 0;
width: 150px;
height:100%;
float: right;
background-color:#cc552f;
}
* html #content #menue{ margin-right: -3px;}
#content #inner {
margin: 0 150px;
height:100%;
background-color:#dd8869;
}
* html #content #inner{ margin: 0 147px;}

Mit * html eingeleitete Definitionen werden nur vom IE interpretiert.

Ciao
Quaese

✔ Pixel Abstand Problem mit Float beim IE

julchen

Erfahrenes Mitglied

exitboy

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge