André: DIV-Positionierungsproblem mit dem IE6

Moin,

ich habe mit meinem Lieblingsbrowser IE6 mal wieder ein Problem.

http://neu.ju-ploen.de/ - die Seite ist Work in Progress, also noch vieles unfertig. Browserkompatibilität ist nach meinen Tests allerdings schon bis auf eine Sache im IE6 behoben, die mich allerdings nervt:

Die Navigation links geht im IE6 nicht auf die volle Breite von 180px und hat links einen Abstand von ca. 20 Pixeln zum Rand.
Ich hab noch nicht so ganz herausgefunden, woran das liegt, ob an #left oder #navigation, ob Innen- oder Außenabstand... der IE6 macht es einem nicht leicht, da die Fehlerquelle zu finden.

Hat von Euch jemand eine Idee? Wäre sehr dankbar für Hinweise!

Viele Grüße,
André

  1. Moin,

    ich habe mit meinem Lieblingsbrowser IE6 mal wieder ein Problem.

    http://neu.ju-ploen.de/ - die Seite ist Work in Progress, also noch vieles unfertig. Browserkompatibilität ist nach meinen Tests allerdings schon bis auf eine Sache im IE6 behoben, die mich allerdings nervt:

    Die Navigation links geht im IE6 nicht auf die volle Breite von 180px und hat links einen Abstand von ca. 20 Pixeln zum Rand.
    Ich hab noch nicht so ganz herausgefunden, woran das liegt, ob an #left oder #navigation, ob Innen- oder Außenabstand... der IE6 macht es einem nicht leicht, da die Fehlerquelle zu finden.

    Hat von Euch jemand eine Idee? Wäre sehr dankbar für Hinweise!

    Viele Grüße,
    André

    zeile 63 fehlt <div>

    1. zeile 63 fehlt <div>

      nein, warum soll da denn ein div hin?
      der div #links ist noch offen, und der div #navigation ist davor geschlossen - wo ist da das Problem?
      Tags usw. sollten auch alle richtig sein, ist schon xhtml-validiert. :-)

      Andere Vorschläge? :)

      1. War nurne idee :)

  2. Hallo,

    http://neu.ju-ploen.de/ - die Seite ist Work in Progress, also noch vieles unfertig. Browserkompatibilität ist nach meinen Tests allerdings schon bis auf eine Sache im IE6 behoben, die mich allerdings nervt:

    Die Navigation links geht im IE6 nicht auf die volle Breite von 180px und hat links einen Abstand von ca. 20 Pixeln zum Rand.

    Ich merke eigentlich nix von "Browserkompatibilität".

    Im Firefox 1.5 hast du 2 Spalten und im IE6 hast du 3 nebeneinander, aber dafür keine Links in der linken Navi.

    Wie soll es denn jetzt eigentlich werden?

    Auf den ersten Blick sehe ich, daß du viel zu viele Eigenschaften in den verschiedenen Selektoren benutzt, die nicht zusammenpassen bzw überflüssig sind.
    Mir kommt es so vor, als hättest du in deinem Editor bei _jeder_ Eigenschaft mal irgendeinen Wert angeklickt, ob er nun nötig ist, oder nicht, oder als hättest du ewig herumprobiert, und dabei immer die Eigenschaften des letzten Versuchs einfach stehengelassen.

    Ich hab noch nicht so ganz herausgefunden, woran das liegt, ob an #left oder #navigation, ob Innen- oder Außenabstand... der IE6 macht es einem nicht leicht, da die Fehlerquelle zu finden.

    Dein Stylesheet zu korrigieren, wäre wahrscheinlich mehr Arbeit, als es neu zu schreiben. *g*

    Falls du ein 3-Spalten-Layout möchtest, nimm doch mal diese Datei
    http://gaby77.ga.funpic.de/web/demos/3_spalten/header-footer.html
    als Grundgerüst, und setze nur deine Inhalte hinein, (wenn möglich, ohne 'position:absolute' oder 'position:relative')

    Grüße
    gaby

    PS
    (Beachte bitte nur das interne Stylesheet meiner verlinkten Datei, meine css-Datei "basic.css" ist für deine Zwecke überflüssig)

    1. Ich merke eigentlich nix von "Browserkompatibilität".

      DU hast aber sicher gemerkt, dass ich gerade da auch am wild rumprobieren war, oder?
      So, wie die Seite vorhin war (und jetzt gerade wieder ist), sieht sie komplett identisch aus auf IE7, Firefox2 und Opera 9. Im IE6 wird in der aktuellen Version die Navigation links allerdings wirklich gar nicht mehr angezeigt, vorher war sie eben verrutscht.

      Wie soll es denn jetzt eigentlich werden?

      Es soll im IE so aussehen wie in den 3 oben genannten Browsern. Eine angezeigte Navi links wäre schon prima.

      Ich bezweifle, dass das am Ende besser aussähe, wenn ich das entsprechend erweitere, und auch komplexere Sachen von allen Browsern korrekt angezeigt werden soll.

      1. Ich merke eigentlich nix von "Browserkompatibilität".

        DU hast aber sicher gemerkt, dass ich gerade da auch am wild rumprobieren war, oder?

        ja, allerdings. ;-)
        Da du einen ziemlich aufgeblähten Quellcode und Stylesheet hast, ist es schwierig, die Übersicht zu bekommen.

        zb im header:
        Nutze doch die default-Eigenschaften der Elemente.
        Bilder sind Inline-Elemente, und als solche setzen sie sich per default _nebeneinander_, wenn du sie einfach so im Quelltext angibst.

        Den Code könnte man also zusammenschrumpfen zu

        <div id="headerbereich" class="noprint">
            <a href="/"><img src="julogo.gif" title="" alt="JU" border=""/></a>
            <img src="juschriftzug.gif" title="" alt="Junge Union im Kreis Pl&ouml;n">
            <div id="verbandsbox">hier kommt noch was</div>
        </div>

        und das CSS:

        #headerbereich {
          background-color: #162d61;
          width: 100%;      /* überflüssig, da default */
          height: 120px;
          margin:0px;        /* überflüssig, da default */
          padding: 0px;      /* überflüssig, da default */
        }

        #verbandsbox {
           position: absolute;    /* überflüssig */
           top: 100px;            /* überflüssig */
           left: 0px;             /* überflüssig */
           height: 18px;
           right: 0px;            /* überflüssig */
           background-color: #7d8caa;
           color: #FFFFFF;
           width: auto;       /* überflüssig, da default */
           border-top: 1px solid #fff;
           border-bottom: 1px solid #fff;
        }

        * html #verbandsbox {  /* nur fuer Internet Explorer 6*/
          position: relative;
          top: 0px;
          right: 0px;
          width: 100%;
        }

        Der Hack für den IE ist jetzt ebenfalls überflüssig.

        Mach das mal. ;-)

        Grüße
        gaby