nicht angemeldet
IE-Bug in Verbindung mit CSS position -> float -> display
Hallo zusammen,
dieses Posting soll als Info dienen. Ich habe heute einen Bug im IE entdeckt (vielleicht hat ihn ja schon vor mir jemand entdeckt).
Unter bestimmten Voraussetzungen werden Angaben zum Hintergrund (color und image) sowie Rahmen nicht mehr angezeigt.
Aber...nicht verzagen...Tine fragen...hi.hi, ich hab nämlich auch eine Lösung dafür gefunden.
Ich habe folgenden Code:
*****
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="language" content="de, deutsch, german">
<style type="text/css">
div#id1 {
position: relative;
float: left;
}
div#id1 a {
display: block;
background-color: red;
border: 3px solid blue;
}
</style>
<title></title>
</head>
<body>
<div id="id1">
<div>
<a href="javascript:void(-1)">Link 1</a>
<a href="javascript:void(-1)">Link 2</a>
</div>
<p>irgend ein Text.</p>
</div>
</body>
</html>
***
Warum ich eine Verschachtelung der <div>s habe sei mal dahingestellt. Es kann jedenfalls vorkommen, dass man solch eine Konstruktion benötigt. Der Focus liegt ja jetzt auch auf was anderem.
Jedenfalls sollte "Link 1" mit einer roten Hintergrundfarbe und einem blauen Rahmen dargestellt werden. Dem ist aber nicht so.
Wenn man eine aus "div#id1" gemachte Angaben entfernt (position oder float), oder alternativ das "display: block;" aus "div#id1 a" entfernt funktioniert das ganze wieder.
Wenn man vor den "Link 1" einen Text einträgt funktionierts ebenfalls wieder.
Ich habe aber auch eine Lösung für das Problem gefunden:
wenn ich dem <a> Tag innerhalb des <div>s ebenfalls die Eigenschaft "position: relative;" gebe wird wieder alles so dargestellt wie es sollte.
Da es sich aber um einen IE-Bug handelt kann man "position: relative;" auch nur für den IE angeben. Das geschieht folgendermassen:
* html div#id1 { position: relative; }
Diesen Selektor kann nur der IE interpretieren.
Kenn jemand diesen Bug und hat evtl. eine andere Lösung parat?
Gruss
Martina
-
Ich hab noch einen kleinen Fehler entdeckt:
richtig müsste die Lösung heissen:
* html div#id1 a {position: relative;}
^^^War ein kleiner Tippfehler.
Grüssle
martina -
Hallo,
Unter bestimmten Voraussetzungen werden Angaben zum Hintergrund (color und image) sowie Rahmen nicht mehr angezeigt.
Ich habe folgenden Code:
*****
<style type="text/css">
div#id1 {
position: relative;
float: left;
}Die Angaben von position _und_ float _gleichzeitig_ sind nicht sinnvoll und führen hier zum beschriebenen Fehler. Es ist also, meiner Meinung nach, kein Bug, sondern ein Fehler in Deinem Code. Positioniere das DIV-Element mit position _oder_ lasse es floaten und es wird völlig ohne Workaround funktionieren.
viele Grüße
Axel
-
Hallo Axel,
Die Angaben von position _und_ float _gleichzeitig_ sind nicht sinnvoll und führen hier zum beschriebenen Fehler. Es ist also, meiner Meinung nach, kein Bug, sondern ein Fehler in Deinem Code. Positioniere das DIV-Element mit position _oder_ lasse es floaten und es wird völlig ohne Workaround funktionieren.
Ich benötige aber position: relative;, da ich innerhalb dieses <div>s ein weiteres Element habe, welches ich absolut innerhalb dieses <div>s positionieren möchte. Wenn ich dem <div> nicht position: relative; zuweise würde ich das erwähnte Element absolut im Bezug zur Seite an sich positionieren.
Wenn es ein Fehler im Code wäre, würde es Firefox auch nicht richtig darstellen.
Gruss
Martina
-