nicht angemeldet
Unterschiedliche Browser-Darstellung: Block mit Rahmen
Hallo,
Bei folgender Codierung bekomme ich im bei verschiedenen Browsern eine unterschiedliche Darstellung
<div style="width:150px; height:180px; border-size:1px; border-style:solid;">Ist vollkommen egal</div>
Es geht mir um den Rahmen und die Block-Breite/Höhe. Der gute Mozilla(1.2) legt den Rahmen um den Block drumherum, so daß praktisch eine Höhe von 182 Pixel und eine Breite von 152 Pixeln entsteht.
Der InternetExplorer 6.0 hingegen legt den Rahmen auf den Container drauf. Die ursprünglichen Blockmaße (150*180) bleiben also erhalten.
Da sich der Block optisch an anderen Elementen ausrichtet, entsteht - je nachdem für welchen Browser man optimiert - immer eine zwar kleine aber doch deutlich sichtbare Pixelverschiebung. Das sieht echt beknackt aus ;-(
Hat jemand eine Idee für eine Browserübergreifende Lösung?
Viele Grüße
Frank Dell
-
Meine Lösung wird dir nicht gefallen....
jedoch ist das die einzige, Du musst Javascripte dazu schreien, welche erkennen welchen Browser Du verwendest und den Scheiss sozusagen mit dem Script entsprechend korigieren.
Oder nimm einen Standart, den jeder sauber unterstütz.Schau dir mal www.steiff.de an.
Der Quellcode ist z.B. ekelhaft übel behandelt aber exact das Problem.-
Sorry schon wieder veraltet Sie haben inzwischen das ganze mit Frames gelöst.
Schade früher war das mal richtig chaotisch mit wilden Java Scripten...
-
-
Hallo,
<div style="width:150px; height:180px; border-size:1px; border-style:solid;">Ist vollkommen egal</div>
Der InternetExplorer 6.0 hingegen legt den Rahmen auf den Container drauf. Die ursprünglichen Blockmaße (150*180) bleiben also erhalten.
...und liegt damit falsch. Du hast soeben die berühmte Fehlinterpretation des Boxmodels durch den IE entdeckt.
Hat jemand eine Idee für eine Browserübergreifende Lösung?
Mit einer geeignet gewählten Doctype-Angabe in der ersten Zeile Deines HTML-Codes zwingst Du den IE 6 in den "standards-compliant Mode", sodaß er bei den Berechnung der Box-Dimensionen nicht mehr daneben liegt.
Haken an der Geschichte: IEs älter als IE 6 machen es immer noch falsch.
Workaround: Verschachtel zwei divs. Dem äußeren weist Du die gewünschte Höhe/Breite zu, dem inneren den gewünschten Rahmen.Viele Grüße
Carsten -
Hallo,
abhängig vom Doctype ist es hier möglich das Browserverhalten wie beim IE-Boxbug zu behandeln.
Ansonsten gibt es ja CSS-Weichen für die IEs, z.B. folgende bei Kristof Lipfert http://www.lipfert-malik.de/webdesign/tutorial/css.html#Browserweichen beschriebene Methode:
<div style="width:148px; height:178px; border-size:1px; border-style:solid;// width:150px; // height:180px;">
Grüße,
CurtB