✔ Webseite auf verschiedene Browser optimieren

Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
hab mal wider ne Webseite die in allen Browsern unterschiedlich angezeigt wird.
In Safari und Opera wird auf der Startseite das Bild verschoben. Auf den Beitragsseiten werden auch die Bilder verschoben, hier jedoch nur um ca. 5px. Für mich sieht es zumindest bei der Startseite so aus als ob das Bild nicht aus dem Objektfluß genommen wurde.
Das andere ist, unter Kontakt habe ich die Formularfelder mit Margin von der Position an einander angepasst. Das sieht auch in jedem Browser anderst aus. Hier sieht das ja nach diesem Boxmodellfehler aus. Ich dachte eigentlich das es den nciht mehr gibt unter dem IE 8.

Wäre super wenn sich das mal jemand ansehen könnte und mir ein paar Tipps geben könnte?

Viele Grüße
 
Zuletzt bearbeitet:
Hi,

mein erster Eindruck beim Simultanflug mit vier Browsern über die Seite: die Formular-Eingabefelder in der Kontaktseite sind in allen Browsern treppenartig verrutscht.

Und von welchem verschobenen Bild auf der Startseite ist hier im Safari und Opera die Rede?

Mir zeigen sie das "Logo" oben rechts an derselben Stelle an, wie Firefox und IE8.

mfg Maik
 
Hi,
also ic hhab mir grad die Seite auch im FF unter Windows angeschaut und da tauchen die Fehler auch auf.
Also auf der Startseite ist normalerweise ein großes Hintergrundbild.
Im FF aufm Mac wird alles richtig angezeigt nur aufm Mac Safari, Opera und Windows IE udn FF hab ich die Probleme.
Was mir grd noch aufgefallen ist, ist das das Logo rechts Oben etwas abgeschnitten wird.

Auf der Startseite sind auch im Quellcode ncoh Tabelllen udn einige DIVs drinnen die ich heir eigentlich nicht brauche. Da muß ich mir noch was einfallen lassen wie ich das rausbekomme. Das wird über das CMS eingebunden.

Viele Grüße
 
Zuletzt bearbeitet:
Nimm's mir bitte nicht übel, aber wenn lediglich ein Browser aus dem großen Pool die Seite nach deinen Vorstellungen präsentiert, ist das dann wohl sowas wie ein Glücksfall, und um dein CSS ist es nicht sonderlich gut bestellt, denn grundlos interpretieren standardkonforme Browser einen CSS-Code nicht falsch.

Üblicherweise schlagen hier im Forum die User auf, weil einer der Browser aus der Reihe tanzt, den man in seine Schranken weisen soll. Bei dir verhält es sich aber genau entgegengesetzt, sind es derer zumindest schon mal die hier vier genannten Vertreter, zu denen sich sicherlich noch weitere gesellen dürften, wie z.B. neben FF (Win) seine "Gecko-Kollegen" (Mozilla, Netscape, Seamonkey).

Und wo sollen wir da jetzt für dich den Hebel ansetzen?

Vielleicht siehst du deine bisherige Arbeit besser als gescheiterten Versuch an, und setzt das Konzept von grundauf nochmal neu auf.

mfg Maik
 
Hi Maik,
heute so krass drauf :) .
Die Sachlage hat mich mit den Browsern hat mich ja auch etwas verwundert.
Ich habe das heute auch noch hinbekommen das es auf diesen Browser sogut wiegleich aussieht.
Mit meinem CSS war es auf jedenfall nciht so schlimmbestellt das es notwendig gewessen wäre nochmal von vorne anzufangen. Mal davon abgesehen das ich dafür keine Zeit habe.
Was das Bild auf der Startseite betrifft so scheint die Tabelle die da vom CMS eingefügt wurde das Problem gewessen sein. Und bei den Kontaktfeldern hab ich Label auf Inline-Block gesetzt, noch eine Breite mitgegeben und das MArgin gelöscht. Somit war das auch gegesen.

So morgen muß ich mir das Ding dann ncoh mal aufm IE 6 anschauen :). Da freu ich mich schon drauf.

Viele Grüße und eine schöne Nacht
 
Ich hab dir das jetzt auch nicht übel genommen.

Aber wie schon geschrieben habe ich da noch zwei problemchen mit dem IE6 bzw. IE7. Und ich komm nicht so ganz dahinter welcher Bug für die beiden Fehler verantwortlich ist. Andere habe ich korrigiert bekommen.
Also einmal werden eben die Zahlenmenüs zerschossen weil ich da ohne nede gefloatet und gecleard habe. Das andere ist das unter Info>Kontakt der Hover auf dem Logo rechts oben nicht funktioniert obwohl er sonst auf den anderen Seiten funktioniert. Und ich hab hier das Logo mit der gleichen Technik eingebunden. Was auch nicht so ganz schön ist ist das anscheinend durch den Google PNG Fix im IE6 das Signet nach unten ganz knapp verdoppelt wird. Naja ist nicht ganz so schlimm aber wens ne Lösung gibt ;).

Viele Grüße
 
Hi,

was die zerschossenen Menüs betrifft, solltest du mal schauen, wo sich evtl. eine float-Regel durch display:inline ersetzen lässt, und ob die clear-Angaben an den richtigen Stellen im Markup gesetzt sind.

Vielleicht greift hier auch in einer gewissen Form das hasLayout.

Der Hover-Ausfall auf der einen genannten Projektseite könnte mit dem "IE Link bug" (siehe http://www.daltonlp.com/view/217) zusammenhängen, der sich bei gewissen Bilddimensionen der PNG-Grafik einstellt, und da auf den übrigen funktionstüchtigen Seiten ein andere Bilddimension verwendet wird, lässt dies die Annahme zu.

mfg Maik
 
Hi,
ich hab da ne Frage bezüglich des clearens. Wenn ich nun z.B. ein a-Element floate in dem sich ein img-Element befindet. Kann ich dann das clear auch schon dem img mitgeben oder hatt es erst eine Wirkung wenn ich es einem Element mitgebe das sich nach dem geschlossenen a befindet?
Was den IE Ling Bug betrifft, da kann ich wohl nur raudfinden welche Größe da funktioniert wenn ich es ausprobiere, oder?
Die Liste auf der Seite des Linkes den du geschrieben hattest geht ja leider nur bix 10px.

Viele Grüße
 
Moin,

das "Clearing" erfolgt nach dem Floaten, und nicht darin.

Da die tabellarische Übersicht bis 10px reicht, interpretiere ich sie so, dass der Bug bei allen Dimensionen auftritt, die darüber hinausgehen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück