Browser-Hack für Firefox 3 (nur FF3 auswählen)

[--Sirius--]

Hallo,

ich habe festgestellt, das sich der FF3 auf meiner Webseite an einer Stelle genauso verhält wie der IE7 und 6. Für den IE hab ich das Problem über jeweils einen Browser-Hack korrigiert, sodas überall das selbe angezeigt wird.
Nun kenn ich aber keinen Hack für den Firefox 3. Ich kann mir das Problem, nämlich zuviel Platz zw. dem Menü und dem Inhalt, auch nicht erklären. Das Problem hat wohl was mit dem Padding und dem Margin in der Menü-Leiste zu tun. Den Fehler habe ich dann nämlich über ein negatives Margin behoben (siehe in der CSS-Datei fast ganz unten).

Wisst ihr vielleicht Rat? Wie kann ich nur den FF3 auswählen?

Die Webseite: http://www.uni-konstanz.de/un-netzwerk/

PS: oder könnte es sein, das dies ein Bug im FF3 ist und in der finalen Version nicht mehr auftritt?

 

[TchiboMann]

Hm, zuersteinmal würd ich dir raten nicht UTF-8 als Transfer encoding zu nutzen, sondern ISO-8859-1 bzw. 15... soweit ich weiss haben einige Browser des nich gern des UTF-8...

Zum anderen: Warum entwickelst du auf FF3? Ich würde mich nicht wundern, wenn du deshalb deine Seit mehr verbuggst als nötig.

Mein Rat: FF2 oder Opera zum entwickeln nutzen, speziell auf diese Browser entwickeln. Die sind nunmal relativ Standard-Konform. Danach solltest du erst fixen, und NIEMALS sämtliche Fixe in derselben CSS-Datei aufbewahren, wie der FF/Opera diese auch sehen können. Ich trau dem nie. Und schon gar keine Alpha/Beta-Browser zum Entwickeln nutzen.

Lagere die IE-Fixes immer aus in separate CSS-Files, und lade sie mit:

<!--[if lt IE 7]><link href="css/style-iefixes.css" rel="stylesheet" type="text/css"><![endif]-->

Aber mal zu deinem Problem...

Mir ist aufgefallen, dass du zwar ein DIV-Element #header hast, diesen aber im CSS-Style nie klar definierst. Du definierst immer nur die Kind-Elemente. Ich denke dass da dein Problem liegen wird. Gib dem Header-Element eine fixe höhe (dein Header wird sich denk ich mal kaum in der Höhe ändern ). Du hast an einigen Stellen auch viele Leerzeichen als Einrückmethode statt Tabs gesetzt. Das solltest du auch rauskillen.

Was du besser noch verändern solltest: Gib der Seite eine feste breite, keine min/max-variable. Ist zwar extrem Elegant, wenn mans richtig einsetzt, aber es nervt uns Designer nur, da entweder der HTML-Code oder der CSS-Code nicht valide ist, weil man Hacks nutzen muss. Oder nutze wenigstens Dean Edwards IE Fixes: http://dean.edwards.name/IE7/ dann kannste praktisch die ganzen dämlichen IE6-Fixes in den allermeisten Fällen in die Tonne kloppen, der IE6/7 maxwidth-fix ist hier definitiv mit drin.

Achja, und nutze mehr Div-Elemente und richte diese möglichst nur per Margin aus. Nutze weniger Padding, wenn du Probleme mit IE vermeiden willst. Ist zwar unschön, aber so vermeidet man ganz gut des fixen. Vermeide negative Margins - damit umgehen können meines Wissens nach nur FF ab 1.5 bis 2.0.x.x sowie Opera; Netscape, IE6/7 haben des öfteren Probleme damit. Kann ich n lied von singen...

Sind so meine Erfahrungen die ich gemacht hab.


Oder - ganz alternativ: erzwing mit PHP eine Errormeldung ala "IE6-User sind hier nicht willkommen". Bin schon am überlegen, ob ich das nicht bei meinen Seiten so mache, da der IE7 wesentlich bequemer dazu zu bringen ist eine seite korrekt anzuzeigen...

 

[Adagio]

Zum Problem ... Firefox 3 ist noch immer keine fertige Endversion, daher solltest du Fehler erstmal ignorieren.

Hm, zuersteinmal würd ich dir raten nicht UTF-8 als Transfer encoding zu nutzen, sondern ISO-8859-1 bzw. 15... soweit ich weiss haben einige Browser des nich gern des UTF-8...

Das ist einfach nur großer Unsinn. Es ist eher das Gegenteil zu empfehlen, nämlich UTF-8 zu benutzen - und kein einziger Browser hat Probleme damit.

@--Sirius--: Das einzige, was zu beachten wäre in der Hinsicht, ist dass man die Dokumente in UTF-8 ohne BOM speichert, weil das zu Problemen mit PHP führen kann (sofern man es nutzt). Das solltest du ändern.

chja, und nutze mehr Div-Elemente und richte diese möglichst nur per Margin aus. Nutze weniger Padding, wenn du Probleme mit IE vermeiden willst

Wieder das Gegenteil - der IE hat sehr viele margin-Fehler, wodurch man die entweder durch Zusatzangaben in einem CC beheben oder halt über den Umweg von paddings lösen kann.

Du hast an einigen Stellen auch viele Leerzeichen als Einrückmethode statt Tabs gesetzt. Das solltest du auch rauskillen.

Das kann jeder handbaben, wie er möchte. Ich nutze auch Tabs, aber gegen Leerzeichen spricht auch nichts.

 

[--Sirius--]

Danke euch beiden für die Tipps.

Ich habe die Hacks nicht in eine extra CSS-Datei ausgelagert, da ich dadurch einen HTTP-Request verhindern möchte, um die Seite nicht zu verlangsamen. Bin mir aber nicht sicher, ob das wirklich einen Effekt hat.

Ich habe mein Problem nun beseitigen können! Es lag tatsächlich daran, das ich die per "php include" eingebundene Datei mit BOM abgespeichert hab. Nämlich selbst nachdem ich CSS deaktiviert hatte, war der Abstand immer noch da. Nun geht aber alles und ich konnte noch zwei Hacks entfernen. :-)

Nebenbei hab ich auch noch wie empfohlen ein paar Paddings entfernt, die unnötig waren.

Das mit der Fehlermeldung an alle IE6-Benutzer habe ich auch schon überlegt aber das würde ja dann so aussehen als wenn ich keine Herrausforderungen annehmen würde. Sozusagen wie ein Schön-Wetter-Spieler. ;-)