IE und border-bottom linie nach einer Grafik

  • Hallo Ihr Wissenden,
    IE ist schrecklich und das ist ja nicht neu :-D. Ich möchte eine simple 3px Linie als Abgrenzung zu einer Grafik darstellen. Der IE fügt jedoch immer 2px zwischen Grafik und Linie mit ein; alle anderen Browser gehen natürlich.


    Die CSS definition für den vertikalen 100% hintergrund benötige ich ( #wrapper ). Als Beispiel habe ich den Hintergrund vom #wrapper hell gemacht, den vom #container gelb und die linie rot. Die Grafik kann eine beliebige sein. Beim IE ist zu sehen, das der Abstand zwischen Grafik und Linie gelb ausgeführt ist, was dann ja den #container zuzuschreiben ist.


    Ich stehe da vor einer M$ Wand... Hat jemand von euch eine Idee was das ist und wie ich das beseitigen kann?


    Daaaanke!
    Karsten



    Folgenden Code (sehr abgestript um das eigentliche Problem zu zeigen ) nutze ich:
    HTML:


    CSS:

  • Dein Head zwingt den IE in den Quirks-Modus, da wird dann ein anderes Box-Modell verwendet.
    Vor dem Doctype darf nichts stehen, sonst zwingt es den IE in den Quirksmodus.
    Zudem fehlt der Zeichsatz und der Titel.


    Folgender Head funktioniert in allen Browsern:

    HTML
    1. <!DOCTYPE html>
    2. <html dir="ltr" lang="de-de">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title></title>
    6. <link rel="stylesheet" href="test.css" type="text/css">
    7. </head>
  • Versuche es mal mit einem

    Code
    1. * { margin: 0; padding: 0; }


    Das sollte man nicht anwenden, da es alle Abstände entfernt und bei manchen Elementen, speziell Formular-Elementen, die Abstände dann nicht mehr hinzugefügt werden können.


    Ein

    HTML
    1. /* CSS */
    2. body {
    3. margin: 0;
    4. }


    reicht aus um den Abstand oben zu entfernen.