SebastianJu: Browserkompatibilität austesten...

Hallo,

welche Möglichkeiten hat man denn eigentlich auf einem einzigen Rechner die verschiedenen Browser, hauptsächlich IE zu testen? Ich hatte mal Multiple-IE installiert aber wieder deinstalliert. Ich glaube weil das wohl nicht wirklich genau das gezeigt hatte wie es in dem jeweiligen Browser der Fall ist.

Im Moment kann ich auf meinem Win2k-Rechner auf Firefox 2,3, Opera, Mozilla und IE6 testen. Ich würde aber auch gern den IE7 über meinen Rechner testen können. Kann ich aber nicht installieren wegen Win2k. Außerdem gibt es ja wohl nur einen IE pro Rechner.

Gibt es eine Möglichkeit ohne dass ich immer auf anderen Rechnern noch nachschauen muss was da nicht passt?

Grüße!
Sebastian

  1. Hallo,

    vielleicht hilft dir ja http://browsershots.org/ weiter. :)

    Markus

    --
    1. Nicht schlecht die Seite... Sieht gut aus... Ich hoffe mal das wird von den originalen Browsern erstellt damit das garantiert passt. Aber erstmal sieht das so aus.

      Übrigens falls jemand mal nicht weiß auf welche Browsertypen und Versionen er anpassen soll:

      http://www.webhits.de/deutsch/webstats.html

      Ist ziemlich detailliert und hat meinen Chef schon davon überzeugt auf IE6 zu optimieren. Bisher war er der Meinung dass schon die meisten den IE7 nutzen...

      Grüße!
      Sebastian

      1. Nicht schlecht die Seite... Sieht gut aus... Ich hoffe mal das wird von den originalen Browsern erstellt damit das garantiert passt. Aber erstmal sieht das so aus.

        Sieh her, was dort steht, wenn du auf Deutsch umgeschaltet hast:
        Zitat:
        Einige verteilte Computer werden deine Webseite in ihrem Browser öffnen. Dann machen sie Screenshots und laden sie hier zum zentralen Server hoch.

        Ist ziemlich detailliert und hat meinen Chef schon davon überzeugt auf IE6 zu optimieren. Bisher war er der Meinung dass schon die meisten den IE7 nutzen...

        Warum müssen Webseiten "optimiert" werden? Wenn man sich and die Syntaxregeln hält, kann man i.d.R. davon ausgehen, dass sie überall so gut wie gleich aussehen.

        markus

        1. Nicht schlecht die Seite... Sieht gut aus... Ich hoffe mal das wird von den originalen Browsern erstellt damit das garantiert passt. Aber erstmal sieht das so aus.

          Sieh her, was dort steht, wenn du auf Deutsch umgeschaltet hast:
          Zitat:
          Einige verteilte Computer werden deine Webseite in ihrem Browser öffnen. Dann machen sie Screenshots und laden sie hier zum zentralen Server hoch.

          Ok, das habe ich übersehen...

          Ist ziemlich detailliert und hat meinen Chef schon davon überzeugt auf IE6 zu optimieren. Bisher war er der Meinung dass schon die meisten den IE7 nutzen...

          Warum müssen Webseiten "optimiert" werden? Wenn man sich and die Syntaxregeln hält, kann man i.d.R. davon ausgehen, dass sie überall so gut wie gleich aussehen.

          Soweit die Theorie... :) Es ist praktisch nie der Fall dass eine Seite, die zB mit FF entwickelt wurde im IE gleich korrekt aussieht. Der Fall ist mir noch nie untergekommen. Und das lag immer an der fehlerhaften Umsetzung durch den IE.

          Grüße!
          Sebastian

          1. Hallo,

            Warum müssen Webseiten "optimiert" werden? Wenn man sich and die Syntaxregeln hält, kann man i.d.R. davon ausgehen, dass sie überall so gut wie gleich aussehen.
            Soweit die Theorie... :) Es ist praktisch nie der Fall dass eine Seite, die zB mit FF entwickelt wurde im IE gleich korrekt aussieht.

            beachte, dass "korrekt" und "korrekt" nicht unbedingt gleich sein muss! Genau das macht doch die Kunst des Webdesigns aus: Dieselbe HTML-Seite mit demselben Stylesheet kann völlig unterschiedlich aussehen, wenn sich die äußeren, vom Autor nicht kontrollierbaren Bedingungen ändern (Fenstergröße, Schriftgröße etc). Dabei können beide Darstellungen völlig korrekt sein.

            Idealerweise lässt man als Autor dem Browser soviel Freiheit, dass er sich an diese unterschiedlichen Gegebenheiten anpassen kann. Ein exakt auf Pixel festzementiertes Layout erfüllt dieses Ideal natürlich nicht.

            So long,
             Martin

            PS: Ja, ich gebe zu: Die mangelhafte CSS-Interpretation des IE lässt einen manchmal verzweifeln, wenn nicht gar verdreifeln.

            --
            Rizinus hat sich angeblich als sehr gutes Mittel gegen Husten bewährt.
            1. beachte, dass "korrekt" und "korrekt" nicht unbedingt gleich sein muss! Genau das macht doch die Kunst des Webdesigns aus: Dieselbe HTML-Seite mit demselben Stylesheet kann völlig unterschiedlich aussehen, wenn sich die äußeren, vom Autor nicht kontrollierbaren Bedingungen ändern (Fenstergröße, Schriftgröße etc). Dabei können beide Darstellungen völlig korrekt sein.

              Idealerweise lässt man als Autor dem Browser soviel Freiheit, dass er sich an diese unterschiedlichen Gegebenheiten anpassen kann. Ein exakt auf Pixel festzementiertes Layout erfüllt dieses Ideal natürlich nicht.

              Keine Sorge. Für Normal programmiere ich deswegen auch fast nur mit em. (Siehe nachfolgender Thread von mir. Die Seite da ist auch nur mit em(bis auf border)) Dadurch passt sich die Seite immer schön dynamisch an.

              PS: Ja, ich gebe zu: Die mangelhafte CSS-Interpretation des IE lässt einen manchmal verzweifeln, wenn nicht gar verdreifeln.

              Ja. Wie eben auch bei meiner Seite. In FF und anderen "normalen Browsern" wird das alels schön dargestellt wie es sein soll. Und was macht der IE? Läßt alles zerfallen. Interpretiert CSS schlicht falsch usw usf.

              Ich weiß nicht wie man das umgehen könnte. Es sei denn man weiß vorher genau was den IE stören könnte und kann das weglassen. Vieles kann natürlich in einer einzigen CSS gelöst werden aber nicht alles. Und das umstellen ist auch nur nötig weil der IE manche Sachen falsch interpretiert.

              Aber das weißt du ja...

              Grüße!
              Sebastian

              1. Ja. Wie eben auch bei meiner Seite. In FF und anderen "normalen Browsern" wird das alels schön dargestellt wie es sein soll. Und was macht der IE? Läßt alles zerfallen. Interpretiert CSS schlicht falsch usw usf.

                der ie6 interpretiert im standardkonformen äusserst wenige essentielle dinge falsch - im quirksmode hingegen schon

                die hauptursache für darstellungsfehler im ie6 sind css-deklarationen, die der ie6 überhaupt nicht versteht - und da verhält er sich völlig standardkonform (er ignoriert sie)

                klar gibts bugs, aber die echten bugs verursachen nur einen winzigen bruchteil der eigentlichen probleme

                1. Ja. Wie eben auch bei meiner Seite. In FF und anderen "normalen Browsern" wird das alels schön dargestellt wie es sein soll. Und was macht der IE? Läßt alles zerfallen. Interpretiert CSS schlicht falsch usw usf.

                  der ie6 interpretiert im standardkonformen äusserst wenige essentielle dinge falsch - im quirksmode hingegen schon

                  die hauptursache für darstellungsfehler im ie6 sind css-deklarationen, die der ie6 überhaupt nicht versteht - und da verhält er sich völlig standardkonform (er ignoriert sie)

                  klar gibts bugs, aber die echten bugs verursachen nur einen winzigen bruchteil der eigentlichen probleme

                  Also Maße sind bei meinen Seiten immer irgendwie falsch im IE. Und das ist nicht regelkonform.
                  Und was das Nichtverstehen angeht... Ob er nun falsch interpretiert oder gar nicht bleibt im Ergebnis gleich... Wieder mal Anpassungen für den IE...
                  Dass er der meistgebrauchte Browser weltweit ist macht die Sache nur umso peinlicher.

                  Grüße!
                  Sebastian

                  1. Also Maße sind bei meinen Seiten immer irgendwie falsch im IE. Und das ist nicht regelkonform.

                    wenn die "maße" falsch sind, dann liegts mit sehr hoher wahrscheinlichkeit an fehlerhaftem code - falls nicht, nenne mir ein beispiel, bei dem es anders ist - ich kann mir nichts darunter vorstellen

                    Und was das Nichtverstehen angeht... Ob er nun falsch interpretiert oder gar nicht bleibt im Ergebnis gleich... Wieder mal Anpassungen für den IE...
                    Dass er der meistgebrauchte Browser weltweit ist macht die Sache nur umso peinlicher.

                    das nicht verstehen ist völlig standardkonform - der ie6 ist gute 7 jahre alt, die layout-engine sogar noch etwas älter

                    da ist es verständlich, dass er technologien, die "jetzt" erst verbreitung findet, nicht versteht - sieh dir opera 5 oder mozilla 0.6 an, die sind in ähnlichen zeiträumen am markt gewesen - bei denen siehts auch so aus

                    das problem ist schlichtweg, dass sich keiner darum schert, weil der brave webentwickler alle features die ein browser nicht kann trotzdem nachbaut

                    min-width kann der ie6 nicht - aber anstelle dem ie6 ein alternativdesign zu liefern, in dem er auf dieses komfortfeature verzichtet, wird krampfhaft versucht, jede seite im jedem browser exakt gleich darzustellen - und das ist bereits im ansatz falsch

                    1. Wegen den Maßen: meine Seite aja7.com

                      Im IE sieht es so aus: http://browsershots.org/http://aja7.com/

                      Nicht einmal IE8 zeigt die obere Navigation richtig an. Wenn auch besser als die Vorgänger. Der I7 zeigt immerhin das restliche Design korrekt an. Beim IE6  ist aber alles zerfallen. Ich schätze mal wegen irgendwelcher Margin/Padding die er wieder mal einfach dazurechnet zu anderen Massen usw usf.

                      Und mein oberes Menü kann ich jetzt wohl auch wieder in eine normale Tabelle umbauen damit der IE es versteht... Eine andere Lösung habe ich nicht gefunden...

                      Grüße!
                      Sebastian

                      1. Wegen den Maßen: meine Seite aja7.com

                        zeige mir ein konkretes beispiel - welches nicht funktioniert

                        beim dem css und html code deiner seite kommt mir das speiben wie man so schon sagt (ernsthaft)

                        Nicht einmal IE8 zeigt die obere Navigation richtig an. Wenn auch besser als die Vorgänger. Der I7 zeigt immerhin das restliche Design korrekt an. Beim IE6  ist aber alles zerfallen. Ich schätze mal wegen irgendwelcher Margin/Padding die er wieder mal einfach dazurechnet zu anderen Massen usw usf.

                        der code ist zwar valide, aber du hast den sinn von html, css und semantik nicht verstanden deine hammerharte div-suppe KANN garnicht richtig funktionieren - allein das herumgeschleudere mit tabellen-eigenschaften für unzählige divs ist ein graus

                        du kannst gut 50% deines markups reduzieren - das von dir gewählte layout ist extrem einfach - da ist NICHTS drinnen, was der ie6 bei vernünftiger programmierung (ja, html und css programmiert man nicht) nicht versteht

                        Und mein oberes Menü kann ich jetzt wohl auch wieder in eine normale Tabelle umbauen damit der IE es versteht... Eine andere Lösung habe ich nicht gefunden...

                        eine tabelle ist keine lösung - du verwendest momentan eine tabelle, nur mit anderem markup - da besteht thoretisch kein unterschied - zudem ist das irre

                        wie man listen zu menus formatiert: hier gibts beispiele
                        http://css.maxdesign.com.au/listamatic/

                        auch wenn der rat von mir heute schon recht oft gekommen ist, auch an dich

                        wirf deinen code weg und machs neu - beginne von aussen nach innen mit der grobstuktur der seite und teste zwischen durch in allen browsern (ohne dass du auch nur daran denkst, alternativstylesheets zu verwenden)

                        ernsthaft: du hast mehr text für klassen aufgewendet, als du eigentlich nutztext hast

                        das ganze ist wie microsoft hilfe: technisch korrekt (valide) aber vollkommen nutzlos

                        <div id="header"></div>
                        <ul id="menu">[...]</ul>
                        <ul id="menu2">[...]</ul>
                        <div id="inhalt"></div>
                        <div id="related"></div>
                        <div id="teaser"></div>

                        rechtviel mehr html wirst du für die grobsturktur der seite nicht brauchen

                        wie gesagt: wenn du tatsächlich etwas findest (in einem einfachen, kontrollierbaren szenario), wo verschiedene browser unter exakt gleichen voraussetzungen eine maßeinheit (zb pixel) anders interpretieren als andere, bin ich beindruckt - das kommt sehr selten vor

                        1. Yerf!

                          Auch wenn ich dir im großen und ganzen Recht gebe und der Code auch eine schöne DIV-Suppe gewürzt mit 5 HTML-Fehlern ist...

                          Hier muss ich dir widersprechen:

                          eine tabelle ist keine lösung - du verwendest momentan eine tabelle, nur mit anderem markup - da besteht thoretisch kein unterschied - zudem ist das irre

                          Auch wenn das Markup für das horizontale Menü gerne eine Liste wäre, was spricht gegen den Einsatz von display:table (mit Workaround für IE)? Oder wie würdest du diese Darstellung (gleichmäßiges Verteilen ohne fixe Breite) realisieren? vermutlich garnicht...

                          Gruß,

                          Harlequin

                          --
                          <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
                          1. Auch wenn das Markup für das horizontale Menü gerne eine Liste wäre, was spricht gegen den Einsatz von display:table (mit Workaround für IE)? Oder wie würdest du diese Darstellung (gleichmäßiges Verteilen ohne fixe Breite) realisieren? vermutlich garnicht...

                            was spricht dagegen, das menu als liste zu struktieren und dem ul display: table-row zu geben sowie den li-elemente table-cell?

                            1. was spricht dagegen, das menu als liste zu struktieren und dem ul display: table-row zu geben sowie den li-elemente table-cell?

                              Gerade versucht. Klappt nicht... Wegen des Verzichts auf Table gibt es auch keine dynamische Breite...

                              Grüße!
                              Sebastian

                              1. was spricht dagegen, das menu als liste zu struktieren und dem ul display: table-row zu geben sowie den li-elemente table-cell?

                                Gerade versucht. Klappt nicht... Wegen des Verzichts auf Table gibt es auch keine dynamische Breite...

                                das war nicht als tipp für dich gedacht sondern als allgemeine anmerkung - in deinem fall wirds nicht helfen, da der ie6 und 7 schlichtweg keine tabelleneigenschaften unterstüzten - im anderen thread hab ich dir bereits geantwortet mit der meiner ansicht nach besten kompromisslösung

                          2. Hallo Harlequin,

                            Auch wenn ich dir im großen und ganzen Recht gebe und der Code auch eine schöne DIV-Suppe gewürzt mit 5 HTML-Fehlern ist...

                            Damit meinst du vermutlich den Gebrauch von Divs innerhalb von a-tags. Bisher habe ich da noch keine Lösung gefunden da ich einfach viele Elemente in den Link packen will. Den Link als Display:block zu definieren funktioniert scheinbar nicht mehr wenn zu viele weitere Elemente im Link untergebracht sind. Bei einem Div scheint das dann aber kein Problem mehr zu sen.

                            Auch wenn das Markup für das horizontale Menü gerne eine Liste wäre, was spricht gegen den Einsatz von display:table (mit Workaround für IE)? Oder wie würdest du diese Darstellung (gleichmäßiges Verteilen ohne fixe Breite) realisieren? vermutlich garnicht...

                            Kennst du vielleicht einen Workaround? Ich kenne nur:

                            .td{  
                               margin-bottom: -10000px;  
                               padding-bottom: 10000px;  
                               float:left;  
                            }
                            

                            für den IE6 und

                            .td{  
                               margin-bottom: -10000px;  
                               padding-bottom: 10000px;  
                               float:left;  
                               height: 100%;  
                            }
                            

                            für den IE7.

                            Aber das reicht scheinbar nicht aus. Ist zumindest eingebunden.

                            Grüße!
                            Sebastian

                            1. Yerf!

                              Kennst du vielleicht einen Workaround?

                              Ich hätte display:inline-block; (evtl. zusammen mit einer Höhenangabe) verwendet. Das schafft zwar keine gleichmäßige Verteilung, aber mit etwas padding sollte man das halbwegs angeordnet bekommen.

                              Ich kenne nur:

                              .td{

                              margin-bottom: -10000px;
                                 padding-bottom: 10000px;
                                 float:left;
                              }

                                
                              Hm, float ist eigentlich auch eine Variante, aber was sollen diese anderen komischen Werte?  
                                
                              Aber das Hauptproblem scheint sowieso nicht die Liste der Links zu sein, sondern der Container drumherum, der bei IE nicht über die volle Breite geht. Woran das liegt ist allerdings schwer zu sagen, da du derart viele DIVs drumrum geschachtelt hast... (ich hab auch grad die DeveloperTools für den IE nicht installiert um da näher reinzuschauen)  
                                
                                
                              Und noch nebenbei wegen der vielen Klassen: ein externes CSS ist schon richtig, aber es gibt mehr möglichkeiten Elemente zu selektieren als nur über die Klasse oder ID. Vor allem der Nachfahrenselektor kann ein sehr gutes Hilfsmittel sein um den HTML-Code schlank zu halten. (Damit kannst du z.B. alle SPANS in einem anderen Element mit einer bestimmten ID selektieren ohne die SPANS eine Klasse geben zu müssen)  
                                
                                
                              Gruß,  
                                
                              Harlequin  
                                
                              
                              -- 
                              <!--[if IE]>This page is best viewed with a webbrowser. [Get one today!](http://www.opera.com)<![endif]-->
                              
                              1. Yerf!

                                Kennst du vielleicht einen Workaround?

                                Ich hätte display:inline-block; (evtl. zusammen mit einer Höhenangabe) verwendet. Das schafft zwar keine gleichmäßige Verteilung, aber mit etwas padding sollte man das halbwegs angeordnet bekommen.

                                Das Problem ist, das obere Menü muss dynamisch sein. Das heißt es gibt immer eine Liste von 10 Keywords. Die sind unterschiedlich. Dann wird errechnet wie viele Keywords maximal oben hinpassen. Dementsprechend werden nur die reinpassende Anzahl reingeschrieben. Deswegen können keine festen Breiten verwendet werden weil das Ganze sofort nicht mehr passt wenn sich die Anzahl der Keywords ändert sowie ihre Länge. Da das Ganze ja über die gesamte Breite gehen muss...

                                Ich werde damit mal etwas rumtesten.

                                Ich kenne nur:

                                .td{

                                margin-bottom: -10000px;
                                   padding-bottom: 10000px;
                                   float:left;
                                }

                                
                                >   
                                > Hm, float ist eigentlich auch eine Variante, aber was sollen diese anderen komischen Werte?  
                                  
                                Das ist angeblich die Lösung die Div-Tabellen sowohl in IE6 als auch IE7 zum funktionieren bringen soll... Das habe ich von hier: [http://www.webagentur-gebhard.de/know-how/artikel/tabellen-mit-css-simulieren/](http://www.webagentur-gebhard.de/know-how/artikel/tabellen-mit-css-simulieren/)  
                                  
                                
                                > Aber das Hauptproblem scheint sowieso nicht die Liste der Links zu sein, sondern der Container drumherum, der bei IE nicht über die volle Breite geht. Woran das liegt ist allerdings schwer zu sagen, da du derart viele DIVs drumrum geschachtelt hast... (ich hab auch grad die DeveloperTools für den IE nicht installiert um da näher reinzuschauen)  
                                  
                                Ich werde dann auch bald mal die anderen Fehler bereinigen. Vielleicht behebt sich da schon manches. Aber dass die Tabellenzellen untereinander liegen ist wohl das bekannte Problem der IEs. Mal schauen... Zur Not muss ich halt wirklich für alle IEs unter 8 eine Tabelle nehmen. Bei der 8 gibt es noch ein Problem mit der Höhe aber das klappt vielleicht mit einer Höhenangabe...  
                                  
                                
                                > Und noch nebenbei wegen der vielen Klassen: ein externes CSS ist schon richtig, aber es gibt mehr möglichkeiten Elemente zu selektieren als nur über die Klasse oder ID. Vor allem der Nachfahrenselektor kann ein sehr gutes Hilfsmittel sein um den HTML-Code schlank zu halten. (Damit kannst du z.B. alle SPANS in einem anderen Element mit einer bestimmten ID selektieren ohne die SPANS eine Klasse geben zu müssen)  
                                  
                                Eines muss ich ja zugeben. Mein Stylesheet ist diesmal nicht wirklich gelungen. Ich wollte nämlich testen ob es nützen würde gleiche Längen und Breiten einmalig zu definieren. Das wäre auch nützlich wenn auf einen Schlag alle gleichen Maße geändert werden sollen aber in der Praxis ist durch die vielen ID und Klassennamenwiederholungen größer als es sein sollte. Jetzt habe ich aber auch keine große Lust das alles noch mal umzustellen. Schließlich wird das Stylesheet ohnehin nur einmal beim ersten Seitenaufruf geladen.  
                                  
                                Nachfahrenselektoren nutze ich. Es stimmt schon manche Klassen hätte ich weglassen können dadurch. Beim oberen Menü aber zB glaube ich schon wieder nicht weil das erste Element anders ist. Die Klassen finde ich einfach praktisch um schnell zu erkennen um welche Elemente es sich handelt und zB Farben schnell zu setzen. Aber sicher kann man auch weniger Klassen benutzen.  
                                  
                                Grüße!  
                                Sebastian
                                
                                1. Yerf!

                                  Deswegen können keine festen Breiten verwendet werden weil das Ganze sofort nicht mehr passt wenn sich die Anzahl der Keywords ändert sowie ihre Länge. Da das Ganze ja über die gesamte Breite gehen muss...

                                  Naja, ich würdsm wohl so machen, dass ich keine festen Breiten vergeb und nur n bissl Padding damit das ganze nicht aneinanderklebt. Das ergibt zwar keine Verteilung über die ganze Breite, aber wer den IE verwendet darf sich über seltsame Darstellung einfach nicht wundern... (in den anderen Browser passt es ja dank display:table)

                                  Das ist angeblich die Lösung die Div-Tabellen sowohl in IE6 als auch IE7 zum funktionieren bringen soll... Das habe ich von hier: http://www.webagentur-gebhard.de/know-how/artikel/tabellen-mit-css-simulieren/

                                  Hm, die benutzen das für mehrspaltiges Layout, das erklärt einiges. Die Werte sind da, um die gleiche Spaltenhöhe zu erreichen, ein Punkt der bei dir uninteressant ist.

                                  Ich werde dann auch bald mal die anderen Fehler bereinigen. Vielleicht behebt sich da schon manches. Aber dass die Tabellenzellen untereinander liegen ist wohl das bekannte Problem der IEs. Mal schauen... Zur Not muss ich halt wirklich für alle IEs unter 8 eine Tabelle nehmen. Bei der 8 gibt es noch ein Problem mit der Höhe aber das klappt vielleicht mit einer Höhenangabe...

                                  Das Nebeneinander muss eigentlich gehen, allerdings ist der äußere Container natürlich Vorraussetzung. Der muss erst mal volle Breite haben, dann sollte das auch gehen (zumindest soweit ich das im 7er IE gesehen hab, aber auch der 6er kann Float oder display:inline(-block) damit sollte das schon gehen)

                                  Die Klassen finde ich einfach praktisch um schnell zu erkennen um welche Elemente es sich handelt und zB Farben schnell zu setzen. Aber sicher kann man auch weniger Klassen benutzen.

                                  Ich hab Anfangs auch sehr viel mit Klassen gearbeitet aber irgendwann merkt man, dass die Selektoren einen viel Arbeit abnehemen können, wenn man die Verschachtelung der Elemente ausnutzt. Außerdem werden die HTML-Dateien schlanker.

                                  Gruß,

                                  Harlequin

                                  --
                                  <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
                                  1. Yerf!

                                    Deswegen können keine festen Breiten verwendet werden weil das Ganze sofort nicht mehr passt wenn sich die Anzahl der Keywords ändert sowie ihre Länge. Da das Ganze ja über die gesamte Breite gehen muss...

                                    Naja, ich würdsm wohl so machen, dass ich keine festen Breiten vergeb und nur n bissl Padding damit das ganze nicht aneinanderklebt. Das ergibt zwar keine Verteilung über die ganze Breite, aber wer den IE verwendet darf sich über seltsame Darstellung einfach nicht wundern... (in den anderen Browser passt es ja dank display:table)

                                    Naja, das sähe vermutlich nicht wirklich so toll aus. ZB wenn ich ein Padding festlege was dafür passt dass zB 6 kurze Keywords oben reinpasse dann würde das Ganze seltsam aussehen wenn zwei ziemlich lange Keywords von einem dritten gefolgt werden dass aber nicht mehr reinpasst. Dann hätte man rechts viel Platz.
                                    Aber wäre dann wohl so.

                                    Ich frage mich ob es wirklich nachteilig wäre wenn ich für die IEs daraus halt einfach eine richtige Tabelle mache...

                                    Das ist angeblich die Lösung die Div-Tabellen sowohl in IE6 als auch IE7 zum funktionieren bringen soll... Das habe ich von hier: http://www.webagentur-gebhard.de/know-how/artikel/tabellen-mit-css-simulieren/

                                    Hm, die benutzen das für mehrspaltiges Layout, das erklärt einiges. Die Werte sind da, um die gleiche Spaltenhöhe zu erreichen, ein Punkt der bei dir uninteressant ist.

                                    Aha.

                                    Ich werde dann auch bald mal die anderen Fehler bereinigen. Vielleicht behebt sich da schon manches. Aber dass die Tabellenzellen untereinander liegen ist wohl das bekannte Problem der IEs. Mal schauen... Zur Not muss ich halt wirklich für alle IEs unter 8 eine Tabelle nehmen. Bei der 8 gibt es noch ein Problem mit der Höhe aber das klappt vielleicht mit einer Höhenangabe...

                                    Das Nebeneinander muss eigentlich gehen, allerdings ist der äußere Container natürlich Vorraussetzung. Der muss erst mal volle Breite haben, dann sollte das auch gehen (zumindest soweit ich das im 7er IE gesehen hab, aber auch der 6er kann Float oder display:inline(-block) damit sollte das schon gehen)

                                    Mal schauen wie ich das mache.

                                    Die Klassen finde ich einfach praktisch um schnell zu erkennen um welche Elemente es sich handelt und zB Farben schnell zu setzen. Aber sicher kann man auch weniger Klassen benutzen.

                                    Ich hab Anfangs auch sehr viel mit Klassen gearbeitet aber irgendwann merkt man, dass die Selektoren einen viel Arbeit abnehemen können, wenn man die Verschachtelung der Elemente ausnutzt. Außerdem werden die HTML-Dateien schlanker.

                                    Das mit den schlankeren HTML-Dateien stimmt natürlich...

                                    Grüße!
                                    Sebastian

                                    1. Yerf!

                                      Naja, das sähe vermutlich nicht wirklich so toll aus. ZB wenn ich ein Padding festlege was dafür passt dass zB 6 kurze Keywords oben reinpasse dann würde das Ganze seltsam aussehen wenn zwei ziemlich lange Keywords von einem dritten gefolgt werden dass aber nicht mehr reinpasst. Dann hätte man rechts viel Platz.
                                      Aber wäre dann wohl so.

                                      Jo, wirklich schön ist die Lösung nicht.

                                      Ich frage mich ob es wirklich nachteilig wäre wenn ich für die IEs daraus halt einfach eine richtige Tabelle mache...

                                      Mich würde vor allemd er doppelte Pflegeaufwand abschrecken. Da würde ich mich dann vielleicht sogar hinreißen lassen einfach jedem Browser eine Tabelle zu präsentieren und auf 100%ig semantischen Code verzichten.

                                      Ok, es gibt noch eine weitere Variante die alle Browser verstehen, aber die ist auch ein recht übler Hack: die Anordnung von Inline-Elementen per Blockstaz (text-align:justify). Allerdings wirkt Blocksatz nicht auf die letzte Zeile eines Absatzes und somit auch nicht auf eine einzeilige Anordnung. Deswegen muss man per langer &nbsp;-Wurst am Ende der Liste einen Zeilenumbruch erzwingen und diesen evtl. per overflow:hidden am umgebenden Element verstecken... Ob man das noch als "schön" bezeichnen kann bezweifle ich, allerdings hab ich das in einer Intranetanwendung zur Anordnung von Buttons schon verwendet.

                                      Gruß,

                                      Harlequin

                                      --
                                      <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
                                      1. Mich würde vor allemd er doppelte Pflegeaufwand abschrecken. Da würde ich mich dann vielleicht sogar hinreißen lassen einfach jedem Browser eine Tabelle zu präsentieren und auf 100%ig semantischen Code verzichten.

                                        Könnte man auch machen. Relevant ist ja eigentlich dass die Browser auf die es ankommt es auch so darstellen wie es sein soll. Dann ist die Codeform für mich privat eigentlich auch nicht so wichtig. Weil was sollte da noch passieren solange die Browser es richtig machen?
                                        Ob man da von Google abgestraft wird oder ähnliche Sachen bezweifle ich.

                                        Ok, es gibt noch eine weitere Variante die alle Browser verstehen, aber die ist auch ein recht übler Hack: die Anordnung von Inline-Elementen per Blockstaz (text-align:justify). Allerdings wirkt Blocksatz nicht auf die letzte Zeile eines Absatzes und somit auch nicht auf eine einzeilige Anordnung. Deswegen muss man per langer &nbsp;-Wurst am Ende der Liste einen Zeilenumbruch erzwingen und diesen evtl. per overflow:hidden am umgebenden Element verstecken... Ob man das noch als "schön" bezeichnen kann bezweifle ich, allerdings hab ich das in einer Intranetanwendung zur Anordnung von Buttons schon verwendet.

                                        Hm. Das werde ich mir mal ansehen...

                                        Grüße!
                                        Sebastian

                                        1. Yerf!

                                          Ob man da von Google abgestraft wird oder ähnliche Sachen bezweifle ich.

                                          Das nicht, aber man sollte sich auch Gedanken über Barrierefreiheit machen. Gerade bei Screenreadern können Tabellenkonstrukte zu seltsamen Ergebnissen führen. Ich erinnere mich da an eine Vorgabe, dass wenn man schon eine Tabelle nicht für tabellarische Daten verwendet, man zumindest dafür sorgen sollte, das die Tabelle serialisiert vorgelesen einen Sinn ergeben soll. Bei einem Menü seh ich das noch als halbwegs gegeben (eine Liste ist ja nur eine einzeilige Sonderform der Tabelle... ok, als Liste ausgezeichent wär trotzdem besser). Schwieriger wirds, wenn man die Tabelle für das Hauptgerüst von Content, Menü und Header verwendet (oder gleich alles in Tabellen schachtelt).

                                          Gruß,

                                          Harlequin

                                          --
                                          <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
                                          1. Das nicht, aber man sollte sich auch Gedanken über Barrierefreiheit machen. Gerade bei Screenreadern können Tabellenkonstrukte zu seltsamen Ergebnissen führen.

                                            auch wenn eine tabelle sequentiell gelesen halbwegs einen sinn ergibt, hört sich das in jaws dämlich an

                                            frei übersetzt "achtung, jetzt kommt eine tabelle mit 1 zeile und 6 spalten, spalte 1 "foo", spalte 2 "bar" ;) - bei einer menüfürhung bestehend aus einer verschachtelten liste im vergleich zu einer tabelle ist es noch schlimmer ;)

                                            spalte 1 "jetzt kommt eine tabelle mit 1 spalte und 7 zeilen" - da wird man ersthaft gestört - vor allem bei der redegeschwindigkeit (ich hab immer noch nicht kapiert, wo man das umstellen kann bei jaws)

                                            1. Yerf!

                                              frei übersetzt "achtung, jetzt kommt eine tabelle mit 1 zeile und 6 spalten, spalte 1 "foo", spalte 2 "bar" ;) - bei einer menüfürhung bestehend aus einer verschachtelten liste im vergleich zu einer tabelle ist es noch schlimmer ;)

                                              Eine verschachtelte Tabellenstruktur würde ich auch nicht mehr als sequentiell gut lesbar bezeichnen.

                                              Aber ja, in der Hinsicht scheint die Blocksatz-Methode vielleicht doch besser zu sein (oder liest Jaws ein "&nbsp;" vor? Ich hoffe mal nicht...)

                                              Gruß,

                                              Harlequin

                                              --
                                              <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
                                              1. Aber ja, in der Hinsicht scheint die Blocksatz-Methode vielleicht doch besser zu sein (oder liest Jaws ein "&nbsp;" vor? Ich hoffe mal nicht...)

                                                nein, &nbsp; liest das ding in der tat nicht vor ;)

                        2. Wegen den Maßen: meine Seite aja7.com
                          zeige mir ein konkretes beispiel - welches nicht funktioniert

                          beim dem css und html code deiner seite kommt mir das speiben wie man so schon sagt (ernsthaft)

                          Puhhh. Langsam wird das mit dir anstrengend... Offenbar bist du ein viel besserer Programmierer als ich.

                          Nicht einmal IE8 zeigt die obere Navigation richtig an. Wenn auch besser als die Vorgänger. Der I7 zeigt immerhin das restliche Design korrekt an. Beim IE6  ist aber alles zerfallen. Ich schätze mal wegen irgendwelcher Margin/Padding die er wieder mal einfach dazurechnet zu anderen Massen usw usf.

                          der code ist zwar valide, aber du hast den sinn von html, css und semantik nicht verstanden deine hammerharte div-suppe KANN garnicht richtig funktionieren - allein das herumgeschleudere mit tabellen-eigenschaften für unzählige divs ist ein graus

                          du kannst gut 50% deines markups reduzieren - das von dir gewählte layout ist extrem einfach - da ist NICHTS drinnen, was der ie6 bei vernünftiger programmierung (ja, html und css programmiert man nicht) nicht versteht

                          Und mein oberes Menü kann ich jetzt wohl auch wieder in eine normale Tabelle umbauen damit der IE es versteht... Eine andere Lösung habe ich nicht gefunden...
                          eine tabelle ist keine lösung - du verwendest momentan eine tabelle, nur mit anderem markup - da besteht thoretisch kein unterschied - zudem ist das irre

                          wie man listen zu menus formatiert: hier gibts beispiele
                          http://css.maxdesign.com.au/listamatic/

                          Die Links kenne ich. Nutzen mir aber nichts. Die einzelnen Links sollen dynamisch über die ganze restliche Seitenbreite verteilt werden. Und zwar in Anbetracht der Länge der einzelnen Keywords. Wenn du mir passenden Code nennen kannst nur her damit. Schließlich muss ich das ohnehin für den IE umbauen...

                          auch wenn der rat von mir heute schon recht oft gekommen ist, auch an dich

                          wirf deinen code weg und machs neu - beginne von aussen nach innen mit der grobstuktur der seite und teste zwischen durch in allen browsern (ohne dass du auch nur daran denkst, alternativstylesheets zu verwenden)

                          ernsthaft: du hast mehr text für klassen aufgewendet, als du eigentlich nutztext hast

                          Und? Der Sinn besteht nunmal darin dass ein Stylesheet nur einmal geladen werden muss. Wenn das weggelassen würde würde das mehr Code bedeuten. Außerdem kann mit diesen Klassen einfach und komfortabel für alle ihre Elemente eine Eigenschaft geändert werden. Wenn du das nicht so machst wie dann? Doch nicht alles in den normalen Code oder?

                          das ganze ist wie microsoft hilfe: technisch korrekt (valide) aber vollkommen nutzlos

                          <div id="header"></div>
                          <ul id="menu">[...]</ul>
                          <ul id="menu2">[...]</ul>
                          <div id="inhalt"></div>
                          <div id="related"></div>
                          <div id="teaser"></div>

                          rechtviel mehr html wirst du für die grobsturktur der seite nicht brauchen

                          Ich weiß nicht was ich dazu noch sagen kann. Ich glaube dir einfach nicht dass du viel weniger Elemente am Ende hättest als ich. Wenn das selbe Design herauskommen soll.

                          Wie wäre es fürs Erste mit genau dem oberen Menü dass ich haben will? Zeig mal...

                          wie gesagt: wenn du tatsächlich etwas findest (in einem einfachen, kontrollierbaren szenario), wo verschiedene browser unter exakt gleichen voraussetzungen eine maßeinheit (zb pixel) anders interpretieren als andere, bin ich beindruckt - das kommt sehr selten vor

                          Der IE hat Probleme mit padding/margin usw. Bedeutet man braucht andere Maße für ihn.
                          Siehe: http://www.perun.net/2004/07/04/fehlverhalten-von-ie-im-boxmodell/

                          Ich wette dass fast alles was im IE außerhalb des oberen Menüs falsch angezeigt wird auch nur mit padding und margin zu tun hat.

                          Grüße!
                          Sebastian

                          1. Der IE hat Probleme mit padding/margin usw. Bedeutet man braucht andere Maße für ihn.
                            Siehe: http://www.perun.net/2004/07/04/fehlverhalten-von-ie-im-boxmodell/

                            das ist schlichtweg falsch - der ie6 interpretiert das box-model im standardkonformen modus exakt so wie es vorgesehen ist

                            valider quelltext ist dafür keine vorausseztung - selbst valider code kann den ie dazu bringen, im quirksmode zu rendern - eine google-suche nach doctype-switch oder compatmode hilft dir ggf weiter

  2. Hallo,

    welche Möglichkeiten hat man denn eigentlich auf einem einzigen Rechner die verschiedenen Browser, hauptsächlich IE zu testen? Ich hatte mal Multiple-IE installiert aber wieder deinstalliert. Ich glaube weil das wohl nicht wirklich genau das gezeigt hatte wie es in dem jeweiligen Browser der Fall ist.

    Nach meinen Erfahrungen kann es unter Windows XP mit einer einfachen Änderung der Registry, vgl. auch http://www.lipfert-malik.de/webdesign/tutorial/multiple-ie.html, gut gelingen, die IEs bis zum 8er gleichzeitig auch bei Projekten mit Cond. Comments einzusetzen.

    Abgesehen von dem Paket von "tredosoft" gibt es offenbar noch -hab die Software nicht selbst versucht- einen "ietester 0.2.2", falls du etwas in der Art wieder versuchen möchtest.

    Sonst bleiben, abgesehen von entspr. Diensten im Web, noch die Einrichtung virtueller Maschinen oder tatsächlich die Nutzung mehrerer PCs.

    Kannst du die Unsicherheiten oder Abweichungen deiner Multiple-IE irgendwie genauer beschreiben?

    Grüsse

    Cyx23

    1. Hallo,

      Nach meinen Erfahrungen kann es unter Windows XP mit einer einfachen Änderung der Registry, vgl. auch http://www.lipfert-malik.de/webdesign/tutorial/multiple-ie.html, gut gelingen, die IEs bis zum 8er gleichzeitig auch bei Projekten mit Cond. Comments einzusetzen.

      Ich nutze noch Win2k. Als ich Multiple-IE installiert hatte funktionierten Conditional Comments nicht richtig. Ob die Darstellung auch unterschiedlich war weiß ich nicht mehr. Hier im Forum hat dann jemand gemeint dass bei Multiple-IE immer nur ein IE-Kern im System installiert ist. Das ist wohl eine Windowseigenheit. Und dass alle anderen Versionen eher simuliert werden. Daraufhin habe ich das dann gelassen.

      Abgesehen von dem Paket von "tredosoft" gibt es offenbar noch -hab die Software nicht selbst versucht- einen "ietester 0.2.2", falls du etwas in der Art wieder versuchen möchtest.

      Ich kann die verschiedenen Pakete ja mal testen. Bei Browsershots scheinen sie in den letzten Tagen wohl auch eine Sperre eingebaut zu haben. Eine URL nur einmal pro Tag. Will man noch einen Test muss man eine andere URL nehmen.

      Grüße!
      Sebastian

      1. [latex]Mae  govannen![/latex]

        Ich nutze noch Win2k. Als ich Multiple-IE installiert hatte funktionierten Conditional Comments nicht richtig.

        Kann man "nachrüsten"

        http://www.positioniseverything.net/articles/multiIE.html

        Cü,

        Kai

        --
        Is er leven op Pluto, Kun je dansen op de maan.
        Is er een plaats tussen de sterren, Waar ik heen kan gaan.
        YouTube Video-Tipp: Harmonic Curves
        YouTube Video-Tipp: Pipe Dreams
        selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
        1. Hallo,

          Kann man "nachrüsten"

          Wie im o.g. Link schon dargelegt (http://www.lipfert-malik.de/webdesign/tutorial/multiple-ie.html) per Registryänderung. Was damals bei meinen Versuchen aber unter Windows 95 oder 98 nur ohne den IE 6 überzeugend geklappt hatte, W2K hatte ich nicht getestet, XP klappt gut.

          Grüsse

          Cyx23

          1. Hallo,

            ich habe mir jetzt mal die verschiedenen Möglichkeiten angesehen aber scheinbar ist keine für mich nutzbar. Ich habe Win2k auf meinem Rechner. IETester funktioniert erst ab XP und MultipleIE scheint kein IE7 zu enthalten. Obwohl ich mich zu erinnern glaube das IE7 mal drin war...

            Ich werde jetzt noch mal das hier probieren. Vielleicht klappt das...
            http://www.microsoft.com/downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&DisplayLang=en

            Grüße!
            Sebastian

            1. Scheinbar ist VPC auch erst ab XP verfügbar... Das klappt also auch nicht.

              Grüße!
              Sebastian

            2. Hallo,

              IETester funktioniert erst ab XP und MultipleIE scheint kein IE7 zu enthalten. Obwohl ich mich zu erinnern glaube das IE7 mal drin war...

              Der sollte sich notfalls "zu Fuß" nachrüsten lassen, irgendwo (tredosoft?) gab es aber wohl auch mal eine "IE7s.exe".

              Allerdings soll der IE7 ja nicht unter W2K laufen, ob das dann als standalone klappen würde scheint mir zweifelhaft. Vielleicht legst Du Dir doch mal XP zu?

              Grüsse

              Cyx23

      2. Hallo Sebastian,

        Ich nutze noch Win2k. Als ich Multiple-IE installiert hatte funktionierten Conditional Comments nicht richtig.

        Das mag auch bei W2k per Registry zu regeln sein, muß aber nicht; bei W98 war das, wenn ich es recht erinnere, problematisch sobald der IE 6 dabei war. Mit dem o.g. Link kannst Du testen ob es bei Dir geklappt hat.

        Und dass alle anderen Versionen eher simuliert werden. Daraufhin habe ich das dann gelassen.

        Ging vielleicht nicht anders, weil der Explorer so tief im System verbastelt ist. Die Möglichkeit hat MS schon beim IE 5 nachvollziehbar eingeführt, um den IE 4 weiter nutzen zu können. Hatte ich z.B. gleich bei der Installation des IE 5 ausgewählt -da gibt es extra nen Menupunkt- und dann für den IE 5.5 auch passend gemacht (dann auch für Cond. Comments), lange bevor die Sache von Maddalone und Anderen als Neuigkeit dargestellt wurde.

        Die Geschichte funktioniert gut, nach meinen Erfahrungen gibt es eher leichte Unterschiede bei der Schriftdarstellung, z.B. Laufweite, zwischen den Windowsversionen als zwischen den "Simulanten";) Der IE 8 hat übrigens einen extra Schalter um als IE 7 zu rendern, bei der Vorgehensweise nutzt er aber wohl immer noch Cond-Comments des 8er, da scheint es besser, den 7er bzw. die relevanten Dateien auch als Standalone einzusetzen.

        Grüsse

        Cyx23