• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Stylsheets einbinden, Hacks, 3 Browser...ach ich packs nimmer

Status
Für weitere Antworten geschlossen.
J

JasperMill

Neues Mitglied
Hallo ihr Altruisten,

nachdem ich nun versucht habe mich an verschiedenen Stellen zum Thema stylesheets zu belesen bin ich mit meinem Latein am Ende.

The Challenge:
Ich habe eine Seite die in Opera, IE und FF jeweils unterschiedliche Stylesheets benötigt. Soweit so gut...als ich nur mit IE und OP getestet habe, habe ich folgenden Hack benutzt...


für Opera:
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/stylesheet_op.css" title="res 1280 x 960" />


und den Hack für IE:
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen, projection" href="css/stylesheet_ie_1280x960_v5_index.css" title="1280 x 960" /><![endif]-->


und alles war in Butter...bis ich FireFox benutzt habe...ich sage nur grausam...
Ich bin also losgesurft auf der Suche nach FF oder OP Hacks. Dachte einen schließte jetzt aus...denkste, nischt jefunden.
Dann auch noch über diese @import Geschichte gestolpert und ganz die Peilung verloren.



Meine Fragen:

1. was ist Sauberer @import oder meine Methode, oder ist Beides gut? Wo ist der Vorteil?

2. Wie bringe ich alle drei Browser unter einen Hut? Und das ohne krumme Dinger, und gegen jede W3C Regel. Einfach elegant eben.

Danke Leute.

Gruss Jasper
 
JasperMill schrieb:
für Opera:
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/stylesheet_op.css" title="res 1280 x 960" />
Zum Vergrößern anklicken....
Ich habe noch nie eine extra css-Datei für Opera verwendet. Ich prüfe aber auch nur Opera9 und der macht kaum Probleme. Wenn es denn noch nötig ist, reichen vielleicht auch Selektorenhacks in der standard.css.
Eine Tabelle für Selektorenhacks: CSS Filter Browserweiche per CSS
und den Hack für IE:
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen, projection" href="css/stylesheet_ie_1280x960_v5_index.css" title="1280 x 960" /><![endif]-->
und alles war in Butter...bis ich FireFox benutzt habe...ich sage nur grausam...
Ich bin also losgesurft auf der Suche nach FF oder OP Hacks. Dachte einen schließte jetzt aus...denkste, nischt jefunden.
Dann auch noch über diese @import Geschichte gestolpert und ganz die Peilung verloren.
Zum Vergrößern anklicken....
Am Besten geht man umgekehrt vor. Man schreibt nach den Regeln des w3c css und prüft mit Firefox + Opera (nicht im Qirksmode). Wenn es beide gleich anzeigen, wird es wohl richtig sein. Wie man css-Dateien nur für IE einbindet weißt du ja.
Mit @import kann man css-Dateien in andere stylesheets laden.
Entweder Zwischen <style type="text/css"> und </style> oder in eine externe css-Datei.
2. Wie bringe ich alle drei Browser unter einen Hut? Und das ohne krumme Dinger, und gegen jede W3C Regel. Einfach elegant eben.
Zum Vergrößern anklicken....
Opera und Firefox verhalten sich recht nahe am Standard. Für die braucht man keine getrennten css-Dateien (wenn der Doctype richtig geschrieben ist).
Die Internet Explorer sind nun mal krumme Dinger und so muß man sie behandeln.
Andere Browser und Validatoren berücksichtigen das ja nicht, weil du die css-Einbindung als Kommentar versteckt hast: <!-- und -->


Es sind nicht nur drei. Außer Internet Explorer, Mozilla(gecko) und Opera
kommt noch khtml dazu (Konqueror/Safari). Denen kann man aber allen eine gemeinsame css-Datei anvertrauen (außer IE 5-6 und manchmal auch 7). Unter IE5 hat das eh alles keinen Zweck und uralte Netscapes sind mir auch egal.
 
Zuletzt bearbeitet:
Hallo neuroleptika,

recht herzlichen Dank für die Hinweise...der Nebel beginnt sich zu lichten.
Interessant finde ich deine Aussage zum gleichen Anzeigeverhalten von OP und FF. Bei mir ist es so, dass FF so gar nicht mit der css von OP klar kam. Wenn Du sagst, dass die relativ nah bei einander liegen, welcher DocType ist denn dann der richtige? Wäre ja ein Traum, wenn ich die Beiden damit gebändigt bekäme. Ich verwende diesen in meinen .php Dateien

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

ich hatte mir da mal was rausgesucht, was plausibel und ordentlich für mich aussah und habe eingebaut.

PS: alle anderen Browser werde ich auf Grund ihrer derzeit geringeren Verbreitung vorläufig ignorieren. Hab die Faxen mit den Gängigsten schon dicke.

PS:PS: (Ergänzung) Ich hab etwas in der Index Datei gearbeitet und heute meinen FF gestartet und siehe da...Du hast Recht neuroleptika...warum auch immer, aber die Seite wird fast richtig angezeigt...nur die rechte der drei Spalten und weiter unten ein Teil werden noch nicht richtig positioniert. Leider aber auch nur auf dieser einen Seite...Ich werde da dann wohl deinen Tip aufgreifen und mit kleinen Hacks an den jeweiligen Stellen arbeiten. Womit ich zur Frage komme wie man das nun machen kann? Ist das denn auch die richtige Vorgehensweise, im html Code etwas einzubauen...? Ich werde wahrscheinlich etwas an der Reihenfolge der schließenden Divs machen müssen, um es gleich aussehen zu lassen. Aber wie kann man dem einen Browser sagen, dass Div schließt hier, während der Andere es erst an späterer Stelle erkennen soll?

noch eine Neuerung: habe jetzt für FF einen Hack gefundenen der funktioniert...

<link rel="extra-keyword stylesheet" type="text/css" href="css/stylesheet_ff_v5_index.css"/>

ist zwar bescheuert...aber es klappt halt...und ich muss nur noch rausfinden, wie man das schließende Div vor dem FF versteckt. Weiß das Jemand?

Gruss Jasper
 
Zuletzt bearbeitet:
JasperMill schrieb:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Zum Vergrößern anklicken....
Diese Doctype ist ungeeignet. IE6 verwendet Standartmodus und Opera Quirks (welche Versionen weiß ich nicht).
Sowas muß man auch nicht wissen, Es sei denn mann ändert alte Seiten.

So arbeiten alle Browser im Standartmodus:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
PS:PS: (Ergänzung) Ich hab etwas in der Index Datei gearbeitet und heute meinen FF gestartet und siehe da...Du hast Recht neuroleptika...warum auch immer, aber die Seite wird fast richtig angezeigt...nur die rechte der drei Spalten und weiter unten ein Teil werden noch nicht richtig positioniert. Da werde ich dann wohl deinen Tip aufgreifen und mit kleinen Hacks an den jeweiligen Stellen arbeiten. Womit ich zur Frage komme wie man das nun machen kann? Ist das denn auch die richtige Vorgehensweise, im html Code etwas einzubauen...?
Zum Vergrößern anklicken....
Opera9 und Firefox2 sind supermoderne Browser die brauchen eigentlich fast nie Hacks. Schreib es am besten von Anfang an so, das es die beiden so Anzeigen wie es aussehen soll (in eine externe css-Datei).

Nur für die Internet Explorer würde ich eine weitere CSS schreiben.
In dieser css kannst du mit Selektorenhacks einzelne IE-Versionen ansprechen.

So ist es sauber und man kommt am besten durch.
 
Hi,

Zitat von neuroleptika:
Opera9 und Firefox2 sind supermoderne Browser die brauchen eigentlich fast nie Hacks. Schreib es am besten von Anfang an so, das es die beiden so Anzeigen wie es aussehen soll (in eine externe css-Datei).

Nur für die Internet Explorer würde ich eine weitere CSS schreiben.
In dieser css kannst du mit Selektorenhacks einzelne IE-Versionen ansprechen.

So ist es sauber und man kommt am besten durch.
Zum Vergrößern anklicken....

Kann man nur unterstreichen.:)

FF und Opera interpretieren die Webstandards richtig, der IE leider nicht so sehr.

Wegen IE-Hacks guckst du hier.
 
Hallo,

ich habe deine DocType ausprobiert und nur unbedeutende Störungen auf der Seite bemerkt...das kriege ich hin...leider sind meine OP zu FF Probleme noch immer da.
Mein Plan... ich werde diese Doctype behalten und die Störungen beseitigen.
Dann werde ich in meiner Basis css (die für OP und FF) an der Stelle wo es mir die 3 Spalten Struktur im FF zerhaut einen kleinen FF Hack setzen. (Erklärung: ich habe die mittlere Spalte für OP auf 65% Breite gesetzt...FF braucht aber 64% Breite sonst verrutscht die rechte Spalte)
Weißt Du da eine Lösung, sprich den Code den ich in der css an diese Stelle setzen kann um dem FF eine andere Breit zu geben?

Das einzige Problem was dann noch bleibt ist das ich das Div in der Indexdatei einmal vor dem FF verstecken muss. Wie das nun wieder geht?

Gruss Jasper
 
Hi,

JasperMill schrieb:
Hallo,

ich habe deine DocType ausprobiert und nur unbedeutende Störungen auf der Seite bemerkt...das kriege ich hin...leider sind meine OP zu FF Probleme noch immer da.
Mein Plan... ich werde diese Doctype behalten und die Störungen beseitigen.
Dann werde ich in meiner Basis css (die für OP und FF) an der Stelle wo es mir die 3 Spalten Struktur im FF zerhaut einen kleinen FF Hack setzen. (Erklärung: ich habe die mittlere Spalte für OP auf 65% Breite gesetzt...FF braucht aber 64% Breite sonst verrutscht die rechte Spalte)
Weißt Du da eine Lösung, sprich den Code den ich in der css an diese Stelle setzen kann um dem FF eine andere Breit zu geben?

Das einzige Problem was dann noch bleibt ist das ich das Div in der Indexdatei einmal vor dem FF verstecken muss. Wie das nun wieder geht?

Gruss Jasper
Zum Vergrößern anklicken....

liest du dir eigentlich durch was wir dir für Hilfestellung anbieten.

Der FF braucht keine Hacks und verstecken muss man auch nix vor dem (höchstens vor dem IE).

Wenn der FF Fehler zeigt, hast du sie beim coden/layouten gemacht, wahrscheinlich weil du das Boxmodell nicht richtig verstanden hast.
 
Hallo koslowski,

klar lese ich das und ich nehme auch jeden guten Ratschlag an...

ich habe auch schon daran gedacht, das etwas mit den DIV Boxen nicht hinhaut. Wenn aber OP und FF gleich anzeigen sollten, warum macht OP was es soll und FF stellt den Abschnitt in voller Breite dar?
Ergo dachte ich kann man dieses kleine Problem über eine Extraanweisung für FF in der css lösen. Natürlich habe ich auch schon versucht das </DIV> zu versetzen und bin dabei nicht weiter gekommen. Einer stellts immer falsch dar. Sorry wenns Dich ärgert, aber glaub mir mich wurmt es auch langsam... und wie bekomme ich hin, selbst wenn ich das DIV Problem löse, das die Spaltenbreite von FF und OP gleich angezeigt wird?

Gruss Jasper
 
Zuletzt bearbeitet:
Du hast bestimmt irgendwo einen Fehler drin.
Wenn du jetzt anfängst einen Fehler mit Hack für einen Standardkonformen Browser auszugleichen, wirst du den Fehler immer mitschleppen. Irgendwann kommt der IE8, Firefox3 und so weiter. Man sollte nur Fehler der älteren Browser ausgleichen.
Mein Tip:
Färbe die Boxen mit Hintergrundgrafiken ein (nicht mit border makieren).
Messe die Größe der Elemente mit einem Bildschirm-Lineal und vergleiche die Ergebnisse mit den Angaben der css.
Den IE lasse erstmal links liegen.
Die Internet Explorer haben die meisten Fehler. Allerdings sind diese auch am bekanntesten und eine Lösung findet man dem Entsprechend leicht.
 
Hallo neuroleptiker,

ja Du hast schon wieder Recht...es waren Fehler drin. Damit hatte kowalski auch Recht...Ich habe zum einen zwei schließende DIVs im Code zuviel...hab ich entfernt...und dann war da noch ein Problem mit der Reihenfolge der Divs am Ende des Codes...Jetzt stellen alle drei Browser den letzten Abschnitt der Seite gleich breit dar...toll! Ich habe einfach mal eine Übersicht der öffnenden und schließenden Div Boxen aufgezeichnet und dann Änderungen getestet...thats it.

Jetzt muss ich nur noch raus finden, wie ich FF und OP dazu bringe die Breite der mittleren Spalte gleich zu interpretieren... der IE wollte da erstaunlicher Weise keine extra Wurst haben. (Nachtrag...lag an der Breitenangabe in der CSS habe diese angegeben und somit interpretieren OP und FF gleich)

Übrigens @all... Ihr glaubt ja gar nicht, wie froh ich bin für den FF nicht auch noch eine extra css mitschleifen zu müssen...thanks a lot for that!




Gruss Jasper
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben