Vetinari: css einstellungen für verschiedene browser

hallo,

habe ein paar probleme mit einer navigationsleiste und mir deshalb den folgenden thread angesehen:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm
dort fand ich einige gute tipps, welche ich umgesetzt habe, aber ich bekomme es nicht hin, dass die website sowohl im ie als auch im firefox gut aussieht. hier mal der link:
http://www.martinlanius.de/test.html

und hier der css teil für das script test.html:

div#Rahmen {
    width: 48.1em;
    padding-left: 0em;
    border: 0px;
    background-color: #014286;
}
* html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 47.9em;
    w\idth: 47.9em;
}
div#Rahmen div {
     clear: left;
}
ul#Navigation {
    margin: 0; padding: 0;
    font: normal 100% Verdana,Arial,Helvetica;
    text-align: center;
}
ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0em; padding: 0;
}
* html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.1em;
}
ul#Navigation a, ul#Navigation span {
    display: block;
    width: 104.8px;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0em 0em;
    text-decoration: none; font-weight: bold;
    border: 1px solid white;
    border-left-color: white; border-top-color: white;
    color: white; background-color: #4195DE;
}
* html ul#Navigation a, * html ul#Navigation span {
    width: 79.4pt;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
    w\idth: 79.4pt;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
}
ul#Navigation a:hover {
    color: white; background-color: #3154A2;
}
span#bild {
    margin-left: 0.2em;
}

mal abgesehen davon, dass die menüleiste in beiden browsern leicht unterschiedlich aussieht, rutscht das kleine bild links von der navigation im firefox zu weit nach links. deshalb hatte ich margin-left: 0.2em angegeben. hilft aber nix ...

gruss, martin

  1. Hi,

    ich bekomme es nicht hin, dass die website sowohl im ie als auch im firefox gut aussieht. hier mal der link:
    http://www.martinlanius.de/test.html

    Du solltest einen aktuellen DOCTYPE angeben und vor allem einen, der die Browser in den standardkonformen Modus versetzt, d.H. bei HTML Transitional mit Angabe der DTD.

    * html div#Rahmen {  /* Korrektur fuer IE 5.x */
        width: 47.9em;
        w\idth: 47.9em;
    }

    Dir ist klar, dass die zweite Angabe überflüssig ist, solange Du den IE6 in den quirks mode schickst?

    * html ul#Navigation a, * html ul#Navigation span {
        width: 79.4pt;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
        w\idth: 79.4pt;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
    }

    und hier ebenfalls. Abgesehen davon ist pt sehr ungeeignet für die Bildschirmdarstellung.

    freundliche Grüße
    Ingo

    1. hallo,

      das mit der pt-angabe war zu versuchszwecken, da ich die größen nicht pixelgenau hinbekommen habe, weder mit em nochmit px.

      habe das script jetzt mal mit:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
      "http://www.w3.org/TR/REC-html40/strict.dtd">
      versehen. müsste so ok sein, oder?

      die probleme bestehen aber weiter ...
      mir fiel noch auf, dass sich bei mir zwei angaben 'beißen':
      im script test.html habe ich das bild mit align="left" im <img> tag versehen. das bild soll aber per <span> anweisung in der css mit: margin-left: 0.2em; nach rechts verschoben werden. wenn ich im <img> tag das align="left" rausnehme, bekomme ich unter dem bild plötzlich einen rand, d.h. das <td> tag wird höher. keine ahnung, was da passiert ...

      gruss, martin

      1. ach ja, hier noch der link zu o.g. effekt:
        http://www.martinlanius.de/test.html

        die korrigierte angabe in der css datei lautet:
        * html ul#Navigation a, * html ul#Navigation span {
            width: 104.5px;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
            w\idth: 104.5px;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
        }

        gruss, martin

        1. Hallo

          ach ja, hier noch der link zu o.g. effekt:
          http://www.martinlanius.de/test.html

          die korrigierte angabe in der css datei lautet:
          * html ul#Navigation a, * html ul#Navigation span {
              width: 104.5px;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
              w\idth: 104.5px;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
          }

          Wie kommst du darauf, dass ein Pixel teilbar ist? Du kannst relative Einheiten wie z.B. pt, em, % teilen. Auch absolute Angaben wie cm oder mm lassen sich teilen.

          Aber ein Pixel ist ein Pixel ist ein Pixel. Schluss, Punkt, aus (sozusagen).

          Tschö, Auge

          --
          Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
          (Victor Hugo)
          Veranstaltungsdatenbank Vdb 0.2
        2. Hi,

          die korrigierte angabe in der css datei lautet:
          * html ul#Navigation a, * html ul#Navigation span {
              width: 104.5px;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
              w\idth: 104.5px;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
          }

          Da Du den IE jetzt nicht mehr in den quirks mode schickst, musst Du hier (wie auch bei den anderen Hacks) schon den korrekten Wert angeben.

          Und was das Bild betrifft: der Abstand dürfte von der reservierten Unterlänge herrühren. Definiere im CSS für das Bild display:block oder vertical-align:bottom.

          freundliche Grüße
          Ingo

      2. Hallo

        habe das script jetzt mal mit:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
        versehen. müsste so ok sein, oder?

        Nein. Nicht rumdoktern sondern erst nachdenken und dann handeln.

        im script test.html habe ich das bild mit align="left" im <img> tag versehen.

        Wenn du die Strict-Variante von HTML verwendest, stehen dir Elemente und Attribute zur (optischen) Auszeichnung (wie 'align="left"') nicht zur Verfügung. Wenn du sie dennoch verwenden willst, musst du auf HTML Transitional ausweichen.

        zum Nachlesen:
        SELFHTML: Dokumenttyp-Deklaration zeigt die verschiedenen Varianten, die jeweilige Notation und grundlegende Hinweise zu den Unterschieden. SELFHTML: HTML-Varianten geht mehr in die Details.

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.2
    2. Hi Ingo,

      * html div#Rahmen {  /* Korrektur fuer IE 5.x */
          width: 47.9em;
          w\idth: 47.9em;
      }
      Dir ist klar, dass die zweite Angabe überflüssig ist, solange Du den IE6 in den quirks mode schickst?

      Mich würde mal interessieren, was die zweite anweisung überhaupt bewirkt.
      Hab das jetzt schon ein Paar mal gesehen, aber noch keine beschreibung, was das bewirkt.
      Auch CSS font angaben wie

        
      font: 13px/24px  "Lucida Grande", Lucida, Verdana;
      

      ^^^^^^^^^
      Kennst du eine Seite, wo diese angaben erklärt werden?

      Grüße,
      Engin
       GYRO

      1. Grütze .. äh ... Grüße!

        font: 13px/24px  "Lucida Grande", Lucida, Verdana;

        
        >       ^^^^^^^^^  
        > Kennst du eine Seite, wo diese angaben erklärt werden?  
          
        [Ich kenne eine](http://jendryschik.de/wsdev/einfuehrung/eigenschaften/schrift#font) ;)  
          
        Cü  
        Kai
        
        -- 
        [Der vertuschte Gefahrstoff: Dihydrogenmonoxid](http://www.dhmo.de/fakten.html)  
          
        ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
        
        1. Hi Kai,

          font: 13px/24px  "Lucida Grande", Lucida, Verdana;

          
          > >       ^^^^^^^^^  
          > > Kennst du eine Seite, wo diese angaben erklärt werden?  
          >   
          > [Ich kenne eine](http://jendryschik.de/wsdev/einfuehrung/eigenschaften/schrift#font) ;)  
            
          Die kenn ich doch auch. ;-)  
          Hab noch nie line-height benützt, werde ich gleich mal beschnuppern.  
            
          Bleibt noch die Frage, warum man sowas  
            
          
          > >     width: 47.9em;  
          > >     w\idth: 47.9em;  
            
          macht.  
            
          Grüße,  
          Engin  
           GYRO
          
          -- 
          [Hang the DJ](http://www.myvideo.de/watch/433794) | [Team Vestax - Limited Edition](http://nimmet.de/nimmet-bilder/vestax.JPG)  
          
          
          1. Grütze .. äh ... Grüße!

            Bleibt noch die Frage, warum man sowas

            width: 47.9em;
                w\idth: 47.9em;

            macht.

            Das ist allerdings _so_ sinnlos. Üblicherweise setzt man sowas ein, wenn man alten Browsern wie IE 5 eine /andere/ Breite geben will als allen neueren Browsern, aber mit gleichen Werten ist es einfach nur hyperliquid.


            Kai

            --
            Der vertuschte Gefahrstoff: Dihydrogenmonoxid
            ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
            1. Hi Kai,

              Bleibt noch die Frage, warum man sowas

              width: 47.9em;
                  w\idth: 47.9em;

              macht.

              Das ist allerdings _so_ sinnlos. Üblicherweise setzt man sowas ein, wenn man alten Browsern wie IE 5 eine /andere/ Breite geben will

              Dann wäre das Rätsel ja endlich gelöst. ;-)
              Ich werd mir mal dieses Multiple IE auf den Rechner packen.
              IE 6 hab ich mittlerweile halbwegs im Griff, jetzt muss ich mir mal den IE 5 zur Brust nehmen.

              Grüße,
              Engin
               GYRO

              1. Hi,

                Bleibt noch die Frage, warum man sowas

                width: 47.9em;
                    w\idth: 47.9em;

                macht.

                Das ist allerdings _so_ sinnlos. Üblicherweise setzt man sowas ein, wenn man alten Browsern wie IE 5 eine /andere/ Breite geben will

                Dann wäre das Rätsel ja endlich gelöst. ;-)

                ein Rätsel war das eigentlich nie. In Deinem Anfangscode hattest Du doch die Kommentare stehen gelassen:
                    width: 79.4pt;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
                    w\idth: 79.4pt;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */

                Diese hättest Du vielleicht auch lesen (und verstehen) sollen...
                Über den Star-HTML-Hack wird das nur den IEs vorgesetzt und über den Tan-Hack die Angabe für den 6er im standardkompatiblen Modus überschrieben - was natürlich normalerweise mit dem korrekten Wert für alle übrigen Broser erfolgen sollte.

                Ich werd mir mal dieses Multiple IE auf den Rechner packen.
                IE 6 hab ich mittlerweile halbwegs im Griff, jetzt muss ich mir mal den IE 5 zur Brust nehmen.

                Du vergißt den 7er. Aber der verhält sich bei einem entsprechendem DOCTYPE mit etas Glück wie andere standardkonforme Browser.

                freundliche Grüße
                Ingo

                1. Hi Ingo,

                  width: 47.9em;
                      w\idth: 47.9em;
                  Dann wäre das Rätsel ja endlich gelöst. ;-)

                  ein Rätsel war das eigentlich nie. In Deinem Anfangscode hattest Du doch die Kommentare stehen gelassen:
                      width: 79.4pt;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
                      w\idth: 79.4pt;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */

                  Wenn man sich diese beispiele ansieht wirft das ja ganz andere fragen
                  auf, mir war nur nicht in den Sinn gekommen, das das beispiel des Op
                  völlig sinnlos ist.
                  Was soll man denn auch unter

                  width: 79.4pt;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
                  w\idth: 79.4pt;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */

                  verstehen, zweimal die exakt gleiche angabe für width.

                  Diese hättest Du vielleicht auch lesen (und verstehen) sollen...

                  Das stimmt allerdings.

                  Über den Star-HTML-Hack wird das nur den IEs vorgesetzt und über den Tan-Hack die Angabe für den 6er im standardkompatiblen Modus überschrieben -

                  Ich hätte wohl doch mal das Kapitel CSS-Browserweichen zum Ausschließen älterer Browser durchlesen sollen,
                  hatte ich bis Heute versäumt.

                  Ich werd mir mal dieses Multiple IE auf den Rechner packen.
                  IE 6 hab ich mittlerweile halbwegs im Griff, jetzt muss ich mir mal den IE 5 zur Brust nehmen.

                  Du vergißt den 7er. Aber der verhält sich bei einem entsprechendem DOCTYPE mit etas Glück wie andere standardkonforme Browser.

                  Nein, nicht vergessen, hab nur leider keinen zur Hand, ab und zu kommt mir mal ein IE 7
                  unter die Finger, da versuche ich schnell offensichtliche fehler an Ort und Stelle
                  zu beheben.
                  Kommt Zeit kommt IE 7.

                  Grüße,
                  Engin
                   GYRO

  2. hallo,

    habe ein paar probleme mit einer navigationsleiste und mir deshalb den folgenden thread angesehen:
    http://de.selfhtml.org/css/layouts/navigationsleisten.htm
    dort fand ich einige gute tipps, welche ich umgesetzt habe, aber ich bekomme es nicht hin, dass die website sowohl im ie als auch im firefox gut aussieht. hier mal der link:
    http://www.martinlanius.de/test.html

    Hi Martin,
    wo in deinem jetzigen code der Fehler liegt, ist etwas zeitaufwendig zu sagen. Schmeiß erstmal alle Tabellen raus (valides XHTML / CSS: keine Tabellen für Designzwecke!!!). Dieser code würde mit den richtigen stylings reichen, um alles darzustellen.

    <div id="navi">
      <ul>
        <li><a href="#Beispiel">Startseite</a></li>
        <li><a href="#Beispiel">Produkte</a></li>
        <li><a href="#Beispiel">Neu</a></li>
        <li><a href="#Beispiel">Alabaster</a></li>
        <li><a href="#Beispiel">&Uuml;ber uns</a></li>
        <li><a href="#Beispiel">Kontakt</a></li>
      </ul>
    </div>

    Für die Zentrierung in der Seite gibst du dem div feste Breite und setzt margin left und right auf auto. Und gib ihm das komplette Hintergrundbild oder setz dein Logo vielleicht in ein zusätzliches div vor die ul, damit du es evtl. verlinken kannst. Ach ja, das Javascript, warum benutzt du das?

    Gruß
    Antipitch

    1. Hallo

      ... Ach ja, das Javascript, warum benutzt du das?

      Damit eine Ausklappnavigation (die momentan HTML-seitig allerdings nicht notiert ist) auch im MSIE < 7 funktioniert.

      Tschö, Auge

      --
      Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
      (Victor Hugo)
      Veranstaltungsdatenbank Vdb 0.2
    2. hallo,

      habe den rat von antipitch befolgt und alle tabellen rausgeworfen, die bilder zu einem hintergrundbild zusammengefasst und meine navi draufgesetzt. tolle sache - siehe hier:
      http://www.martinlanius.de/test2.html
      aber nur mit dem ie! im firefox fehlt das hintergrundbild und eine tabelle, welche darunterhängt und mittig gesetzt ist, rutscht neben die navi :-(

      hier noch mal die komplette neue css:

      div#Top {
          background-image: url(images/alabaster_top.jpg);
          width: 765px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 0;
          border: 0;
      }
      div#Block {
          width: 643px;
          margin-left: 122px;
          margin-top: 91px;
          border: 0;
      }
      ul#Navigation {
          margin: 0;
          padding: 0;
          text-align: center;
      }
      ul#Navigation li {
          list-style: none;
          float: left;  /* ohne width - nach CSS 2.1 erlaubt */
          position: relative;
          margin: 0;
          padding: 0;
      }
      ul#Navigation a {
          display: block;
          width: 105px;  /* Breite den in li enthaltenen Elementen zuweisen */
          padding: 0;
          text-decoration: none;
          font: bold 13px Verdana,Arial,Helvetica;
          border: 1px solid white;
          border-left-color: white; border-top-color: white;
          color: white; background-color: #4195DE;
      }
      * html ul#Navigation a, * html ul#Navigation span {
          width: 105px;   /* Breite Block nach altem MS-Boxmodell für IE 5.x */
          w\idth: 105px;  /* korrekte Breite Block fuer den IE 6 im standardkonformen Modus */
      }
      ul#Navigation a:hover {
          color: white; background-color: #3154A2;
      }

      gruss, martin

      1. Yerf!

        hallo,

        habe den rat von antipitch befolgt und alle tabellen rausgeworfen, die bilder zu einem hintergrundbild zusammengefasst und meine navi draufgesetzt. tolle sache - siehe hier:
        http://www.martinlanius.de/test2.html
        aber nur mit dem ie! im firefox fehlt das hintergrundbild und eine tabelle, welche darunterhängt und mittig gesetzt ist, rutscht neben die navi :-(

        Das mit der Tabelle liegt an dem float:left der <li>s. Gib der Tabelle ein clear:left um das zu beheben.

        Und bei dem Hintergrundbild war ich erst selbst am rätseln, da mir mein FireBug das Div nicht gehighlighted hat, als wär es nicht da... Als ich ihm dann einen Rahmen gab, war es plötzlich inklusive Hintergrund da. Klingt verdächtig nach Collapsing Margins dachte ich mir da... und tatsächlich: gib nicht dem div#block den margin-top, sondern dem div#top ein padding-top, dann geht es.

        Gruß,

        Harlequin

        1. hallo,

          danke für alle tipps! jetzt habe ich es fast...
          der firefox braucht für den unteren container (orange) ein margin-top, damit dieser nicht hoch hinter die navi rutscht.

          hier mal die css angabe zu dem <div> Inhalt:

          div#Inhalt {
              width: 765px;
              background-color: orange;
              margin-left: auto;
              margin-right: auto;
              margin-top: 18px;
              min-height: 200px;
              border: 0;
          }

          damit sähe es im firefox gut aus, während im ie der container Inhalt jetzt nach unten rutscht, was natürlich nicht sein soll...

          und hier mal der link zum ergebnis ohne margin-top: 18px;

          www.martinlanius.de/test2.html

          wahrscheinlich brauche ich nur noch irgendwo die richtige padding angabe, oder eine anweisung, welche nur für den ie bestimmt ist - aber wie und wo genau?

          gruss, martin

          1. Yerf!

            wahrscheinlich brauche ich nur noch irgendwo die richtige padding angabe, oder eine anweisung, welche nur für den ie bestimmt ist - aber wie und wo genau?

            Hm, ich würde hier das margin-top glaub ich einfach vor dem IE verstecken:

            #Top>#Inhalt{
            margin-top:18px;
            }

            Den > Selektor kann der IE 6 nicht und ignoriert diese Regel. Allerdings müsste man das ganze mal im IE7 testen, da hab ich gerade keinen zur Hand. Notfalls müsste man das über Conditional Comments lösen, da kann man dann genau angeben, für welche IE-Versionen das sein soll.

            Gruß,

            Harlequin

            1. danke, so was hatte ich gesucht ...
              komisch allerdings, dass der container Top im firefox jetzt trotz margin-top: 0; nicht (mehr) am oberen bilschirmrand hängt, sondern 4-5 pixel darunter ...

              gruss, martin

              1. Yerf!

                komisch allerdings, dass der container Top im firefox jetzt trotz margin-top: 0; nicht (mehr) am oberen bilschirmrand hängt, sondern 4-5 pixel darunter ...

                Das liegt daran, dass der Body noch ein Margin von 8px hat. Wirf mal die veralteten Attribute aus dem Body-Tag raus und steuer das über CSS:
                body{margin:0}

                Kleiner Tipp noch: hol dir mal für den Firefox den Firebug, damit kann man sehr gut eine Seite analysieren (damit hab ich auch schon die ganze Zeit gesucht). Für den IE gibts auch was, nennt sich IE Developer Toolbar und ist von MS, ich hab blos grad keinen Link parat.

                Gruß,

                Harlequin

                1. Kleiner Tipp noch: hol dir mal für den Firefox den Firebug, damit kann man sehr gut eine Seite analysieren (damit hab ich auch schon die ganze Zeit gesucht).

                  Gerade wenn es um CSS geht, gefällt mir besser Web Developer, damit kannst du live das CSS bearbeiten und die Veränderungen sehen.

                  Struppi.

                    1. hallo leute,

                      habe jetzt mal die seiten hochgeladen und siehe da: schon wieder ein neuer effekt: im ie rutscht alles in die linke ecke. habe jetzt mal alle margin anweisungen für <body> rausgenommen, da ja der container Top den gesamten inhalt aufnimmt, aber keine änderung.
                      die site setzt sich jetzt aus drei php dateien zusammen: index_neu.php und per include: header_neu.php und footer_neu.php

                      hier der link: www.alabaster-world.de/index_neu.php
                      bitte keinen weiteren links folgen, da es nur um die index_neu.php geht.

                      gruss, martin

                      1. hier der link: www.alabaster-world.de/index_neu.php

                        ich hab den Thread nicht verfolgt und weiß daher nicht ob dir das schon gesagt wurde, aber die Seite ist im Quirksmodus, was bedeutet das der IE im fehlerhaften Boxmodell ist und die Abstände falsch berechnet. Darüber hinaus zeigt die Fehlerkonsole im FF zwei CSS Fehler an.
                        Darüber hinaus hat die Seite aber noch mehr Fehler

                        Struppi.

                      2. Yerf!

                        habe jetzt mal die seiten hochgeladen und siehe da: schon wieder ein neuer effekt: im ie rutscht alles in die linke ecke. habe jetzt mal alle margin anweisungen für <body> rausgenommen, da ja der container Top den gesamten inhalt aufnimmt, aber keine änderung.

                        Dese Seite hat auch einen anderen Doctype, als die Testseite. Durch HTML Transitional ohne DTD-Angabe landet der IE im Quirksmode, dadurch kann er keine Zentrierung per margin:auto.

                        hier der link: www.alabaster-world.de/index_neu.php
                        bitte keinen weiteren links folgen, da es nur um die index_neu.php geht.

                        Die Seite zeigt bei der Validierung (ich hab im Firefox noch das Tidy-Plugin, das automatisch HTML-Fehler anzeigt) kommen auch noch 21 Meldungen...

                        Scheinen aber nur 4 Fehler zu sein: <style type=text/css> der Wert hinter Type muss in Anführungszeichen. Dann meckert er noch am <embed> und <bgsound> rum (gehören nicht zum HTML-Standard) und in einem Link darf kein <hr> sein.

                        Gruß,

                        Harlequin

                        1. die guten alten fehler beim paste and copy ;-)
                          klar, der doctype war dabei verlorengegangen ...
                          jetzt sieht es gut aus!

                          danke, martin

                  1. Yerf!

                    Gerade wenn es um CSS geht, gefällt mir besser Web Developer, damit kannst du live das CSS bearbeiten und die Veränderungen sehen.

                    Die hab ich auch drauf, benutze sie aber kaum noch, da Firebug mir persönlich eher zusagt. Das live editieren geht damit ebenfalls.

                    Gruß,

                    Harlequin

                2. hallo leute,

                  habe jetzt mal die seiten hochgeladen und siehe da: schon wieder ein neuer effekt: im ie rutscht alles in die linke ecke.

                  wenn ich alle margin anweisungen für <body> rausnehme, da ja der container Top den gesamten inhalt aufnimmt und darstellt, werden laut ie developer tool irgendwelche margin-werte für <body> gesetzt top: 15px, left: 10px, bottom: 15px usw.
                  wenn ich margin-top auf 0 setze, wird dies auch ausgeführt, aber margin left und right auf auto bríngt keinen erfolg ...

                  die site setzt sich jetzt aus drei php dateien zusammen: index_neu.php und per include: header_neu.php und footer_neu.php

                  hier der link: www.alabaster-world.de/index_neu.php
                  bitte keinen weiteren links folgen, da es nur um die index_neu.php geht.

                  gruss, martin

      2. http://www.martinlanius.de/test2.html
        aber nur mit dem ie! im firefox fehlt das hintergrundbild und eine tabelle, welche darunterhängt und mittig gesetzt ist, rutscht neben die navi :-(

        Hi Martin,
        sieht doch schon gut aus.

        1. Das äußere div ist im Grunde noch eins zuviel. Du kannst es aber auch als Zentrierungscontainer für deine Navi und alle noch folgenden Elemente der Seite benutzen. Dann gibtst du halt nur dem das margin left und right auto. Hättest du die Tabelle (die du ja nicht benutzen wirst ;-) unterhalb der Navi aber innerhalb von div "top" mit den neuen margins notiert, wäre sie auch in der Mitte.

        2.Gib dem div mit dem Hintergrundbild eine min-height Angabe, dann zeigt es auch Firefox.

        Gruß
        Antipitch