wastel: Internet Explorer Fix

Hi zusammen!

Ich habe folgende Seite erstellt http://fcl.bplaced.de/1/ und bekomme es einfach nicht hin, dass sie im Internet Explorer 6 & 7 so angezeigt wird wie im Firefox oder IE8. Dabei geht es eigentlich nur um den Header-Bereich.

Könnte mir da jemand helfen?

Gruß
WasteL

  1. @@wastel:

    nuqneH

    Ich habe folgende Seite erstellt http://fcl.bplaced.de/1/

    Div-Suppe und Tabellenlayout zusammen. Und als ob das noch nicht genug wäre, auch noch Inline-Styles.

    Nein danke, keine Lust, in dem Heuhaufen eine Nadel zu suchen.

    Und du solltest es auch nicht tun. Die Zeit ist in den Neuaufbau der Seite mit semantischem Markup besser inverstiert.

    Noch ein paar Hinweise am Rande:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr" >

    Die Angabe "de-DE" ist nicht sinnvoll.

    “The golden rule when creating language tags is to keep the tag as short as possible. Avoid region, script or other subtags except where they add useful distinguishing information.” [LANGUAGE-TAGS]

    'dir="ltr"' ist Default, muss also nicht angegeben werden:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    Dies sollte so früh wie möglich im Dokument stehen, also als erstes im 'head'.

    <link rel="stylesheet" type="text/css" href="/1/templates/fcl/css/page.css" />  
    <link rel="stylesheet" type="text/css" href="/1/templates/fcl/css/navi.css" />  
    <link rel="stylesheet" type="text/css" href="/1/templates/fcl/css/template.css" />  
    <link rel="stylesheet" type="text/css" href="/1/templates/fcl/css/menu.css" />  
    <!--[if IE 6]>  
    <link rel="stylesheet" type="text/css" href="/1/ie6.css" />  
    <![endif]-->
    

    Die vielen Stylesheets kosten unnötig Ladezeit. Fasse sie besser zu einem zusammen!

    Und Anpassungen für IE besser auch in diesem einen Stylesheet, nicht in einem Extra-IE-Stylesheet.

    <script type="text/javascript">  
    [code lang=javascript]document.write('<style type="text/css">.tabber{display:none;}<\/style>');
    

    </script>[/code]

    Um Stile nur bei aktiviertem JavaScript wirken zu lassen, gibt es weitaus bessere Methoden als per 'document.write' 'style'-Elemente in den Quelltext zu setzen: Gib per JavaScript dem 'html'-Element [PERFORMANCE-BP2] bzw. 'body'-Element [Cheatah] eine Klasse "js" und dann per Nachfahrenselektor:

    .js .tabber { display:none }

    <br /><br /><br />

    Für Abstände ist CSS da. Mehrere 'br' hintereinander sind nie sinnvoll. [ZITAT1275]

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    1. Vielen Dank für deine Antwort!

      Ich habe einige deiner Tipps befolgt. Aber zum Beispiel das mit Javascript kann ich so nicht ändern...

      Außerdem verstehe ich nicht, wieso du von einer div-Suppe sprichst. Hier siehst du meine index.php http://pastebin.com/m601a5b61

      Wenn Tabellen vorkommen, dann kommen die fast ausschließlich von Modulen von Joomla.

      1. Hi WasteL,

        Wenn Tabellen vorkommen, dann kommen die fast ausschließlich von Modulen von Joomla.

        weshalb ich das von dir erwähnte CMS auch nach dem irgendwann (aber unerklärlich spät) erfolgten Update auf vermeintlich <http://de.selfhtml.org/css/layouts/index.htm@title=CSS-basierte Layouts> niemals benutzen werde. Es ist immer noch alles voller Tabellen und Zellen an unsinnigen Stellen. Dasselbe gilt wohl für die von Gunnar angesprochenen inline-Styles. Für große Projekte ist sogar Typo3/ Templavoila Output seit langem moderner und für kleinere gibt es z.B. Typolight.

        cheers
        Antipitch

        1. Naja, ich bin nun endlich "fertig" geworden, wäre da nicht der Internet Explorer... darum werdet ihr mir wohl nachsehen, wenn ich keine Lust habe jetzt noch das CMS zu wechseln.

          Aber ich verstehe euch auch. Falls ich was machen kann, damit mir besser geholfen werden kann, dann schießt los ;)

          1. Hi WasteL,

            darum werdet ihr mir wohl nachsehen, wenn ich keine Lust habe jetzt noch das CMS zu wechseln.

            das zu bewirken war gar nicht meine Absicht, nur ein kleiner Vorschlag für zukünftige Projekte vielleicht.

            Aber ich verstehe euch auch.

            Danke ;-)

            Falls ich was machen kann, damit mir besser geholfen werden kann, dann schießt los ;)

            Evtl. der Gedanke, deinen Frontend-Output ab und an mal durch den Validator zu jagen. Und wenn du Probleme hast, zu denen du Hilfe einholen möchtest, wäre es gut, selbige und evtl. zu postenden Code einigermaßen zu isolieren. Wie Gunnar schon sagte, ist es einigermaßen nervig, sich durch komplette CMS-generierte Seiten und unzählige externe Stylesheets zu wühlen.

            cheers
            Antipitch

            1. Ok, ich versuche es noch einmal.

              Es geht um die "Nächste Spiel" Anzeige rechts oben auf meiner Seite.
              Der Code von meiner index.php ist hier zu finden: http://pastebin.com/m601a5b61
              Und das Modul das dort angezeigt wird, hat folgenden Code: http://pastebin.com/m5cfc7572

              Nun möchte ich gerne wissen, warum der IE (zumindest in der Version 7) die "Box" etwa 30px nach rechts vorschoben anzeigt. Und vielleicht noch warum der Schriftzug "Son, 16. Aug 2009 15:00 Uhr 1. Mannschaft" nicht, wie im Firefox, zentriert ist.

              1. Hi,

                Nun möchte ich gerne wissen, warum der IE (zumindest in der Version 7) die "Box" etwa 30px nach rechts vorschoben anzeigt.

                Weil du sie nach rechts gefloatet hast.

                #header ist effektiv 915px breit, #header_l 650px, #next 228px.
                915 minus 650 sind 265, minus 228 sind 37 - 37 Pixel Platz mehr als notwendig.
                Im Firefox hingegen ist #header nur 885px breit - da geht also die Rechnung schon besser auf, und es ergibt sich weniger Abstand.

                Untersuche also, warum #header im IE breiter ist.

                Und vielleicht noch warum der Schriftzug "Son, 16. Aug 2009 15:00 Uhr 1. Mannschaft" nicht, wie im Firefox, zentriert ist.

                Für das TR hast du algin=center angegeben, die DebugBar meines IETesters zeigt mir aber, dass für das darin liegende FONT-Element (du Perversling ...) effektiv wieder text-align:left gilt.

                MfG ChrisB

                --
                Light travels faster than sound - that's why most people appear bright until you hear them speak.
                1. Das klingt ja schon einmal gut :)

                  Zugegebenermaßen ist das FONT-Element wirklich pervers...

                  Aber, wie soll ich untersuchen, warum das im IE so ist und dann auch noch ausbessern? Kann man etwas für den IE definieren, was für andere Browser nicht gilt?

                  1. Hallo

                    Zugegebenermaßen ist das FONT-Element wirklich pervers...

                    Aber, wie soll ich untersuchen, warum das im IE so ist und dann auch noch ausbessern?

                    Speziell an der Stelle lasse einfach das <font>-Element weg. Das Element sorgt dafür, dass der Text im IE linksbündig ist, obwohl du ihn zentriert haben willst. Weg damit, und gut is.

                    Kann man etwas für den IE definieren, was für andere Browser nicht gilt?

                    (Pseudo-)HTML-seitig stehen ein paar proprietäre Elemente zur Verfügung, die von MS eingeführt wurden (gleiches gilt für Netscape). Allerdings ist nicht sicher, dass sie *nur* von IEs/Netscapes interpretiert werden und ob man sich heutzutage noch damit herumschlagen will, ist auch so eine Sache. Ich, wie die meisten anderen hier, würde es lassen. Das ist Schnee von vorvorgestern.

                    Für CSS stehen dir mehrere Methoden zur Verfügung, bestimmte Browser (nicht nur IE) von Anweisungen auszuschließen oder diese nur bestimmten Browsern zukommen zu lassen. Der von dir verwendete CC (für IE 6) ist nur eine der http://de.selfhtml.org/css/layouts/browserweichen.htm@title=Möglichkeiten.

                    Tschö, Auge

                    --
                    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                    Terry Pratchett, "Wachen! Wachen!"
                    Veranstaltungsdatenbank Vdb 0.3
                    1. Zugegebenermaßen ist das FONT-Element wirklich pervers...

                      Speziell an der Stelle lasse einfach das <font>-Element weg. Das Element sorgt dafür, dass der Text im IE linksbündig ist, obwohl du ihn zentriert haben willst. Weg damit, und gut is.

                      Ich habe es eingefügt damit die Schriftgröße so groß wie links davon ist. (Datum & Zeit)

                      Um auf die Conditional Comments zu kommen:
                      Wie man sie einbindet ist mir nun klar, aber was muss ich darin angeben? Logisch wäre ja #next {margin-right:15px;} oder?

                      1. Alles klar, das klappt!

                        Bleibt noch zu klären, wie ich die Schriftgröße in einem <tr>-Element angebe und was für den IE angegeben werden muss, damit die horizontalen Buttons richtig angezeigt werden...

                        Liebe Dank schon einmal ;)

                        1. Hallo

                          Bleibt noch zu klären, wie ich die Schriftgröße in einem <tr>-Element angebe

                          In einem <tr> gibt es keine Schriftgröße, weil dort *nur* ein oder mehrere <td> oder <th> stehen dürfen[1]. *Die* dürfen ihrerseits Text beinhalten, dem man mit td,th { font-size:...; } zu Leibe rücken kann. Dies natürlich auch unter Zuhilfenahme von IDs oder Klassen.

                          und was für den IE angegeben werden muss, damit die horizontalen Buttons richtig angezeigt werden...

                          Meinst du die da ...

                          <div id="head_navi">  
                           <ul>  
                            <li><a href="/1">NEWS</a></li>  
                            <li><a href="component/easybook/">G&Auml;STEBUCH</a></li>  
                            <li><a href="component/joomgallery/">BILDER</a></li>  
                            <li><a href="component/content/article/48.html">SPONSOREN</a></li>  
                           </ul>  
                          </div>
                          

                          ... die folgendermaßen formatiert werden?

                          #head_navi {  
                          	height: 32px;  
                          	padding: 126px 0px 0px 180px;  
                          	position: absolute;  
                          }  
                            
                          #head_navi ul li {  
                          	background-image: url(images/button_bg.gif);  
                          	height: 32px;  
                          	display: inline;  
                          	padding: 8px 16px;  
                                  text-align: center;  
                          	margin-right: 5px;  
                          }
                          

                          1. Wenn du schon unbedingt mit position:absolute; arbeiten willst, solltest du auch Angaben zur Position machen (siehe: <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=SELFHTML position> inkl. des Bezugs auf http://de.selfhtml.org/css/eigenschaften/positionierung.htm#postop@title=top, http://de.selfhtml.org/css/eigenschaften/positionierung.htm#left@title=left, http://de.selfhtml.org/css/eigenschaften/positionierung.htm#posbottom@title=bottom und http://de.selfhtml.org/css/eigenschaften/positionierung.htm#right@title=right). Hier dürften left und bottom zutreffen, ein Elternelement (#header) ist ja ebenfalls absolut positioniert (Warum eigentlich? Der Aufbau ist sowieso undurchsichtig bis verwirrend, aber das wurde ja schon angesprochen.).

                          2. Wenn du die <li>s mit display:inline; versiehst, wirkt deine Angabe zur Höhe (height:32px;) nicht, da Inlineelemente keine Höhe haben.

                          Was die Alternative dazu wäre, kann ich dir nicht guten Gewissens sagen, da ich aufgrund des verwirrenden Aufbaus diverse Nebeneffekte befürchte, die weiterer Korrekturen bedürften. Eigentlich würde ich die <li>s floaten wollen, da aber außen rum mehrere Elemente absolut positioniert werden und der linke Teil des Headers bereits floatet ... im FF 3.0.13 funktioniert's "irgendwie" (laut Test mit FireBug), es müsste aber noch nachgebessert werden und für andere Browser kann ich keine Aussage machen.

                          [1] Insofern ist das JoomLeague-Plugin, HTML-technisch gesehen, Müll (siehe http://pastebin.com/m5cfc7572, Zeilen 308 bis 320). <font> raus, <td> rein. Im Zweifelsfall eine ID vergeben, aber auch nur dann, wenn es wirklich nötig ist.

                          Tschö, Auge

                          --
                          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                          Terry Pratchett, "Wachen! Wachen!"
                          Veranstaltungsdatenbank Vdb 0.3
                          1. Nun gut, ich werde die Seite mal neu aufbauen. (Ohne position:absolute;)

                            Einen <td>-Tag kann ich dort leider nicht nutzen, da der Text sonst nur in der ersten Hälfte der Tabelle ist...

                            Und bezüglich des IE-Fixes habe ich mich auch zu früh gefreut, der geht merkwürdigerweise nur auf der Startseite?! (News)

                            1. Bevor ich das neue Gerüst übernehme, hätte ich gerne sicher gewusst, dass jetzt alles passt.

                              index.html: http://pastebin.com/m601c712b
                              page.css: http://pastebin.com/m56398ec8

                              Tipps nehme ich gerne entgegen!

                              1. Ups, der body-Tag ist natürlich nicht richtig^^

                              2. Hi,

                                index.html: http://pastebin.com/m601c712b
                                page.css: http://pastebin.com/m56398ec8

                                och nööö! Stell die Seite doch bitte "richtig" live online, anstatt einfach den Quellcode irgendwo anzupinnen! So, dass man sie sofort in Aktion sieht. Den Quellcode kann man ja jederzeit selbst im Browser anschauen.

                                Tipps nehme ich gerne entgegen!

                                Gut, dann betrachte das als solchen.

                                Schönes Wochenende,
                                 Martin

                                --
                                Lieber eine Stumme im Bett, als eine Taube auf dem Dach.
                                1. Na gut, habe die neue Struktur nun übernommen, sieht ganz gut aus und im IE wird sogar alles richtig angezeigt.

                                  Bleibt nur noch die "Nächste Spiel" Anzeige oben rechts...

                                  1. Hi,

                                    Bleibt nur noch die "Nächste Spiel" Anzeige oben rechts...

                                    Was soll mit der (jetzt noch) sein?

                                    MfG ChrisB

                                    --
                                    Light travels faster than sound - that's why most people appear bright until you hear them speak.
                                    1. Hi,

                                      Bleibt nur noch die "Nächste Spiel" Anzeige oben rechts...

                                      Was soll mit der (jetzt noch) sein?

                                      MfG ChrisB

                                      Jetzt passt alles :) !
                                      Danke an euch ;)

                            2. Hallo

                              Einen <td>-Tag kann ich dort leider nicht nutzen, da der Text sonst nur in der ersten Hälfte der Tabelle ist...

                              Das ist wurscht. Ich hatte deutlich gesagt, dass du ein <td>-Element (oder ein <th>) nutzen *musst*, weil dort _nichts_anderes_ etwas zu suchen hat. Dabei gibt es *keine Optionen* außer den eben genannten.

                              Tschö, Auge

                              --
                              Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                              Terry Pratchett, "Wachen! Wachen!"
                              Veranstaltungsdatenbank Vdb 0.3
                            3. @@WasteL:

                              nuqneH

                              Einen <td>-Tag ...

                              „Aber »Tags« klingt doch cooler? Nein.“ [Meiert]

                              Qapla'

                              --
                              Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                              1. Hallo

                                Einen <td>-Tag ...

                                „Aber »Tags« klingt doch cooler? Nein.“ [Meiert]

                                Doch, um das (von dir anvisierte) Element zu erzeugen, muss er Tags notieren. ;-)

                                Tschö, Auge

                                --
                                Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                                Terry Pratchett, "Wachen! Wachen!"
                                Veranstaltungsdatenbank Vdb 0.3
              2. WasteL,
                nett wäre dieser Link http://fcl.bplaced.de/1/templates/fcl/css/page.css gewesen.

                Generell: vermeide absolute Positionierungen, solange du CSS-technisch nicht wirklich weißt, was du tust.

                Und da schwer zu überblicken ist, was du da alles am Start hast/ fehlerhaft sein könnte, folgende Empfehlung:

                  
                #wrapper {  
                      margin: 0 auto;  
                	padding: 15px;  
                	width: 885px;  
                	background-image: url(images/transp_bg.png);  
                }  
                  
                #header {  
                      margin-top:12px;  
                 	overflow:hidden; /* um enthaltene floats zu "clearen" */  
                }  
                  
                #header_l {  
                	height: 167px;  
                	float: left;  
                	background-image: url(images/header_bg.gif);  
                	width: 650px;  
                }  
                #next {  
                	height: 167px;  
                	background-image: url(images/next_bg.gif);  
                	width: 228px;  
                	float:right;  
                }  
                
                

                header_1 + 7px Abstand + next sind schon 885 Pixel, deshalb muss dein Wrapper, da er 15px padding hat, 915px Breite haben. Daher kommt wahrscheinlich auch der unterschiedliche Abstand.

                text-align bewirkt nur etwas für inline-Elemente in block-Elementen, hab ich aus next deshalb mal rausgeworfen.

                Sollte schon mal weiterhelfen...

                cheers
                Antipitch

                1. Hi Antipitch!

                  Habe eben mal deinen Tipp übernommen, aber dann wird mein Header-Bereich ganz unten angezeigt.

                  1. Hi WastL

                    Habe eben mal deinen Tipp übernommen, aber dann wird mein Header-Bereich ganz unten angezeigt.

                    ;-) das hatte ich natürlich vergessen: den Header fügst du ja wahrscheinlich irgendwo über per Template ins Layout ein?! Er muss dann natürlich als erstes innerhalb des Wrappers kommen. In deinem Fall wäre das auch semantisch/ SEO-technisch sinnvoll.

                    Und dein Logo, bisher eine eher merkwürdige Konstruktion (<a id="logo" href="http://fcl.bplaced.de/1"><b>FC Laufach</b></a>) könnte dann z.B. gleichzeitig und auch für nicht-Sreen oder rein textliche Ausgaben eine sinnvoll platzierte Überschrift sein: <h1><a id="logo" href="http://fcl.bplaced.de/1" title="Zur Startseite"><img src="logo.gif" alt="FC Laufach" /></a></h1>. Auch Braille-Leser und Bots (ohne die auch nur ansatzweise vergleichen zu wollen) erwarten doch den Titel auf der Vorder-, nicht auf der Rückseite des Covers...

                    cheers
                    Antipitch

    2. Hi Gunnar,

      Und Anpassungen für IE besser auch in diesem einen Stylesheet, nicht in einem Extra-IE-Stylesheet.

      wieso meinst du das, wegen der Ladezeiten? Ich persönlich halte getrennte Dateien und entsprechende Einbindungen über Conditional Comments (meistens geht es ja nur um IE Versionen) zumindest für übersichtlicher als Hacks.

      cheers
      Antipitch

      1. Mahlzeit Antipitch,

        Ich persönlich halte getrennte Dateien und entsprechende Einbindungen über Conditional Comments (meistens geht es ja nur um IE Versionen) zumindest für übersichtlicher als Hacks.

        Vergiss es - mit Gunnar kannst Du darüber nicht diskutieren ... ;-)

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
      2. @@Antipitch:

        nuqneH

        Und Anpassungen für IE besser auch in diesem einen Stylesheet, nicht in einem Extra-IE-Stylesheet.

        wieso meinst du das, wegen der Ladezeiten?

        Das wäre ein Nebeneffekt.

        Ich persönlich halte getrennte Dateien und entsprechende Einbindungen über Conditional Comments (meistens geht es ja nur um IE Versionen) zumindest für übersichtlicher als Hacks.

        Ich nicht. Wenn man Anpassungen für IEs direkt bei den Regeln für vernünftige[tm] Browser notiert, hat man alles in einem Blick:

        #foo  
        {  
          width: 100px;  
        }  
          
        * html #foo  
        {  
          width: 90px;  
        }  
          
        *:first-child+html #foo  
        {  
          width: 90px;  
        }
        

        Soll nun bei einer späteren Änderung die Breite auf 120px geändert werden, sieht man gleich, dass man die Anpassungen für IEs auch ändern muss, vermutlich auf 110px.

        Hat man die Angaben füe IEs in einer anderen Datei (oder gar noch IE < 7 und IE 7 getrennt), sieht man dies nicht sofort. Außerdem muss man zwei/drei Dateien ändern – höherer Wartungsaufwand.

        Und die Suche, durch welche Regel eine bestimmte Eigenschaft für ein bestimmtes Element gesetzt wird, gestaltet sich bei getrennten Stylesheets auch schwierig. Die IE Developer Toolbar ist längst nicht so brauchbar wie Firebug. Mit letzterem lassen sich naturgemäß keine Regeln in den IE-speziellen Stylesheets finden; wohl aber die für vernünftige[tm] Browser.

        Stehen die Anpassungen für IEs dagegen im selben Stylesheet, findet man sie in unmittlebarer Nähe.

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)