[CSS] Lücke zwischen 2 DIVs im IE

HotSpot · 27.07.2004, 21:09

Ich habe ein Problem mit dem IE, der macht Sachen die er nicht soll und ich weiss nicht was ich falsch mache.
Da wo der Pfeil zeigt sollte eigentlich das DIV geschlossen sein und an Box 3 anschliessen?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Seite 01</title>
<style type="text/css">
body {
   margin: 0px;
   background-image: url("file:///D:/Grafik/Kice/img/bg.gif");
   background-repeat: repeat-x;
   font-family: Arial, Verdana, Tahoma;
   color: #000000;
}
#box1 {
   background-color: #FFFFFF;
   margin: 0px;
   padding: 40px 0px 0px 10px;
   width: 492px;
   height: 90px;
   float:left;
}
#box2 {
   background-color: #FFFFFF;
   margin-left: 502px;
   padding: 0px;
   height: 130px;
   width: auto;
   }
#box3 {
   background-color: #FFCC00;
   margin: 0px;
   padding-left: 1px;
   width: 501px;
   height: 130px;
   float:left;
}
#box4 {
   background-color: green;
   margin-left: 502px;
   padding-left: 0px;
   height: 130px;
	 width: auto;
}
#box5 {
   background-color: #FFCC00;
   margin: 0px;
   padding-left: 1px;
   width: 501px;
   float:left;
}
#box6 {
   background-color: green;
   margin-left: 502px;
   padding-left: 0px;
	 width: auto;
}
#box7 {
   background-color: #004887;
   font-size: 1px;
   margin-top: 10px;
   height: 2px;
   width: 100%;
}
#box8 {
   font-family: Arial,Verdana,Tahoma;
   color: #004887;
   font-size: 12px;
   line-height: 20px;
	 width: 100%;
}
</style>
</head>

<body style="text-align:center;">
<div style="width:750px;margin:0px auto;text-align:left;">

<div id="box1"><img src="file:///D:/Grafik/Kice/img/logo.gif"></div>
<div id="box2"><img src="file:///D:/Grafik/Kice/img/sitemap.gif"></div>

<div id="box3">Box 3</div>
<div id="box4">Box 4</div>

<div id="box5">x<BR>x<BR>x<BR></div>
<div id="box6">x<BR>x<BR>x<BR>x<BR>x<BR></div>

<div id="box7">&nbsp;</div>
<div id="box8">Navi</div>

</div>
</body>
</html>

Ich bin langsam am verzweifeln, denn das muss 130px hoch sein. Wenn ich es auf "height: auto;" stelle ist diese Lücke weg.

Wo liegt bei da der Fehler?

Terry · 27.07.2004, 21:34

Das ist der 3-px Bug vom IE - wie man das in dem Fall aber löst?

Hab ich jedenfalls noch nicht rausgefunden - ist weg, wenn box4 auch nach links floaten kann - aber ich nehme an, dass es Du die Box in der Breite flexibel anpassbar haben möchtest - und dann wird's schwierig....

HotSpot · 27.07.2004, 21:42

Wie meinst du das? Die Box 4 kann ruhig eine feste Breit haben.

Terry · 27.07.2004, 22:01

Dann gib ihr eine feste Breite und float:left; - dann legt sie sich direkt an die box 3 - natürlich das margin auf 0 setzen.

HotSpot · 27.07.2004, 22:18

Danke das klappt. Recht soll eigentlich noch ein weisser Strich sein, sobald ich aber "border-left: 1px solid #FFFFFF" in das CSS für Box 4 schreibe stimmt gar nichts mehr.

An was liegt das?

Terry · 27.07.2004, 22:26

Hüpft Dir die Box dann runter?

Dann musst Du sie 1px schmaler machen - border wird nach dem Boxmodell zum Inhalt dazugezählt - ebenso wie padding.

HotSpot · 27.07.2004, 22:54

Danke, bin schon sehr viel weiter. Habe bisher nur mit Tabellen gearbeitet und bin nun bei meinem ersten Quelltext ohne jede Tabelle (bis jetzt).