nicht angemeldet
Border- / Margin-Problem mit dem IE
Hallo,
Ein Border- / Margin-Problem mit dem IE:
Die Darstellung des untenstehenden Codes ist in Firefox, Opera, Mozilla etc. eigentlich korrekt. Der IE kommt jedoch nicht über den Rand des Elements mit der ID "foobar" hinaus:
Beim ersten Fall (mit #marker) stellt er den Inhalt vom #marker im #foobar dar (nähme ich die Border-Angaben zu ".activefoobar" weg, verhält sich der IE wie beim zweiten Fall).
Beim zweiten Fall (mit text-indetn: siehe kommentare im Code) schneidet er den Inhalt vom #foobar ab bzw. der "hinausgezogener" Teil des Inhalts verschwindet im Nirvana.
Hat jemand irgendeine Idee, was der IE für ein Problem hierbei hat?
Grüße
Thomas
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body { padding:0px 0px 0px 25px; margin:0px; }
#content { width:1000px; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; }
#foobar { background-color:#99ccff; /*text-indent:-25px;*/ } /*2nd comment in text-indent */
.activefoobar { border:solid 1px #f88113; }
#marker { width:9px; height:17px; padding:0px; margin-left:-25px; margin-bottom:-17px; }
</style>
</head>
<body>
<div id="content">
<br><br><br>
<div id="foobarbox">
<div id="foobar" class="activefoobar">
<div id="marker">>></div><!-- 2dn comment out this -->
<!-- >> --><!-- 2nd comment in this -->
text text text
</div>
</div>
</div>
</body>
</html>
-
Hallo,
Hat jemand irgendeine Idee, was der IE für ein Problem hierbei hat?
Ja, er stellt Elementteile nicht außerhalb des Elements dar, sobald das Element eine explizite Breite hat, weder mit negativen text-indent noch negativen margin-Werten.
Siehe:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {padding:0px 0px 0px 25px; margin:0px;}
p {text-indent:-25px; margin:0; padding:0;}
/*p {margin:0; margin-left:-25px; padding:0;}*/
div#v1 {padding:0; border:1px solid black; background-color:#00AEAD;}
div#v2 {width:300px; padding:0; border:1px solid black; background-color:#00AEAD;}
div#v3 {width:300px; margin:auto; padding:0; border:1px solid black; background-color:#00AEAD;}
</style>
</head>
<body>
<div id="v1"><p>Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext</p></div>
<p>vs.</p>
<div id="v2"><p>Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext</p></div>
<p>vs.</p>
<div id="v3"><p>Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext</p></div>
</body>
</html>Du könntest Deinen #marker als Inline-Element mit position:relative; left:-25px; formatieren. Dann bleiben diese 25px allerdings leer, dort wo er eigentlich gestanden hätte.
viele Grüße
Axel
-
Hallo Axel,
Hat jemand irgendeine Idee, was der IE für ein Problem hierbei hat?
Ja, er stellt Elementteile nicht außerhalb des Elements dar, sobald das Element eine explizite Breite hat, weder mit negativen text-indent noch negativen margin-Werten.So weit war ich ja auch ;-)
Du könntest Deinen #marker als Inline-Element mit position:relative; left:-25px; formatieren. Dann bleiben diese 25px allerdings leer, dort wo er eigentlich gestanden hätte.
Kann ich nicht, denn a) der IE ist ja nicht geade der große Macker bei position:ralativ; und b) die entstehende Lücke ist inakzeptabel (und auf zwei zusätzliche text-indent habe ich wirklich keine Lust).
Also habe ich mich mit schwerem Herzen und Zähneknirschen zu "back to the roots" entschlossen und regele die Sache mit einer Tabelle (und wünschte dabei Bill und M$ vieles an den Hals ;-))Totzdem danke für deine Zeit.
Grüße
Thomas
-