nicht angemeldet
Hallo,
bei einer Kombination von float mit height stellt der Internet-Explorer meine Seite falsch dar. Das ist zumindest meine Vermutung. Im Firefox (2.0.0.11) und im Opera (9..02) ist das Ergebnis so wie gewünscht.
Mein Beispiel:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Floating bug im Internet-Explorer?</title>
</head>
<body>
<h1>Beispiel 1</h1>
<div style="float:right; background-color: yellow;">
<h1 style="height:100px; margin:0; padding:0;">rechts</h1>
</div>
<div style="background-color: red;">
<h1 style="height:100px; margin:0; padding:0;">links</h1>
</div>
<br style="clear:both;" />
<h1>Beispiel 2</h1>
<div style="float:right; height:100px; background-color: yellow;">
<h1 style="margin:0; padding:0;">rechts</h1>
</div>
<div style="height:100px; background-color: red;">
<h1 style="margin:0; padding:0;">links</h1>
</div>
</body>
</html>
Ich erwarte für beide Beispiele eine rote Box "links" und rechts daneben eine gelbe Box "rechts".
Der Internet-Explorer generiert für Beispiel 1 zwei Zeilen, zuerst eine Gelbe, dann die Rote. Für Beispiel 2 werden die rote und die gelbe Box zwar nebeneinander dargestellt, dazwischen entsteht aber ein Spalt.
Wo ist hier der Fehler? Wie kann man ihn umgehen?
Viele Grüße und vielen Dank
Daniel N.
MudGuard