nicht angemeldet
IE: Im IE wird width in 2. DIV nicht beachtet
0 0 
MudGuard
0
IE: Im IE wird width in 2. DIV nicht beachtet
Hallo,
ich habe mir eine schöne Statusleste gebastelt, jedoch wird diese nur im Firefox richtig angezeigt. Schaut´s euch ma an.
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Balken Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="de">
<style type="text/css">
.balken_bg {
background:#DFDFDF;
border:1px solid;
width:100px;
height:15px;
padding:0;
}
.balken_pro {
font-size:12px;
text-align:center;
width:100px;
height:15px;
}
.balken_gr {
background-color:#00FF00;
height:15px;
top:0;
}
</style>
</head>
<body>
<div class='balken_bg'><div class='balken_gr' style='width:20;'><div class='balken_pro'>20%</div></div></div>
</body>
</html>
Woran liegt das?
Gruß
Marius
-
Hi,
wofür soviele div´s?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Balken Test</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="content-language" content="de"> <style type="text/css"> [code lang=css] .balken_bg { background:#00FF00; border:1px solid; font-size:12px; width:100px; height:15px; padding:0; text-align:center; }</style>
</head>
<body>
<div class='balken_bg'>20%</div>
</body>
</html>[/code]Probier es mal so.
Grüße,
Engin
GYRO-
Hi,
wofür soviele div´s?
Du hast soeben meinen grünen Stausbalken gelöscht. Darum auch 3 DIV´s (1. Background, 2. grüner Balken der Variieren soll, 3. Die Prozentzahl).
Dein Vorschlag nützt nichts.
Gruß
Marius-
Hi,
Du hast soeben meinen grünen Stausbalken gelöscht.
Entschuldige bitte, leide in letzter Zeit an löschwut. ;-)
Dein Vorschlag nützt nichts.
Hast du es denn Probiert? Bei mir geht´s im IE6 wie auch im FF 2.0 als auch im Opera.
Grüße,
Engin
GYRO-
Hi,
Hast du es denn Probiert? Bei mir geht´s im IE6 wie auch im FF 2.0 als auch im Opera.
Ja, jedoch nicht mit dem gewünschten Effekt. Der Grüne Balken soll nicht 100 haben, sondern 20. Dann würde er nähmlich nur 20% des Kastens ausfüllen, nicht das ganze.
Gruß
Marius-
Hi,
Ja, jedoch nicht mit dem gewünschten Effekt. Der Grüne Balken soll nicht 100 haben, sondern 20. Dann würde er nähmlich nur 20% des Kastens ausfüllen, nicht das ganze.
Sorry, meine schuld, hab glatt überlesen, das der background variieren soll.
Ich probier mal noch´n bisschen rum, wenn was rumkommt, meld ich mich.
Wenn ich länger als 5 Minuten weg sein sollte, einfach bisschen länger warten. ;-)Grüße,
Engin
GYRO
-
-
-
-
-
Hi,
style='width:20;'
20 Ameisenbeinlängen? 20 Elefantenrüsseldurchmesser? 20 Lichtjahre?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
20 Ameisenbeinlängen? 20 Elefantenrüsseldurchmesser? 20 Lichtjahre?
Hups hatte ich vergessen, bringt dennoch nichts.
Gruß
Marius
-
-
Hallo Marius
ich habe mir eine schöne Statusleste gebastelt, jedoch wird diese nur im Firefox richtig angezeigt.
Meinst du wirklich _nur_ im Firefox oder eher nicht im IE?
Woran liegt das?
Lies dazu bei width (Breite) unter "Beachten Sie:" welches Problem der IE bis zur Version 6 und im Quirksmodus mit Angaben zur Breite hat.
Zur Lösung des Problems, entweder .balken_pro absolut positionieren, damit er keinen Einfluss mehr auf das umgebende Element hat, oder (würde ich besser finden) die verschachtelten Elemente ganz weglassen und stattdessen eine passend positionierte Hintegrundgrafik verwenden.
1. Lösung
CSS:.balken_bg { ... position:relative; overflow:hidden; } .balken_pro { ... position:absolute; top:0; left:0; width:100%; height:100%; }HTML:
<div class='balken_bg'><div class='balken_pro'>20%</div><div class='balken_gr' style='width:20px;'></div></div>2. Lösung
CSS:.balken { background:#DFDFDF url(status.png) 20px 0; border:1px solid; width:100px; height:15px; padding:0; font-size:12px; text-align:center; }HTML:
<div class='balken'>20%</div>
AufWiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
