✔ height erzeugt leere Spalte im IE

Status
Nicht offen für weitere Antworten.
aquasonic

aquasonic

Erfahrenes Mitglied
Hallo zusammen,

Ich habe eine eigentlich ganz einfache Seite gemacht. 3 Spalten welche schlussendlich über 100% der Breite verfügen. Dafür habe ich zwei Spalten links, welche ich mit float left ausrüste und eine rechts.

Klappt auch alles. Wenn ich aber nun der rechten Spalte eine Höhe angebe, so gibt dies im IE einen Abstand der zwei DIV's (siehe Anhang). Aber nur im IE, Firefox funktioniert alles wunderbar.

Woran liegt das? Resp. wie kann ich dies lösen damit es auch im IE funktioniert?

Danke.

Hier noch der Quelltext dazu:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<body style="margin:0; padding:0;">

<div style="float:left; background-color:yellow; width:100px; height:30px">Bla</div>
<div style="float:left; background-color:green; width:100px; height:30px">Bla</div>
<div style="background-color:purple; height:30px">Bla</div>

</body>
 

Anhänge

  • 26435attachment.jpg
    26435attachment.jpg
    1,9 KB · Aufrufe: 16
  • 26436attachment.jpg
    26436attachment.jpg
    2 KB · Aufrufe: 17
Hierbei handelt es sich um den "3-Pixel-Bug", der im IE bei floatenden Boxen in Verbindung mit einer Höhenangabe auftritt.

Lösung:

Code: 
<div style="float:left; background-color:yellow; width:100px; height:30px">Bla</div>
<div style="float:left; background-color:green; width:100px; height:30px; margin-right:0 !important;margin-right:-3px;">Bla</div>
<div style="background-color:purple; height:30px">Bla</div>
 
Dies scheint zu funktionieren, danke :)

Aber es gibt noch ein weiteres Problem. Habe ich ein Div mit einem Bild links (mit floating left) und rechts dann zwei Zeilen mit Text oder Bild, was auch immer, fixed deine Lösung den Bug nur bei der unteren Zeile (wenn ich die von dir genannte Lösung bein DIV links einfüge).

Hast du da (sicherlich) auch gerade ne weitere Lösung parat? ;)


// edit: hm, hat sich in diesem Moment erledigt: hatte noch ein margin-right drin ;) Im IE gehts nun wenn ich dies rausnehme. Aber ;) Beim Firefox positioniert er nun dass div rechts unter das div links, also nicht anhängend an dieses. Kann ich dies mit position lösen?
 
Zuletzt bearbeitet:
Code: 
<div id="head_logo" class="head"><img src="logo.gif"><img src="vline.gif"></div>
<div id="head_logo_zuerich" class="head"></div>
<div id="head_hline" class="head"></div>
<div id="head_shadowline" class="head"></div>

Code: 
div#head_logo {
	background-color: #1D3E9E;
	float: left;
	height: 50px;
	width: 82px;
	margin-right: 0 !important;
	margin-right:-3px;
}

div#head_logo_zuerich {
	background-color: #1D3E9E;
	background-image: url(zuerich.gif);
	background-repeat: no-repeat;
	height: 32px;
}

div#head_hline {
	background-color: #1D3E9E;
	background-image: url(hline.gif);
	background-repeat: repeat-x;
	height: 18px;
}

div#head_shadowline {
	background-image: url(shadow_head.gif);
	background-repeat: repeat-x;
	height: 20px;
}

Wenn ich das Bild (zuerich.gif) anstatt als Hintergrund als normales img in HTML einfüge, dann funktioniert es auch im Firefox. Komisch ist nur, dass der IE das Hintergrundbild wieder neben dem Layer positioniert, da doch der Layer (wie im Firefox) wirklich unter dem anderen sein sollte oder?
 
Ich kann das hier jetzt ohne die Grafiken nicht so recht nachvollziehen, was da im Firefox falsch läuft, aber vielleicht hängt es damit zusammen, daß da teilweise keine Breitenangaben definiert sind?

Gibt es eventuell eine Online-Version der Seite? Ansonsten häng hier mal eine ZIP-Datei mit den Grafiken an.
 
Dort wo keine Breite definiert ist, bedeuetet dies einfach 100% (also der Rest). Dies funktioniert auch ;)

Wenn ich margin-right noch einfüge (auf 182px, so dass das Bild rechts und die vertikale Punktelinie rechts vom Logo abgedeckt sind) funktioniert es beim Firefox wieder. Dann aber wieder der 3-Pixel-Bug im IE (nur bei der oberen Zeile mit dem Kanton-Zürich Bild).

Im Anhang die Bilder ;)
 

Anhänge

Erweiter den Selektor div#head_logo_zuerich mit der oben gezeigten Regel:

Code: 
div#head_logo_zuerich {
        background-color: #1D3E9E;
        background-image: url(zuerich.gif);
        background-repeat: no-repeat;
        height: 32px;
        margin-left: 80px !important; /* Für nicht-IE-Browser */
        margin-left: 77px; /* Für IE */
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück