nicht angemeldet
Bug in Mozilla 1.2.1/1.3a/1.3 Final?
Hallo,
Als ich heute etwas mit Divs und Positionierungen gespielt habe, ist mir etwas sonderbares untergekommen.
Hier zuerst mal mein Code, welchen ich nach XHTML Strict 1.0 validiert habe.
(Sry, dass ich den Code hier im Thread poste anstatt eine URI anzugeben nur leider habe ich momentan keinen eigenen Internet-Zugang und deshalb auch keinen Webspace.)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Div-Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
html {
width:100%; height:100%;
}
body {
width:100%; height:100%;
margin:0px; padding:0px;
overflow:auto;
background-color:#fff; color:#46d;
font-family:Arial; font-size:100%;
}
div {
position:absolute;
}
.box {
width:15%; height:15%;
background-color:#fff; color:#000;
border:1px solid #000;
cursor:pointer;
}
.row0 { top:20%; }
.row1 { top:45%; }
.row2 { top:70%; }
.col0 { left:10%; }
.col1 { left:32%; }
.col2 { left:54%; }
.col3 { left:76%; }
</style>
</head>
<body>
<div class="box row0 col0"></div>
<div class="box row0 col1"></div>
<div class="box row0 col2"></div>
<div class="box row0 col3"></div>
<div class="box row1 col0"></div>
<div class="box row1 col1"></div>
<div class="box row1 col2"></div>
<div class="box row1 col3"></div>
<div class="box row2 col0"></div>
<div class="box row2 col1"></div>
<div class="box row2 col2"></div>
<div class="box row2 col3"></div>
</body>
</html>
Es sollten 3 x 4 Reihen von Kästchen erkennbar sein mit einem jeweils einen Pixel dicken Rahmen.
_ _ _ _
|_| |_| |_| |_|
_ _ _ _
|_| |_| |_| |_|
_ _ _ _
|_| |_| |_| |_|
Der Quelltext wird von Mozilla 1.0.1, Phoenix 0.5, Opera 6.05/7.03 und dem M$ IE 6 anstandslos dargestellt nur Mozilla 1.2.1/1.3a/1.3 stellen es "falsch" dar, da bei der 2. Spalte der Kästchen der rechte Rahmen (siehe 2. Skizze) fehlt.
_ _ _ _
|_| |_ |_| |_|
_ _ _ _
|_| |_ |_| |_|
_ _ _ _
|_| |_ |_| |_|
Mit Mozilla 1.2.1 sieht es so aus:
_ _ _ _
|_| |_ |_| |_|
_ _ _ _
| | | | | | |
_ _ _ _
| | | | | | |
Hier fehlen also noch mehr Rahmen wie bei Mozilla 1.3a/1.3 Final.
Ich kann die Darstellung korrigieren, indem ich die Rahmen 2 Pixel dick mache, da dadurch der Rahmen einen Pixel dick dargestellt wird aber diese "Lösung" ist nicht annehmbar.
Etwas anderes was mir aufgefallen ist und was mich auch mutmaßen lässt, wo der Bug steckt, ist, dass dieses beschriebene Phänomen bei einer Browserfensterbreite/höhe von 1152 x 735 (Browser maximiert bei einer Auflösung von 1152x864) auftritt, jedoch bei einer Browserfensterbreite/höhe von zum Beispiel 881 x 642 alles korrekt dargestellt wird.
Deshalb vermute ich, dass die Routine, welche für das Zeichnen der Rahmen zuständig ist, einen Fehler hat. Kann das zutreffen?
Was mir noch komisch vorkommt ist, dass die Mozillaversionen 1.2.1/1.3a/1.3 Probleme machen, jedoch Phoenix 0.5, welcher ja auf dem Mozilla-Kern 1.3a basiert, keine Probleme bei der Darstellung hat.
Der einzige Workaround, der mir jetzt einfallen würde, wäre das HTML-Element 99% weit bzw. hoch zu machen, damit ein maximierter Mozilla 1.2.1/1.3a/1.3 alles korrekt darstellt.
Kann das, was ich beschrieben habe, jemand nachvollziehen?
Wenn ja, was glaubt ihr ist das nun ein Bug (was ich annehme) oder habe ich einen Fehler gemacht?
Thanks in advance.
MfG
morpheus
-
hallo,
Hier gibst du mehrere verschiedene Klassen vor:
.box {
width:15%; height:15%;
background-color:#fff; color:#000;
border:1px solid #000;
cursor:pointer;
}.row0 { top:20%; }
.row1 { top:45%; }
.row2 { top:70%; }.col0 { left:10%; }
.col1 { left:32%; }
.col2 { left:54%; }
.col3 { left:76%; }Und hier soll jedes DIV gleich drei verschiedenen Klassen zugehören. Damit kann ein ordentlicher Browser wie mozilla halt nix anfangen.
<div class="box row0 col0"></div>
Sag deinen DIV's, daß sie so aussehen sollen:
<div class="box"></div>Grüße aus Berlin
Christoph S.
-
Hallo,
Also erstmal danke für deine Antwort ...
Und hier soll jedes DIV gleich drei verschiedenen Klassen zugehören.
Warum soll das nicht problemlos möglich sein?
Damit kann ein ordentlicher Browser wie mozilla halt nix anfangen.
Warum kommt es dann bei Mozilla 1.0.1 und Opera 7.03 nicht zu diesem Problem? :o)
Sag deinen DIV's, daß sie so aussehen sollen:
<div class="box"></div>Ich habe das jetzt schnell umgebaut ... ich denke so hast du das gemeint, oder?
<div class="box" style="top:20%; left:10%;"></div>
[...]
<div class="box" style="top:70%; left:76%;"></div>Aber dadurch verändert sich die Darstellung ja nicht.
MfG
morpheus-
hallo nochmals,
Also erstmal danke für deine Antwort ...
bittesehr
Sag deinen DIV's, daß sie so aussehen sollen:
<div class="box"></div>
Ich habe das jetzt schnell umgebaut ... ich denke so hast du das gemeint, oder?
<div class="box" style="top:20%; left:10%;"></div>
[...]
<div class="box" style="top:70%; left:76%;"></div>Prinzipiell ja, nur sollten dann aus stilistischen Gründen die "style"-Angaben in deine CSS-Abschnitte im Header geschrieben werden.
Aber dadurch verändert sich die Darstellung ja nicht.
mozilla kann mit "leeren" DIV's nicht viel anfangen. Steck irgendwelchen Inhalt hinein, oder verändere einfach mal den Hintergrund von .box zu #eee, und schon ist auch der Rahmen vollständig ringsherum da.
Christoph S.
-
moin,
Ich hab dir deine Datei mal neu geschrieben. So funktioniert sie mit allen Browsern, die ich zur Verfügung habe - also auch mit mozilla und Konqueror:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Div-Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">body {
margin-top:12px;
margin-left:12px;
margin-bottom:10px;
background-color: #EEEEEE;
font-family:Arial;
}div {
position:absolute;
}.box1 {
width:15%; height:15%; top:20%; left:10%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box2 {
width:15%; height:15%; top:20%; left:32%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box3 {
width:15%; height:15%; top:20%; left:54%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box4 {
width:15%; height:15%; top:20%; left:76%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box5 {
width:15%; height:15%; top:45%; left:10%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box6 {
width:15%; height:15%; top:45%; left:32%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box7 {
width:15%; height:15%; top:45%; left:54%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box8 {
width:15%; height:15%; top:45%; left:76%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box9 {
width:15%; height:15%; top:70%; left:10%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box10 {
width:15%; height:15%; top:70%; left:32%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box11 {
width:15%; height:15%; top:70%; left:54%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box12 {
width:15%; height:15%; top:70%; left:76%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}
</style>
</head><body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div><div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div><div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div></body>
</html>Christoph S.
-
Moin,
.box1 {
width:15%; height:15%; top:20%; left:10%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}.box2 {
width:15%; height:15%; top:20%; left:32%;
background-color:#FFFFFF;
border-width: 1pt; border-style:solid; border-color:blue;
}
[usw. usf.]Das ist doch jetzt nicht dein Ernst, oder? Ich dachte der 1.4. wäre erst morgen...
Die ursprüngliche Art der Zuweisung über mehrere Klassen ist perfekt valide, guter Stil und sollte von jedem anständigen Browser gefressen werden: http://www.w3.org/TR/html4/struct/global.html#adef-class. Schließlich ist es ja grade der Sinn von CSS möglichst wenig Informationen mehrfach angeben zu müssen, sonst könnten wir uns das Cascading gleich sparen.
--
Henryk Plötz
Grüße von der Ostsee -
Hallo,
So funktioniert sie mit allen Browsern, die ich zur Verfügung habe - also auch mit mozilla und Konqueror:
Hast du deinen Code in Mozilla 1.3 Final selber getestet?
Verändere die Fensterbreiten/höhen von Mozilla und du wirst sehen, dass die Rahmen eine Ausdehnung von null bis zwei(!) Pixel annimmt.
Zum Beispiel verschwinden bei mir (momentan Win 2k) bei 955 x 610 die rechten Rahmen der 2. Spalte, wie ich es schon vorher beschrieben habe.Ich habe jetzt auch mit einem Freund darüber geredet und ihn den Effekt gezeigt und er meinte auch, dass das nur ein Bug der Berechnungsroutine für die Prozentangaben sein kann.
.box1 { }
[...]
.box12 { }Sry, aber diese "Lösung" ist mir zu aufwändig, da sich dadurch der Code ja nicht verkleinert und ich kann die Position aller Kästchen auch nicht mehr auf einmal verändern, was ja der Sinn von CSS ist.
Die URI, welche Henryk Plötz gepostet hat beinhaltet folgenden Satz:
[...] The class attribute, on the other hand, assigns one or more class names to an element [...] <<
MfG
morpheus-
Hallo,
Sry,
Wieso interessieren sich plötzlich alle für Genetik!?
http://www.ncbi.nlm.nih.gov/disease/SRY.html
Grüße
Thomas
-
-
-
-