Darstellungsfehler in Browsern
learner
- css
0 wahsaga0 Fabian St.0 learner
0 Ingo Turski0 learner0 Ingo Turski0 Cyx23
Hallo!
Es geht um folgende Seite:
http://www.veralis.de/baf2/test01.htm
Ich habe da nun folgendes Problem: Die Ansicht in den verschiedensten Browsern ist sehr unterschiedlich, namentlich die Breite der einzelnen Container, und ich weiss nicht warum. Es wird wohl ein Padding/ Border -Problem sein.
Hintergrund: Ich habe mich durch Kai Laborenz Werk "CSS-Praxis" durchgearbeitet (Kann ich nur empfehlen!) und habe "Tanteks Hack" nun zum ersten mal eingesetzt.
Für Tipps bin ich sehr dankbar, habe jetzt schon viel versucht...
Karsten
hi,
Es geht um folgende Seite:
nächstes mal bitte </faq/#Q-19> berücksichtigen, danke.
Für Tipps bin ich sehr dankbar, habe jetzt schon viel versucht...
bitte validiere deine seite erst einmal, da sind noch einige fehler drin: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.veralis.de%2Fbaf2%2Ftest01.htm
z.b. werden tag- und attributnamen in XHTML klein geschrieben.
gruß,
wahsaga
Hi!
Es geht um folgende Seite:
http://www.veralis.de/baf2/test01.htm
Ich habe da nun folgendes Problem: Die Ansicht in den verschiedensten Browsern ist sehr unterschiedlich, namentlich die Breite der einzelnen Container, und ich weiss nicht warum. Es wird wohl ein Padding/ Border -Problem sein.
Behebe doch erstmal deine XHTML Fehler (siehe http://www.veralis.de/baf2/test01.htm) und validiere dann dein Stylesheet. Vielliecht ist der Fehler dann schon behoben.
Außerdem: In XHTML müssen alle Tags und Attribute _klein_ geschrieben werden.
Grüße,
Fabian St.
Hallo!
Danke für den Tipp, da war ich wohl etwas schluderig...
Ich habe jetzt die Dateien - bis auf den Hack von Tantek - so weit valide gemacht (=überprüft) - es funktioniert aber immer noch nicht richtig:
In IE 5.01 zerschiesst er mir komplett den "container".
In IE 6.0 ragt der obere container "picoben" über die seite hinaus
In NN 7.1, Opera und iE 5.5 ist es in Ordnung
NN 4.x, safari, etc. interessiert mich für diese Seite nicht. Woran könnte es liegen? Könnt Ihr Euch vielleicht mal meinen "Hack" angucken? Habe ich da was falsch gemacht? Ohne den Hack sehen die Seite eigentlich in Ordnung aus, aber da schwankt dann natürlich die Breite der ganzen Seite.
Karsten
Hi,
In IE 5.01 zerschiesst er mir komplett den "container".
das könnte an unpassenden Korrekturen oder Problemen mit padding liegen.
In IE 6.0 ragt der obere container "picoben" über die seite hinaus
hier stimmt wohl eine Weitenangabe nicht. Schmeis doch zuerst mal Deine Tantek-Hacks raus, die ja offensichtlich (IE5.01) ohnehin nicht funktionieren. Außerdem passt das Menü nicht.
In NN 7.1, Opera und iE 5.5 ist es in Ordnung
Nö. In meinem Mozilla und Opera wird der Inhaltsbereich unter das Menü platziert und im Mozilla auch die Umrahmung nicht wie gewünscht angezeigt. Übrigens fehlt eine Hintergrundfarbe für body.
freundliche Grüße
Ingo
Hi,
Hintergrund: Ich habe mich durch Kai Laborenz Werk "CSS-Praxis" durchgearbeitet (Kann ich nur empfehlen!) und habe "Tanteks Hack" nun zum ersten mal eingesetzt.
nur leider ist der hier fehl am Platz, denn der IE6 durchschaut diese Konstruktion. Da Du vermutlich das falsche Box-Modell damit korrigieren willst, funktioniert das nur noch im IE 5.x.
Der IE6 verwendet zwar endlich das korrekte Box-Modell, aber nur dann, wenn er im standards-compliant mode arbeitet. Durch Deinen xml-Prolog versetzt Du ihn aber in den abwärtskompatiblen quirks mode, wo er dann dieselben Korrekturen wie seine Vorgänger benötigt.
Um es vielleicht konkreter zu fassen:
Wenn der IE6 im quirks mode arbeitet, mußt Du andere CSS-Weichen, z.B. den Kindselektor verwenden.
Wenn er im standards-compliant mode arbeitet, ist wiederum Tantek sinnvoll, da dieser Hack nur die Vorgängerversionen beeinflußt.
freundliche Grüße
Ingo
Hallo!
Das ist ja n Ding, da hat der gute Kai nix von geschrieben.. Vielen Dank, in die Richtung habe ich noch gar nicht gedacht.
funktioniert das nur noch im IE 5.x.
=> Im 5.01 funktioniert es auch nicht! Hast Du eine Ahnung warum?
O.K., dann kann ich das ja jetzt mal von der ganz anderen Seite angehen. Was spräche denn in dem konkreten Fall gegen Conditional comments für IE 6.0? Hast Du damit schon Erfahrungen gesammelt? Oder würdest Du mir empfehlen, auf HTML "zurückzuschrauben" - XHTML ist im konkreten Fall eigentlich nicht unbedingt notwendig.
Falls Du mir zu XHTML weiter rätst: Hast Du vielleicht einen konkreten Tipp, welcher Kind-Selektor sich da eignet (#container>#content; oder wie schreibt man das? Oder hast Du einen Link, wo ich mich selbst schlau machen kann? Laborenz gibt mir da nicht genug Futter...
Karsten
Hi,
Das ist ja n Ding, da hat der gute Kai nix von geschrieben.. Vielen Dank, in die Richtung habe ich noch gar nicht gedacht.
Tja, ich kenne sein Buch nicht und auf seiner Homepage, wo ich gerade mal war, konnte ich nichts hierüber entdecken. Mir cheint, daß er die Browserentwicklung nicht aufmerksam genug verfolgt oder hast Du vielleicht eine Uralt-Version, zu deren Zeit der IE6 noch nicht auf dem Markt war?
Schon vor 1 bis zwei Jahren konnte man in diversen Foren über die Probleme der Rendering-Modes i.V. mit CSS-Hacks lesen und viele Seiten mußten umgstellt werden.
=> Im 5.01 funktioniert es auch nicht! Hast Du eine Ahnung warum?
der Tantek-Hack selbst funktioniert im IE 5.x, d.h. die hierdurch verborgenen Korrekturen werden von diesen Browsern ignoriert. Wenn bei Deiner Seite Probleme bestehen, sind entweder die außerhalb dieses Hacks (und damit für die alten IEs sichtbaren) Definitionen unpassend oder - wenn es nur im IE 5.01 nicht geht - benötigt dieser spezielle Anpassungen.
Was spräche denn in dem konkreten Fall gegen Conditional comments für IE 6.0?
Nichts. Im Gegenteil: Du kannst hiermit ganz einfach und gezielt besimte IE-Versionen ansprechen.
Hast Du damit schon Erfahrungen gesammelt?
Ist die Methode, die ich meist einsetze - außer für kleinere Korrekturen, für die ich je nach dem Rendering-Mode des IE den Kindselektor oder eben den Tantek-Hack (der mir eigentlich überhaupt nicht gefällt, aber der AFAIK die einzige CSS-Weiche ist, die zuverlässig den IE6 von den älteren Versionen trennt.
Falls Du mir zu XHTML weiter rätst: Hast Du vielleicht einen konkreten Tipp, welcher Kind-Selektor sich da eignet (#container>#content)
Nein! dies führt im im Ie 5.0 dazu, daß "#container>" einfach ignoriert wird und die folgenden Definitionen für #content angewendet werden. Ist mir schon vor einiger Zeit aufgefallen, aber das scheint bisher noch nicht groß rumgesprochen zu haben.
Verwende stattdessen die Kindselktor-Weiche immer in der Form:
html>body #content {}
bzw. mit den jeweilig verwendeten Selektoren.
freundliche Grüße
Ingo
Hallo,
...] einen konkreten Tipp, welcher Kind-Selektor sich da eignet (#container>#content; oder wie schreibt man das? Oder hast Du einen Link, wo ich mich selbst schlau machen kann? Laborenz gibt mir da nicht genug Futter...
da kann als Browserweiche auch der fehlende Abstand vor und nach dem Selektor bedeutsam sein; zu CSS-Weichen findest du z.B. hier Informationen http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html, und weitere Beispiele auch mit conditional comments hier: http://www.lipfert-malik.de/webdesign/tutorial/css.html, etwas umfangreicher.
Grüsse
Cyx23