nicht angemeldet
Mozilla, HTML 4.01 strict und meine Einstiegsseite...
hallo meine lieben!
Die Sache ist folgendermaßen:
Wenn ich meine Seite (http://students.fh-joanneum.at/ecklvo/index_zeloT.php) als HTML 4.01 strict deklariere, versagt Mozilla - oder besser ich - beim Layout von zwei Layern (Bsp: auf requirements klicken).
Im Quirks-Mode zeigt er sie richtig an, was habe ich in den CSS-Definitionen falsch gemacht?
CSS:
extern:
#layer_requirements-content {
width:344px; height:210px;
voice-family:""}"";
voice-family:inherit; width:342px; height:209px;
}
intern:
<div id="requirements" style="position:absolute; bottom:15px; right:22px; width:84px; height:55px; border:0px; margin:0px; margin-bottom:-15px; margin-right:-15px; padding:0px; text-align:center; z-index:3;"><img src="images/pi.gif" style="width:84px; height:12px;" name="reqdoor" alt=""><br><a href="portfolio/about.htm" onclick="reqdoor.src='images/layer_req_door.gif';MM_showHideLayers('layer_requirements','','show','layer_requirements-content','','show');return false;" style="font-size:10px;"><img src="images/btn_req.png" style="width:15px; height:15px;" alt="requirements"><br>requirements</a></div>
<div id="layer_requirements" style="position:absolute; bottom:49px; right:16px; width:342px; height:209px; background-image:url(images/layer-shadow.gif); border:none; margin:0px; margin-right:-15px; padding:0px; visibility:hidden; z-index:1;">
<div id="layer_requirements-content" style="position:absolute; top:-4px; left:-4px; background:#FFF; border:1px solid #000; border-top:none; margin:0px; padding:0px; font:10px Arial, Helvetica, sans-serif; visibility:hidden;">
<div id="requirements-titel" style="position:absolute; top:0px; left:0px; width:342px; height:7px; border:none; margin:0px; padding:0px; overflow:hidden;"><img src="images/layer_req_title.gif" style="width:326px; height:7px;" alt="requirements"><a href="#" onclick="MM_showHideLayers('layer_requirements','','hide','layer_requirements-content','','hide');reqdoor.src='images/pi.gif';return false;" onfocus="if(this.blur)this.blur()" onmouseout="req_close.src='images/layer-close.gif';window.status='';return true;" onmouseover="req_close.src='images/layer-close_hover.gif';window.status='close requirements';return true;" style="cursor:pointer;"><img name="req_close" src="images/layer-close.gif" style="width:16px; height:7px;" alt=""></a></div>
so NICHT:
<img src="http://students.fh-joanneum.at/ecklvo/nein.gif" border="0" alt="">
so SCHON:
<img src="http://students.fh-joanneum.at/ecklvo/ja.gif" border="0" alt="">
Danke, e.
-
Hallo,
als erstes: wenn Mozilla etwas mit "strict" anders anzeigt als ohne, dann ist mit nahezu 100%iger Wahrscheinlichkeit die strict-Variante die korrekte Anzeigevariante. Dein Zusatz in Gedankenstrichen dürfte das Problem recht wahrscheinlich treffen... ;-)
Ohne jetzt Deinen Code genauer anzuschauen, könnte es sein, daß das folgende "Problem" auf Dich zutrifft?
http://devedge.netscape.com/viewsource/2002/img-table/
In dem Artikel geht's zwar hauptsächlich um Bilder in Tabellenzellen, aber für alle anderen Bilder gilt das dort geschriebene natürlich genauso.
Viele Grüße
Carsten -
Hallo ecklvo,
Mit Verlaub, der Quellcode ist absolut grausam, ein Musterbeispiel, wie man semantisch wertloses »Pixelschubser«-Tabellenlayout mit CSS eins zu eins nachbaut. Sofern du die Markupfehler reparierst, ist der Code zwar valide, aber ein Valid-HTML-Button verdient er meines Erachtens angesichts dieses Aufbaus nicht. Speziell der von dir genannte Teil gehört meiner Meinung nach komplett neu gemacht - das Markup, welches nur aus div-Elementen besteht, mehrfache Verschachtelung, altebekannt grauenhafte MM-JavaScripte und tonnenweise mir komplett unverständliche Inline-Styles sind derartig abstrus gemischt, dass voraussehbar ist, dass kein Browser es versteht. (Du hast auch keine näheren Erkläuterungen zu dem geposteten Wust an Code gegeben, welcher auch nur ein Auszug war.)
Ich habe nicht versucht, deinen Code zu re-/dekonstruieren - sofern du deine Methode überarbeitest, werde ich mich aber gerne noch einmal damit befassen -, sondern habe es komplett neu versucht, übersichtlich und strukturiert. Die Struktur an sich ist mit Markup recht einfach umsetzbar, und das anschließende absolute-relative Positionieren jedes einzelnen Containerelements wäre auch einfach, so habe ich es aber nicht gelöst. Das Hauptproblem war zuletzt die Tatsache, dass Schriftgröße und Zeilenhöhe verhinderten, dass die Grafiken in aufeinanderfolgenden Zeilen nicht zusammenstießen, da die Zeilen zu hoch waren. Mit der Brecheisenmethode font-size:1px und line-height:1px konnte ich das aber umgehen.
Ich habe es mit »fließenden« Boxen gelöst, es ist folglich keine feste Höhe vorgegeben, das wird wahrscheinlich die am wenigsten kompatible Methode sein, die andere Möglichkeit wäre wahrscheinlich eine komplett zementierte Ausrichtung, wodurch jegliche Probleme mit Zeilenhöhen, Abständen und float (welche im Massen auftreten, ich frage mich sowieso, wie du es allen Browsern recht machen willst) aus der Welt sind. Für diese pixelgenauen Spalten sowie die Schatteneffekte würde ich ab einem gewissen Punkt Gafiken/Image Maps beziehungsweise feste Hintergrundbilder verwenden, sofern Breite und Höhe sowieso fest sind. Momentan wird dieses Konzept schon beispielsweise dadurch vereitelt, dass die Browser Mindestschriftgrößen anwenden können. Zwar sollte alles mit CSS möglich sein, aber jeder Browser kocht sein eigenes Süppchen, weshalb das wohl nicht die beste Option ist.
Übrigens ließe sich der komplette untere Grafikteil (den ich in meinem Beispiel zumindest teilweise zusammengefasst habe) durch ein unten positioniertes Hintergrundbild lösen, womit ebenfalls die Zeilenhöhenprobleme sowie die schwierige treffende Anwendung von clear (dadurch wird die eine Verschachtelung nötig, die andere durch das Hintergrundbild) nicht auftauchen. Die oberste Grafik (beziehungsweise die beiden) könnte auch im äußeren Container untergebracht werden, sodass sie auf beiden Seiten den Rahmen mit einbezieht und rechts das Hintergrundbild unterdrückt, falls du es so möchtest.Die besagte Beispiellösung, ohne Scripts: http://home.t-online.de/home/dj5nu/fanhost/zelot.html
Verwendete Grafiken:
http://home.t-online.de/home/dj5nu/fanhost/zelot-shadow.png
http://home.t-online.de/home/dj5nu/fanhost/zelot-trennlinie.png
http://home.t-online.de/home/dj5nu/fanhost/zelot-unten1.png
http://home.t-online.de/home/dj5nu/fanhost/zelot-unten2.png
Screenshots:
http://home.t-online.de/home/dj5nu/fanhost/zelot-mozilla13a.png
http://home.t-online.de/home/dj5nu/fanhost/zelot-msie6.png
http://home.t-online.de/home/dj5nu/fanhost/zelot-opera701.png
http://home.t-online.de/home/dj5nu/fanhost/zelot-opera605.pngIm MSIE 5.5 konnte ich es nicht testen, wahrscheinlich wird es schlecht aussehen, da ich den box model bug nicht berücksichtigt habe. Wie gesagt würde ich es eher komplett anders lösen, wenn er Probleme machen sollte.
Eine Lösung mit einem unten positionierten Hintergrundbild und fester Höhe (welche theoretisch flexibel ist, da das Hintergrundbild größer als nötig ist und somit Spielraum vorhanden ist): http://home.t-online.de/home/dj5nu/fanhost/zelot2.html
Die Grafiken dazu:
http://home.t-online.de/home/dj5nu/fanhost/zelot2-bottom.png
http://home.t-online.de/home/dj5nu/fanhost/zelot2-top.pngGrüße,
Mathias
