Verschiedene Browseransichten einer WS

mephista · 11.08.2009

Hallo, ich habe mal ne Frage...
Und zwar wie kommt es, wenn man eine Ws programmiert, dass sie in den verschiedenen Browsern unterschiedlich dargestellt wird?

Ich meine, im IE schaut sie aus, wie sie aussehen soll.
Im FF, Safari, Opera etc. verscheibt, verändert sich immer etwas.

Woran kann das genau liegen und was muss man beim Programmieren beachten, dass das nicht vorkommt?

Würde mich über eure Antworten und Hilfe dazu sehr freuen!

Lieben Dank und Gruß

Mephista

RASPUTIN200 · 11.08.2009

AW: Verschiedene Browseransichten einer WS

Leider,
liegt es an der Interpretation der Elemente und den Parametern.
Ich bin seit 2000 in dem Bereich tätig und Wir haben oft mehrere Seiten gebaut um ein gleichmäßiges Aussehen in allen Browsern und Versionen zu erhalten.
Es gibt kompatibilitäts Listen welche Browser welche Befehle unterstützt.
Für CSS findest du das z.B. im CSS-Praxisbuch von Markt und technik oder
bei Selfhtml.org .
Ansonsten hilft nur Testen Testen testen.
Ich hoffe dir etwas weiter geholfen zuhaben.

Mario72 · 11.08.2009

AW: Verschiedene Browseransichten einer WS

Hallo
Benutzt du zufällig eine ältere Version des IE?
Denn eigentlich sieht es meistens im FF und Opera so aus, wie es sein sollte (wenn auch nicht immer).
Wie mein Vorredner schon schrieb, werden die Elemente nicht immer gleich interpretiert.

Ich habe mir deshalb die drei gängigsten Browser installiert, um schon bei der Erstellung zu sehen, ob es irgendwo unterschiedliche Darstellungen gibt.

Grüße
Mario

kalifrago · 11.08.2009

AW: Verschiedene Browseransichten einer WS

ich schliesse mich da meinen vorschreibern an, ich teste auch immer gleich von anfang an in verschiedenen browsern und habe die erfahrung gemacht, dass es im ff so aussieht wie ich das möchte und der ie stellt es öfter ein bisschen anders da....da hilft einfach probieren und testen

auch die oben genannten links sind sehr hilfreich....es gibt einfach keine verallgemeinerung, was man machen kann, damit es auf anhieb immer gleich aussieht

mephista · 11.08.2009

AW: Verschiedene Browseransichten einer WS

Vielen Dank für eure Antworten und die Links

Ich benutze den neuen IE.
Habe aber auch den neuen Firefox drauf, um die Ansicht in beiden Browsern zu testen.
Nur manchmal wachsen mir eben graue Haare, wenn ich sehe, dass es im IE so ist, wie ich es im dreamweaver definiert habe und im FF aber anders angezeigt wird!
Verstehen tu ich das ganze nicht so wirklich. Dass trotz definitionen unterschiedliches rauskommt.
Aber naja da heißt es immer wieder und wieder testen testen testen...

Danke

anoX · 11.08.2009

AW: Verschiedene Browseransichten einer WS

Ich habe die Erfahrung gemacht, wenn man auf Validität achtet und die Site auch entsprechend programmiert, dazu Boxen verwendet und genau rechnet, ist in den meisten Fällen die Ansicht in allen Browsern gleich.

Wenn überhaupt, muss ein png-fix eingebaut, oder ein paar weniger Abstände extra für den IE umgeschrieben werden.

Will also heißen - je valider die Site - desto weniger Arbeit machen die "Korrekturen" für die anderen Browser.

Übung macht also den Meister. ^^

kalifrago · 11.08.2009

AW: Verschiedene Browseransichten einer WS

also mich nervt das auch, dass man nicht einfach denselben standard benutzen kann :rolleyes:

ich denke das liegt einfach daran, dass ie eben microsoft ist und ff und die anderen eben nicht microsoft :lol: warum soll sich der gute bill an andere sachen anpassen ? :lol:

mephista · 11.08.2009

AW: Verschiedene Browseransichten einer WS

HAllo Anox, was meinst du genau mit Validität und Boxen (div container?) ?
Sorry, bin noch Neuling...

@ Kalifrago: warum soll sich der gute bill an andere sachen anpassen ?
Ja warum auch? *grins*

Lg Mephista

stroyer · 11.08.2009

AW: Verschiedene Browseransichten einer WS

Vermeide auf jeden Fall border; Manche Browser rechnen diese um ein Element, mache in eines.

RASPUTIN200 · 12.08.2009

AW: Verschiedene Browseransichten einer WS

Hallo mephista,
Validität bedeutet nur ob der Quelltext den anforderungen entspricht, z.B.:
ist irgenwo in Javascript ein Leerzeichen zuviel, in html eine klammer zuwenig usw.usw.
wir ein tag nicht richtig geschlossen. Bei w3c findest du z.B. einen Validator für css der online deinen Quelltext prüft und dir die Fehler benennt.

Es ist teilweise sinnvoller, und in Dreamweaver sollte es möglich sein schon in den Grundeinstellungen zu sagen das der Text sich genau an die w3c vorgaben halten soll.
Ich persönlich teste Seiten in Firefox, IE, Safari und Bitte einen Bekannten Sie auf seinen Mac auch anzusehen selbst dort kann es zu Veränderungen kommen. Es sollte auch nicht vergessen werden das der Nutzer durch eigene Browsereinstellungen dein Design zerrupfen kann. Passiert gerne bei nicht üblichen Schriften die im Design verwendet werden und er nicht hat, oder hat große schriften aktiviert weil er gerne ohne Brille im www unterwegs ist. Teste lieber in einer älteren Version weil du dann sicher sein kannst das sie auch im neuesten Browser sauber läuft. Testest du nur im neuesten kann es schwierig werden in älteren versionen.

Viel Spass beim üben, lernen und basteln.
lg
Rasputin200

stroyer · 12.08.2009

AW: Verschiedene Browseransichten einer WS

Selbst wenn du dich an die Regeln hältst - die meisten Browser tun es nicht. Ich arbeite meistens mit positionierten DIVs und da hatte ich noch nie das Problem, dass es in einem anderen Browser anders dargestellt wird.

injected23 · 12.08.2009

AW: Verschiedene Browseransichten einer WS

es kommt aber auch bei positionierten divs zu verschiebungen

@mephista:

also ich mache es umgekehrt.. ich entwickle meine seite für ff weil ich in dem zuge gleich safari und die meisten unix browser im groben im kasten habe.. außerdem finde ich das anpassen an den ie leichter als andersrum..
danach schaue ich mir die seite im ie an und schreibe für alles was mir nicht passt überladene klassen/ids in ein entsprechendes seperates stylesheet (in meinem fall der übersichtlichkeit halber immer iesucks.css genannt

)
soll jetzt kein angriff auf micro**** sein.. is nur meine persönliche meinung..

was dir in diesem zuge noch bewusst sein sollte ist dass du klassen (.) oder ids (#) von css eigenschaften überladen kannst!
ich versuch das mal mit einem beispiel der immer wieder gern gesehenen png transparenz zu zeigen:

Code:

.start_marked{ //für mozilla & co
     position   : absolute;
     height     : 200px;
     width      : 50px;
     left       : 20px;
     background : url (img/start_Active.png);
}

* html .start_marked{ //extrawurst für ie
    left          : 10px;
    background    : none;
    filter        : progid:DXImageTransform..AlphaImageLoader(src='img/start_Active.png', sizingMethod='scale');
}

* html sorgt dafür dass die folgenden deklarationen nur vom ie gelesen werden.. d.h. mozilla und co ignorieren sie und verwenden den anderen tag..
da dieser aber auch vom ie gelesen wird ist es nur nötig die eigenschaften zu überladen welche geändert werden sollen... (in diesem fall background und left)

-> im mozilla wird das png einfach eingebunden und das gesamte objekt ist 20px vom nächsten rand entfernt

-> im ie wird zunächst das background attribut auf none gesetzt und anschließend das png mit dem microsoftalphaimageloader so umgewurstelt dass es auch so funktioniert wie es soll.. (ist ab version 7 übrigens endlich behoben worden..)
außerdem ist das element nun im ie nur 10px vom nächsten rand entfernt..

und wenn du testest.. dann nimm zusätzlich zu einem aktuellen ie auch noch den 6.0er dazu

der ist nämlich standardmäßig bei xp installiert und leider auch noch am weitesten verbreitet...

hoffe das hilft dir weiter...

greez

ben