JP: Fehler beim IE wenn DOCTYPE Header angegeben wird

Hallo!

Die Seite http://de.geocities.com/jpetterson_99/index.html wird beim InternetExplorer 6 falsch dargestellt.

Die Navigationsliste auf der linken Seite wird nicht angezeigt. Wenn ich aber dann die erste Zeile mit dem DOCTYPE wegnehme, dann gehts auf einmal. Mit XHTML Doctype habe ich es auch schonmal versucht, auch hier kein Erfolg. Den Doctype möchte ich aber setzen, damit ich ein Icon "Korrektes HTML" vom W3C anzeigen kann. Bei fehlendem Doctype ist die Validierung durch das W3C leider negativ. FireFox zeigt jedoch bei gesetztem Doctype die Navigationslinks korrekt an.

Nun die Frage. Warum ist bei IE die Navigation unsichtbar?

P.S. Denn Quelltext Poste ich nicht, da man sich diesen ja über den Link ansehen kann.

Ich hoffe jemand kann mir weiterhelfen und erklären was beim IE passiert.

Danke schonmal im Voraus.

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

    Die Navigationsliste auf der linken Seite wird nicht angezeigt. Wenn ich aber dann die erste Zeile mit dem DOCTYPE wegnehme, dann gehts auf einmal. Mit XHTML Doctype habe ich es auch schonmal versucht, auch hier kein Erfolg. Den Doctype möchte ich aber setzen, damit ich ein Icon "Korrektes HTML" vom W3C anzeigen kann. Bei fehlendem Doctype ist die Validierung durch das W3C leider negativ. FireFox zeigt jedoch bei gesetztem Doctype die Navigationslinks korrekt an.

    Seltsam. Mein Test-Firefox 2.0.0.17 weigert sich ebenfalls, die Navigation zu zeigen (die übrigens besser als Liste ausgezeichnet werden sollte, siehe umfassende Diskussionen im Forenarchiv).

    In meinem Opera, und auch nur in diesem, wird das Dokument als Quelltext folgendermaßen angezeigt:

    <script language="JavaScript" type="text/javascript" src="http://uk.adserver.yahoo.com/a?f=382041067:RS&p=de&l=RS&c=r&site-country=de"></script><script language="JavaScript" type="text/javascript" src="http://uk.adserver.yahoo.com/a?f=382041067:RS2&p=de&l=RS2&c=r&site-country=de"></script>
    <!-- text above generated by server. PLEASE REMOVE -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    ........ (allerlei)
    </html><!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/geov2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.geocities.yahoo.com/visit.gif?de1224284168" alt="setstats" border="0" width="1" height="1"></noscript>
    <IMG SRC="http://geo.yahoo.com/serv?s=382041067&t=1224284168&f=de-w74" ALT=1 WIDTH=1 HEIGHT=1>

    Das heißt, daß dir dein Hoster offensichtlich an definitiv nicht erlaubten Stellen zusätzlichen Werbe-Code unterjubelt.

    Es kann durchaus sein, daß Browserimitationen dadurch aus dem Tritt kommen könnten.

    Was du allerdings jetzt schon machen kannst, ist deinen Quelltext beim W3C-validator direkt einzugeben und dort zu testen, entweder per Dateiupload oder copy & paste des kompletten Codes aus deinem Editor.

    Cü,

    Kai

    --
    Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
    selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
    Mein Selfhtml-Kram
    1. Hier der Quelltext ohne Yahoo add ons. Ich habe hier schonmal den Tipp mit dem Online Validieren auf W3C umgesetzt. danke für diesen Hinweis! Es ist z.b. der fehler "fehlendes title Tag" ermittelt worden.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">  
      <html>  
      <head>  
      <style type="text/css">  
        
      body {  
      text-align:center;  
      background-color:#000;  
      color:#fff;  
      margin:0px;  
      }  
        
      div.Inhalt_0 {  
      background-image:url(1951.jpg);  
      text-align:left;  
      height:551px;  
      width:800px;  
      overflow:hidden;  
      margin:auto;  
      position:relative;  
      border:1px solid black;  
      }  
        
        
        
      div.Navigation {  
      height:430px;  
      width:150px;  
      margin:auto;  
      position:relative;  
      top:77px;  
      left:27px;  
      color:#fff;  
      overflow:hidden;  
      font-size:20px;  
      line-height:40px;  
      display:inline-block;  
      }  
        
      div.Navigation a {  
      color:#fff;  
      }  
        
      div.Navigation a:hover {  
      color:#f00;  
      }  
        
        
      /*#cfc*/  
      div.Text {  
      height:430px;  
      width:550px;  
      margin:0px;  
      position:relative;  
      top:-349px;  
      left:240px;  
      color:#fff;  
      background-color:#007;  
      overflow:auto;  
      font-size:1.2em;  
      }  
        
      /*-moz-opacity:1;  
      filter:alpha(opacity=100);  
      opacity:1;*/  
        
      div.Textinhalt{  
      padding:8px 15px;  
      }  
        
      .Schatten{  
      position:absolute;  
      height:430px;  
      width:550px;  
      top:81px;  
      left:240px;  
      background-color:#bbb;  
      margin:10px 0px 0px 10px;  
      }  
        
      </style>  
      <title>Dummy</title>  
      </head>  
      <body>  
      <div class="Inhalt_0">  
       <div class="Navigation">  
       <a href="link1.html">Link</a><br/>  
       <a href="link1.html">Link</a><br/>  
       <a href="link1.html">Link</a><br/>  
       <a href="link1.html">Link</a><br/>  
       <a href="link1.html">Link</a><br/>  
       <a href="link1.html">Link</a><br/>  
       <a href="link1.html">Link</a><br/>  
       <a href="link1.html">Link</a><br/>  
       </div>  
       <div class="Schatten">  
       </div>  
       <div class="Text">  
       <div class="Textinhalt">  
      <p align="right">2008-10-18</p>  
      <h1 align="center">Titel</h1>  
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.  
      <p align=right>  
          <a href="http://validator.w3.org/check?uri=referer"><img  
              src="http://www.w3.org/Icons/valid-html40"  
              alt="Valid HTML 4.0 Transitional" height="31" width="88"></a>  
      </p>  
       </div>  
       </div>  
      </div>  
      </body>  
      </html>
      

      An Ingo:

      Das mit der linken Seite war natürlich in Relation zum Textblock gemeint. Warum setzt denn der IE das margin:auto nicht um wenn DOCTYPE fehlt?
      Außerdem ist es doch so, dass der IE sowieso über text-align:center; dafür sorgt, dass die div Elemente horizontal mittig angeordnet werden, gerade aufgrund der falschen/fehlenden Umsetzung mittels margin-auto; in div.Inhalt_0{...}. Ich mache ja nicht zum Vergnügen danach wieder gleich text-aling-left; .

      Cu.

      1. Hi,

        Warum setzt denn der IE das margin:auto nicht um wenn DOCTYPE fehlt?

        weil er das erst in Version 6 gelernt hat und der IE dann in den abwärtskompatiblen quirks mode der 5er-Versionen umschaltet.

        freundliche Grüße
        Ingo

      2. @@JP:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

        Du solltest nicht HTML 4.0 angeben, sondern HTML 4.01. Siehe [SELFHTML].

        <a href="link1.html">Link</a><br/>

        In HTML schreibst du '<br>' [icke]

        'br' ist allerdings in den meisten Fällen schlechter Stil. [ibid.] 'br' ist nur in Ausnahmefällen sinnvoll (Gedichte, Postadressen, Programmcode, …).

        Dass ein Menü (_Liste_ von Links) auch besser als Liste ausgezeichnet wird, wurde ja schon gesagt.

        Live long and prosper,
        Gunnar

        --
        Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
        1. n'Abend!

          [ibid.]

          Wer zum Geier ist ibid?

          'br' ist nur in Ausnahmefällen sinnvoll (Gedichte, Postadressen, Programmcode, …).

          Veto.
          Ich benutze <br> ebenso häufig wie ich in Textverarbeitungen einen Zeilenumbruch verwende, ohne einen neuen Absatz zu beginnen. Ich schätze diese Möglichkeit, im Fließtext eine leichte(!) Zäsur unterzubringen, die nicht unbedingt einen neuen Absatz rechtfertigt.

          Ebenso wie ich in meinen Beiträgen hier manchmal einen einfachen Zeilenumbruch setze (entsprechend einem br) und manchmal einen doppelten (entspricht einem neuen Absatz).

          Ich stimme dir allerdings insofern zu, dass im Rudel auftretende <br>s normalerweise danach schreien, durch margin oder padding ersetzt zu werden.

          Ciao,
           Martin

          --
          Paradox ist, wenn jemand eingefleischter Vegetarier ist.
          1. Yerf!

            Veto.
            Ich benutze <br> ebenso häufig wie ich in Textverarbeitungen einen Zeilenumbruch verwende, ohne einen neuen Absatz zu beginnen. Ich schätze diese Möglichkeit, im Fließtext eine leichte(!) Zäsur unterzubringen, die nicht unbedingt einen neuen Absatz rechtfertigt.

            Gut zu wissen, das ich nicht der Einzige bin, der einen neuen Gedanken (oder ähnliches) innerhalb eines Absatzes durch einen Zeilenumbruch andeutet...

            (und ich wüsste auch keinen anderen Weg als <br> um das in HTML auszudrücken)

            Gruß,

            Harlequin

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

    Die Seite http://de.geocities.com/jpetterson_99/index.html wird beim InternetExplorer 6 falsch dargestellt.

    nö, der stellt die ausnahmsweise mal richtig dar wie andere standardkonforme Browser.

    Die Navigationsliste auf der linken Seite wird nicht angezeigt.

    wieso auf der linken Seite? Wenn ich mir das CSS so ansehe, vermute ich, dass Du gar nicht so recht weisst, was Du da angibst. Fürs erste ein Tipp: vermeide Angaben zu position!

    Wenn ich aber dann die erste Zeile mit dem DOCTYPE wegnehme, dann gehts auf einmal.

    logisch - weil der IE dann margin:auto nicht mehr umsetzen kann.
    Hierüber zentrierst Du die Navigation und mit position:relative;top:77px; schiebst Du sie unter den Textblock.

    freundliche Grüße
    Ingo

    1. Hallo!

      Wenn ich aber dann die erste Zeile mit dem DOCTYPE wegnehme, dann gehts auf einmal.
      logisch - weil der IE dann margin:auto nicht mehr umsetzen kann.
      Hierüber zentrierst Du die Navigation und mit position:relative;top:77px; schiebst Du sie unter den Textblock.

      Jetzt habe ich es endlich geschnallt, was gemeint war:

      Wenn man z.B. den z-index:1 in div.Navigation { ... } setzt, dann sieht man, dass die Links in der Mitte positioniert sind. Danke!
      Wobei ich aber mit dem selben Quelltext und FireFox 3 trotzdem die Navigation auf der Linken Seite habe (merkwürdig)!

      So, und um nun das gleiche optische Verhalten wie beim FireFox 3 im IE Version 6 zu haben, muss man margin:0px in div.Navigation { ... } schreiben. Dann kann man auch den z-index:1 wieder wegnehmen.

      Also alles in allem folgende Änderung im Quelltext:

      div.Navigation {  
      height:430px;  
      width:150px;  
      margin:0px;  
      position:relative;  
      top:77px;  
      left:27px;  
      color:#fff;  
      overflow:hidden;  
      font-size:20px;  
      line-height:40px;  
      display:inline-block;  
      /*z-index:1;*/  
      }
      

      Desweiteren habe ich die <br/> durch <br> ersetzt und den DOCTYPE korrekter gemacht:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">

      Wo liegt eigentlich der Unterschied zwischen Version 4.0 und 4.01. Gibts gravierende Vorteile?

      Noch zuletzt:
      Könnten mal alle probieren, ob die Seite mit verschiedenen Browsern korrekt dargestellt wird (mit Versionsangabe)?

      Danke für die vielen Tipps, auch das mit der Liste statt <br>'s werde ich mir merken.

      Cu.

      1. @@JP:

        und den DOCTYPE korrekter gemacht:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">

        Hatte ich nicht was von HTML 4.01 gesagt und die entsprechende DOCTYPE-Angabe verlinkt?

        Wo liegt eigentlich der Unterschied zwischen Version 4.0 und 4.01.

        Siehe [HTML401], Status dieses Dokuments.

        Live long and prosper,
        Gunnar

        --
        Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.