css in IE,Opera & Firefox !

H

halbesbit

Aktives Mitglied
Also ich habe da mal wieder ein Problem
unsure.gif
ich erstelle mit Hilfe von PHP ein Feld von 25x25 um den soll ein Rahmen sein mit einer Dicke von 5px soweit so gut sowie hirizontal,vertikal centriert!?Doch wie mache ich das es in "allen" (FF,Opera,IE) Bowsern gleich aussieht ?
Hier ein Demo:www.halbesbit.de/demo/Felder/
 
Hallo,

Du solltest hauptsächlich Wert auf Firefox und IE legen. Den Opera würde ich nicht soviel Beachtung schenken (wenn es nicht völlig schlimm aussieht). Denn laut aktueller Statistik haben die Browser folgende Marktanteile:

IE = 67.7 %
Mozilla = 26.4%
Opera = 1.3%
Rest = 4,6 %

Stand 16.04.08

In der Regel schafft man es nicht, dass in allen Browsern alles perfekt bzw. gleich aussieht. Daher sollte man sich auf den Teil der größten Nutzer beschrenken (IE und Mozilla).

Kleiner Tipp, vielleicht hilft Dir das:
Versuche mal mit "pt" anstatt mit "px" bei dem Rahmen zu arbeiten. Die Browser Firefox interpretiert auch "." stellen bei den pt (der IE rundet meiner Erfahrung nach auf und stellt dann automatisch 5pt dar). Sprich Du kannst z.B. mal probieren wie 4.6pt bis 4.9pt im Firefox und IE aussehen. Benutze oft bei Rahmen um Websites 0.7 pt anstatt 1 pt, da sonst der Firefox die Linien auf mindestens einer Seite von vieren dicker anzeigt.

Gruß
Mirko
 
CODE

style="border:5pt solid #0000ff;"




wird eigentlich von allen Bowsern richtig erkant
 
Hauptproblem bei Rahmen mit gewissen "Breiten" (1 px, usw) ist meines Errachtens ob ein Browser den Rahmen zur Breite hinzuzählt oder die Breite des divs ohne Rahmen rechnet. IE verhält sich da anders wie Firefox. Opera und Firefox verhalten sich übriges konform.

Wenn ich sage, dass ein div eine Breite von 20 px hat und einen Rahmen von 1px, dann ergibt sich für das Gesamte Feld inklusive Rahmen in Firefox: 20px und in IE 22px.

Weitere Informationen zu diesem Bug - Der Box Model Bug:
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Es ist wichtig diesen Fehler zu verstehen und dann zu erkennen, welche Dinge man am besten NICHT mit divs macht, weil divs mit Internet-Explorer nicht unbedingt konform dargestellt werden

Beim Fragesteller wird jetzt zum Problem, dass ein Feld mit divs (float) aufgefüllt wird? Sehe ich das richtig? Hauptproblem ist, dass die inneren divs dann halt 2px zu gross in IE sind...

Ok, ich denke, es ist einfacher, im PHP-Teil "float" zu setzen bzw. nicht zu setzen, so dass die Felder in einer neuen Zeile erscheinen. Mach da was mit Zählern.

Beim grossen Rahmen ganz um das Feld herum würde ich die absoluten Angaben für Höhe und Breite gleich ganz beerdigen... Richte das äussere div an die inneren Felder aus...

Weitere Alternativ: mach für jedes div absolute Positionsangaben. Sollte auch mit zwei Zählern in PHP hinhauen.
 
QUOTE welche Dinge man am besten NICHT mit divs macht


Ist eigentlich irrelevant, wenn man was mit divs machen muss/möchte, dann sollte man das auch tun, egal welchen Browser der Benutzer verwendet...

Dafür gibt es ja diese tollen Browserweichen für den IE (die auch nur der IE versteht, aber das reicht ja auch aus).

Also: Auf Mozilla optimieren (Opera zeigt die dann auch korrekt an, deren CSS Umsetzung ist sowieso die Beste) und für den IE eine seperate CSS einbinden in denen man dessen Macken / Bugs ausbügelt.


CODE
<!--[if IE]><link rel="stylesheet" href="/css/ie.css" type="text/css" /><![endif]-->



Meiner Meinung nach die für den Anwender gescheiteste Lösung.
 
"MUSS" mit divs machen ;-)...

Klar: schreibe ich was degegen? Die verwendete Technik, um mit Divs einen grossen Rahmen mit kleineren Vierecken zu füllen ist ein wenig stupide und KANN DURCHAUS auch mit einer Tabelle gelöst werden.

laugh.gif


Weiter: Es ist erschreckend, wie die Leute den Box-Modell-Bug NICHT kennen und daher völlig sinnentfremdete Tipps geben. Das zeigt auf der anderen Seite auch:

Solche Designs sind nicht üblich!, denn sonst hätten wir ständig threads zu ähnlichen Themen[/B].

Wie schon gesagt: Tabelle tut es auch.
 
Der Rahmen soll nur forläufig da sein !also der ist nicht wichtig sollte nur zur orientirung da sein.wichtig is es halt das,das Feld von 25x25 richtig dargestellt wird in möglichst jedem Browser mit wenig Code b.z.w. wenig Aufwand
wink.gif
also 25Felder Horizontal und 25Felder Vertikal .Bei mir wird es z.b. im IE so wie gewüscht dargestellt ,nur halt nicht im FF,Opera !Naja die 3 Browser würden ja reichen !?
 
Die Lösung steht im Text von Yosh:
<!--[if IE]><link rel="stylesheet" href="/css/ie.css" type="text/css" /><![endif]-->
--> Nennt sich Conditional Comments (googlen!) und wird nur von IE unterstützt...

Ich persönlich würde solche (Deine) Designs vermeiden, sonst aber auch zu einer solchen Weiche greifen.

Das Vorgehen ist nun so:

Optimier für den Firefox, denn damit deckst Du alle konformen Browser ab. Dann "experimentier" mit Sonderwerten für den IE rum (innerhalb der Conditional Comments), bis es für den IE passt...

Achtung: spätere IE-Versionen könnten sich auch wieder konform verhalten, insofern musst Du in Betracht ziehen, dass Du ständig nachbessern musst.
IE 8: http://www.microsoft.com/windows/products/...e8/default.mspx
Dieses "Nachbessern" kannst Du dann alleine mit Conditional Comments lösen, da auch "Browserversionen" angegeben werden können.

Zurück zur Tabelle: Höhe angeben, Breite angeben, Rand angeben, dann Zellen mittels TD und TR aufbauen. Verlangt zwar in PHP zwei Zähler, aber ist schnell zu lösen und vor allem ziemlich Browser-unabhängig.
 
QUOTE Hauptproblem bei Rahmen mit gewissen "Breiten" (1 px, usw) ist meines Errachtens ob ein Browser den Rahmen zur Breite hinzuzählt oder die Breite des divs ohne Rahmen rechnet. IE verhält sich da anders wie Firefox. Opera und Firefox verhalten sich übriges konform.

..

Es ist wichtig diesen Fehler zu verstehen und dann zu erkennen, welche Dinge man am besten NICHT mit divs macht, weil divs mit Internet-Explorer nicht unbedingt konform dargestellt werden




QUOTE
Ist eigentlich irrelevant, wenn man was mit divs machen muss/möchte, dann sollte man das auch tun, egal welchen Browser der Benutzer verwendet...

Dafür gibt es ja diese tollen Browserweichen für den IE (die auch nur der IE versteht, aber das reicht ja auch aus).


Solche CSS-Basis-Attribute werden in *allen Browsern* gleich dargestellt. Tipps wie DIVs vermeiden und Browserweichen sind unnötig ...

Wichtig ist: Lasst den Internet Explorer im Standard-Konformen Modus laufen. Das könnt ihr mit dem DocType steuern.


Probiers z.B. mal mit XHTML:

CODE <!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="en" lang="de">

 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben