Webseite in verschiedenen Browsern

[Schimi1983]

hi, vor 2Jahren (ca.) hjab ich einen anbieter entdeckt (kann auch vor einem Jahr gewesen sein, ich weiss es halt net mehr genau) wo man seine URL eingeben konnte und dann perr mail (oder als weiterleitung) screenshots geliefert bekommen hat wie die eigene Webseite auf verschiednenen Browsern und Betribssystemen aussah.

Kennt jemand diesen anbieter auch? weil ich ahbeleider keine URL mehr und nach lanegr suche auch nix gefunden. Nun weiss ich auch icht ob dieser Anbieter schonwieder Offline gegangen ist mit seinem Angebot

[Nase]

Sowas hier http://www.danvine.com/iecapture/ ?

Hmm, scheint gerade nicht zu funktionieren, schade.

[TryPod]

Hallo,

ein Webdesigner sollte IMO bereits beim coden darauf achten, dass seine Seiten von verschiedenen Browsern gleich dargestellt werden. Wegen der immer neuen Sicherheitslücken in den IE-Versionen steigen nicht wenige auf Mozilla / FireFox und Opera um.

Als Windows-User hat man ja kinderleicht die Möglichkeit, die "drei großen" Browser parallel zu installieren.

So mache ich es beispielsweise bei meinen Pages: Ich habe Opera 5.12, Opera 7.5x, IE 6 und FireFox 0.8 installiert. Jede Seite sehe ich mir während des Codens kurz mit den verschiedenen Browsern an.

So hat sich z. B. mit den anfänglichen Opera 7.x-Versionen gezeigt, dass Opera teilweise <table>-Tags ignoriert. So ist jeder Tabellenzelle konsequent falsch nach oben verlagert worden. Auch <tr valign="bottom"> oder <tr valign=middle"> wurden konsequent ignoriert. Ein ansonsten ausgeklügeltes Seitenlayout wurde von Opera völlig falsch dargestellt. Erst in den aktuellen Opera-Versionen 7.5x ist das geändert worden.

Wie das dann nachher von Mac- oder Amiga-Browsern dargestellt wird, weiß ich zwar nicht. Aber offen gesagt vernachlässige ich das. Denn

1. habe ich in Ermangelung eines Mac-Rechners eh keine Möglichkeit, das zu testen.

Und 2. Hätte ich keinen Bock, die Page, die dann endlich online gegangen ist, wegen relativ weniger User, die mit einem Mac unterwegs sind, alles nochmal zu ändern. Ich habe bereits auf alle nennenswerten Windows-Browser optimiert.

[dav133]

Das ging mal hier (http://de.webmasterplan.com/cgi-local/router.cgi?l=de&p=wmpde&s=opt_browser), vllt. auch bald wieder.

[govou]

Wenn man gleich ordentlich codet, sollte man sowas garnicht benötigen :eyes:

Ansonsten: http://webmasterplan.de

[Nase]

Nur gut, dass ihr alle wisst, wie man auf Anhieb solchen Code schreibt, mit dem "alle" Browser klarkommen und ihn so darstellen, wie man sich das vorgestellt hat.
Ich bewundere euch.

[mictasm]

Ich auch, Hut ab!

[Schiller]

Das ist denen bestimmt angeboren oder so. :crazy:

[Mordred]

Original geschrieben von Mr.B
Wenn man gleich ordentlich codet, sollte man sowas garnicht benötigen :eyes:

Ansonsten: http://webmasterplan.de

Was heisst für dich ordentlich? Mein heissgeliebter IE kommt teilweise nichtmal mit validem CSS richtig klar :> Soll ich das dann riechen mit was er grad nicht klarkommt?
Auch mit validem html hatte ich mit dem IE schon Probleme...

Wegen dem genialen Teil musste sich sogar Linux verabscheiden damit ichs auf dem mistding testen kann...

Ist schon schön wenn man von anderen Leuten hört das die komplett valide site die man wochenlang zusammengeschustert hat unter dem IE aussieht wie ein schlag ins gesicht :>

Soviel zu ordentlichem code...

[TryPod]

Original geschrieben von Nase
Nur gut, dass ihr alle wisst, wie man auf Anhieb solchen Code schreibt, mit dem "alle" Browser klarkommen und ihn so darstellen, wie man sich das vorgestellt hat.
Ich bewundere euch.
Original geschrieben von mictasm
Ich auch, Hut ab!
Original geschrieben von Schiller
Das ist denen bestimmt angeboren oder so. :crazy:
Deswegen benutzen clevere und erfahrene Webdesigner auch keinen Editor. Solche Editoren verfügen nur über WYSIWYG-Fenster, bei denen nicht von vornherein klar ist, ob nachher auch der Browser alles richtig darstellt.

Wie man es besser und cleverer macht? Mit FireFox z. B., für den es das absolut geniale MozEdit-PlugIn gibt, kostenlos versteht sich. Das ist ein komfortabler Editor, der wahlweise in einem Extra-Fenster, einer Sidebar oder einem Tab geöffnet werden kann. So kann man sich sofort "live" im Browser ansehen, ob das, was man da gerade verzapft hat, auch was taugt.

Es ist doch nicht schwer, sauberen XHTML zu coden. Damit will ich überhaupt nicht angeben. Im Gegenteil, da gibt es gar nichts anzugeben, weil das ziemlich einfach ist.

Da es FireFox mit dem HTML-Code genauer nimmt, als z. B. der IE, kann man davon ausgehen, dass das, was der FireFox korrekt anzeigt, auch im IE funktioniert. Der IE ist - ...naja, sagen wir mal "toleranter".

Einzige mir bekannte Ausnahme, bei denen FireFox, Opera und IE teilweise völlig andere Ergebnisse zeigen, sind bestimmte Frames-Anordnungen.

Ich mache es so, dass ich mit FireFox und MozEdit code und dann in unregelmäßigen Abständen IE und Opera starte und mir das gecodete ansehe. Bislang keinerlei Probleme.

Ich will jetzt nicht behaupten, ich sei super clever oder so. Meine Vorgehensweise ist doch naheliegend. Wie hier schon gesagt wurde: ein guter Webdesigner weiß, was funktioniert und wo es Probleme geben kann.

[Mordred]

ähm :> Mutig sowas Nase zu unterstellen =)

btw. ich schreib xhtml 1.1 und Css2 und selbst wenn beides Valid ist hast du teilweise völlig unterscheidliche ausgaben vorallem macht der ie eineige sachen die völlig unverstädnlich sind. Und das kam schon sehr oft vor.

Im übrigen benutze ich keinen wysiwyg editior sionder proton

bei nase und den andren werdens mit höchster wahrscheinlchkeit auch handcode programme sein.

[Black-Scorpion]

Ich nehme auch nur Proton.
Auch wegen der Syntaxhervorhebung ist er sehr praktisch (nicht nur für HTML).

[-=sUn's*shAdoW=-]

ich arbeite immmer mit phase5, auch per hand, hab aber auch kompatibilitätsprobleme, wenn der code valid ist.

cu

[dav133]

Notepad11111111111111111111

Alles andere sind weicheier...

Nee, notepad ist praktisch wegen rechtsklick->QC anzeigen ;)

[Nase]

Original geschrieben von -=sUn's*shAdoW=-
ich arbeite immmer mit phase5, auch per hand, hab aber auch kompatibilitätsprobleme, wenn der code valid ist.

cu Du kannst es ja auch nicht ;D :asshole: Kleiner Scherz...


Ansonstens kannst du, TryPod, von mir mit Sicherheit nicht behaupten, dass ich WYSIWYG-Editoren benutze. Ich hab diese Dinger alle ausprobiert (ok, schon ein paar Jahre her) und das Ergebnis war immer total mies. Seitdem schreibe ich alles in HTML-Editoren (wenns schnell gehen soll sogar nur im Windows-Editor). Zudem will ich behaupten, dass du das Verhalten der verschiedenen Browser nicht bei jedem Code von Anfang an voraussehen kannst. Was FireFox an Ausgaben erzeugt schliesst nicht darauf, dass das das Non-Plus-Ultra ist und jeder andere Browser das auch so machen muss.

Um nochmal zum eigentlichen Thema zurück zukommen. Solche Programme, die Screenshots von den Internetseiten auf verschiedenen Browsern machen, sind eigentlich eine recht praktische Sache. Nicht jeder hat die Möglichkeit, mehrere Browser auf einem System zu installieren, vor allem wenn es um mehrere Versionen des IEs geht.

[-=sUn's*shAdoW=-]

Original geschrieben von Nase
Du kannst es ja auch nicht ;D :asshole: Kleiner Scherz...


Kein Scherz, nur die Wahrheit.

[Schiller]

Wenn wir schon dabei sind:

wieso interpretiert FireFox "bordercolor=123456" nicht wie der IE? :|

Wie kann man für FireFox farbige Ränder bestimmen?

THX!

[imagine]

Original geschrieben von Schiller
wieso interpretiert FireFox "bordercolor=123456" nicht wie der IE? :|
Es gibt kein Attribut namens bordercolor.
Original geschrieben von Schiller
Wie kann man für FireFox farbige Ränder bestimmen?
Wenn du alle 4 Ränder die gleiche Farbe geben willst, zB mit "border-color:#123456;"

[Nase]

bodercolor ist für die Rahmenfarbe von Frames zuständig. Ob es das noch gibt, ka, mir auch egal, ich brauch sowas nicht.

[Capt'N Coax]

Original geschrieben von [KoC]Mordred
ähm :> Mutig sowas Nase zu unterstellen =)

btw. ich schreib xhtml 1.1 und Css2 und selbst wenn beides Valid ist hast du teilweise völlig unterscheidliche ausgaben vorallem macht der ie eineige sachen die völlig unverstädnlich sind. Und das kam schon sehr oft vor.

Im übrigen benutze ich keinen wysiwyg editior sionder proton

bei nase und den andren werdens mit höchster wahrscheinlchkeit auch handcode programme sein.

Ack.
HTML zu schreiben ist größtenteils zum Kotzen. Ein einziges Rumgeeiere zwischen zig Möglichkeiten und Pseudostandards. Was bringen Standards, wenn jeder sie anders interpretiert?

Klar, wenn man einmal den Dreh raus hat ist es nicht schwer (x)HTML(Whatever) zu schreiben. Aber man benötigt durchaus Erfahrung, um die kleinen Mankos und "Nicht-Standards" jedes Browsers korrekt zu umschiffen.
Es ist ziemlich dreist zu behaupten, mit "sauberem" w3c-konformen HTML automatisch alle Probleme gelöst zu haben und den Leuten mangelnde Kenntnisse zuzuschreiben.

HomepageBau war für mich schon immer interessant, aber extrem nervig gewesen. Diese ganze Webgeschichte war halt nie auf Multimedia ausgelegt.

[Schimi1983]

ich baue mir erstmal die Webseite mit Dreawaver und/oder Flash zusammen (je nachdem was ich mache) undd ann teste ich ob es so aussieht wie ich mir a sgedacht hab.

Icha rbeite meistens eh irgendwie komisch *G

[Schiller]

Original geschrieben von Nase
bodercolor ist für die Rahmenfarbe von Frames zuständig. Ob es das noch gibt, ka, mir auch egal, ich brauch sowas nicht.

Nee, ich meinte <table border=1 bordercolor=#000000..............>

Im IE ist der Rahmen schwarz und im FireFox standard. ;(

[Schiller]

Hab's jetzt mit CSS gelöst. :)

[ravage]

Es gibt halt viele Sachen, grad bei CSS, die der IE und auch einige ältere Browser nicht richtig anzeigen. Nur als kleines Beispiel hier mal das Boxmodell:

http://css4you.de/wsboxmodell/index.php#browser

Sobald man einen Padding Wert benutzt und eine Breite angibt, sieht es auf dem IE schon wieder ganz anders aus. Pixel-Perfektes Design kann man somit schon wieder vergessen.

[TryPod]

Hallo,

ich glaube, dass das, was ich in meinem letzten Posting hier im Thread schrieb, falsch rübergekommen ist. Habe es eben nochmal durchgelesen und es könnte tatsächlich falsch rüberkommen. Deshalb hier ein Zusatz: Ich unterstelle hier niemandem, dass er nicht clever sei. Und ich habe auch niemanden direkt angesprochen. Auf die (IMO ironischen) Kommentare á la "Ich bewundere euch" habe ich geantwortet, dass clevere Webdesigner eben keine HTML-Editoren benutzen. Das ist für Anfänger vielleicht eine Option, für erfahrene Webdesigner nicht.

Ich selbst habe lange Zeit ausschließlich Windows Notepad als "Editor" benutzt. Nicht, weil Notepad vielleicht besonders komfortabel ist ( - das ist es ganz sicher nicht), sondern einfach, um zu sehen, dass ich es kann. Das setzt natürlich voraus, dass man weiß, was man tut. Inzwischen benutze ich MozEdit.

FireFox nimmt HTML-Code genauer als IE. Das ist nicht nur auf irgendwelchen privaten Homepages immer wieder zu sehen, sondern auch auf "professionellen". Deshalb kann man durchaus von folgendem ausgehen: Wenn FireFox HTML richtig darstellt, dann ist die Wahrscheinlichkeit sehr hoch, dass auch der IE es tut. Der umgekehrte Fall ist weit weniger wahrscheinlich, da IE ganz gern auch unmotiviert zusammengeschusterten Kram korrekt darstellt.

Besonderheiten bei der unterschiedlichen Darstellung ein und desselben Codes durch unterschiedliche Browser hat ein Webdesigner schnell raus. Drei popelige Beispiele:

1. Wenn man mit <ul> eine Aufzählung beginnt, dann stellt der IE die Aufzählungszeichen per default als runden Punkt dar. Anders ist es bei FireFox.

2. Table-Tags wurden von den anfänglichen Opera-Versionen teilweise ignoriert.

3. Besondere Frame-Anordnungen werden von IE, Mozilla und Opera nach wie vor teilweise komplett anders dargestellt.

Das sind Kleinigkeiten, die ein Webdesigner nach kurzer Zeit weiß. Dass es trotzdem unumgänglich ist, seine Seiten von Zeit zu Zeit mit verschiedenen Browsern zu betrachten, habe ich ja schon klargestellt.



@ all

Ein schönes Beispiel dafür, wie eine vermeintlich gut gecodete Page nur von IE und Opera gut dargestellt wird, mit Mozilla / FireFox jedoch katastrophale Mankos aufweist, ist diese hier:

http://www.pixelfly.net/01_home.php



@ Schiller

FireFox stellt bodercolor sehr wohl dar, allerdings anders als der IE. Während man beim IE die Rahmenfarbe z. B. noch unterteilen kann in bordercolordark und bordercolorlight, geht das so beim FireFox nicht.

Erstell mal eine ganz neue HTML-Seite und dann benutz das hier, um es im IE und im FireFox anzeigen zu lassen:

<table border="1" bordercolor="red" width="200" height="100">
<tr>
<td>
test
</td>
</tr>
</table>

oder

<table border="1" bordercolor="red" width="200" height="100" cellspacing="0" cellpadding="0">
<tr>
<td>
test
</td>
</tr>


EDIT: Bevor hier jetzt jemand auf die Idee kommt, mir zu erzählen bordercolor="red" sei Müll, da wennschon bordercolor="#FF0000", dann der kurze Hinweis: das ist der Einfachheit und der sofortigen Erkennbarkeit halber hingeschrieben. :)

[imagine]

Original geschrieben von TryPod
Ein schönes Beispiel dafür, wie eine vermeintlich gut gecodete Page nur von IE und Opera gut dargestellt wird, mit Mozilla / FireFox jedoch katastrophale Mankos aufweist, ist diese hier:

http://www.pixelfly.net/01_home.php
Von gut gecodet kann da keine Rede sein. Trotzdem hab ich beim Überfliegen keine großen Unterschiede zwischen Opera und Firefox sehen können.

Original geschrieben von TryPod
FireFox stellt bodercolor sehr wohl dar
Es gibt kein Attribut namens "bordercolor".
Der Tabelle einen roten Rahmen zu verpassen lässt sich folgendermaßen: table {border-color:#F00;}
Ich nehm an genau das hat Schiller auch getan.

[-=sUn's*shAdoW=-]

Original geschrieben von imagine
Es gibt kein Attribut namens "bordercolor".
Der Tabelle einen roten Rahmen zu verpassen lässt sich folgendermaßen: table {border-color:#F00;}
Ich nehm an genau das hat Schiller auch getan.

bla?

http://de.selfhtml.org/html/frames/eigenschaften.htm#farbig

bzw.

http://de.selfhtml.org/html/tabellen/gestaltung.htm#farbrahmen

:kratz2:

cu

[Nase]

Er meint wohl eher, dass das Attribut nie zum HTML-Standard gehört hat.

[govou]

Genau. Guckstu: http://www.w3.org/TR/html401/index/attributes.html

[-=sUn's*shAdoW=-]

Original geschrieben von Nase
Er meint wohl eher, dass das Attribut nie zum HTML-Standard gehört hat.

Hörte sich für mich anders an, sorry ;)

[TryPod]

Hallo,

so, wie es hinter dem zweiten Link von -=sUn's*shAdoW=- erklärt wird, habe ich es seinerzeit gelernt, nämlich dass bordercolor im <table>-Tag zulässig ist ( http://de.selfhtml.org/html/tabellen/gestaltung.htm#farbrahmen ) Dass dies nicht zum HTML-Standard gehört, ist o.k., hab' wieder was dazugelernt. :) (Nichtsdestotrotz funktioniert es ganz vorzüglich im IE und auch brauchbar im FireFox. ;) Bei Opera habe ich es noch nicht ausprobiert.)


Zu der Seite, die ich oben erwähne ( http://www.pixelfly.net/01_home.php ) habe ich mal Screenshots gemacht. Ein Screenshot ist mit dem IE gemacht, ein anderer mit Opera und der dritte mit FireFox (bei mir stellt Firebird es genauso dar wie FireFox):

Screenshot mit IE 6: http://mitglied.lycos.de/knallfrosch30/fotosklein/pixelflyie.jpg

Screenshot mit FireFox 0.8: http://mitglied.lycos.de/knallfrosch30/fotosklein/pixelflyfirefox.jpg

Screenshot mit Opera 7.50:http://mitglied.lycos.de/knallfrosch30/fotosklein/pixelflyopera.jpg

Es fällt auf, dass beim Screenshot mit FireFox am oberen Bildschirmrand ein freier Bereich ist (Hintergrund-Farbverlauf beginnt nicht ganz oben). Dann ist auffällig, dass die einzelnen Bereiche der Seite mit schwarzen, feinen Linien voneinander getrennt sind. Außerdem sind im mittleren Hauptbereich überall feine, helle waagerechte Linien zu sehen. Firebird 0.7 stellt es übrigens genauso dar.

[Black-Scorpion]

Bordercolor ist eine M$ (IE) Erfindung und sollte nicht verwendet werden.
Wer seine Tabellenrahmen Farbig haben will soll es auch richtig (mit CSS) machen.


<table style="border-width:1px; border-style:solid; border-color:#000000;>

oder
<html><head>
<style type="text/css">
<!--
.tabelle { border-width:1px; border-style:solid; border-color:#000000; }
-->
</style>
</head>
<body>
<table class="tabelle"><tr><td>....</td></tr></table>
</body></html>

[Nase]

Einfacher geht es natürlich, die border-Attribute zusammen zufassen:

<!--
.tabelle { border: 1px #000 solid; }
-->

[Black-Scorpion]

Stimmt
Aber so ist es besser zum erklären. ;)