Conny: Listenmenü + unterschiedliche Interpretation v. padding

Hallo ihr,

es gibt bestimmt schon massig Antworten im Netz auf meine Frage, aber ich habe mit meinen Suchwörtern immer nur Antworten auf andere Fragen gefunden.

Links auf der Seite ist ein "Streifen" (feste Breite) für das Logo und das Menü. Letzteres habe ich aus einer Liste erstellt, und der jeweilige Rahmen, der um die Menüpunkte herum liegt, soll sich genau der Breite des "Streifens" anpassen. Macht er auch schön brav in Mozilla, Opera und IE, solange man kein padding angibt, da fällt der IE natürlich aus der Reihe und macht alles breiter als er soll. Ok, das liegt an der unterschiedlichen Interpretation der Browser von padding, aber was behebt diese Macke?

Gruß,
Conny

  1. Hi,

    Ok, das liegt an der unterschiedlichen Interpretation der Browser von padding, aber was behebt diese Macke?

    das Verlassen des Quirks-Mode und - für (noch) ältere IEs - entsprechende CSS-Hacks zur Umgehung des Box-Model-Bugs.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Moin,

      Ok, das liegt an der unterschiedlichen Interpretation der Browser von padding, aber was behebt diese Macke?

      das Verlassen des Quirks-Mode

      Da bin ich nicht drin...

      und - für (noch) ältere IEs - entsprechende CSS-Hacks zur Umgehung des Box-Model-Bugs.

      Wenn IE 6.0 zur älteren Garde gehört, weiß ich eht nicht mehr weiter...

      Noch eine Idee?

      Conny

      1. hi,

        das Verlassen des Quirks-Mode

        Da bin ich nicht drin...

        sicher?
        deine problembeschreibung spricht irgendwie dafür, dass doch.

        gruß,
        wahsaga

        --
        "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
        1. das Verlassen des Quirks-Mode

          Da bin ich nicht drin...

          sicher?
          deine problembeschreibung spricht irgendwie dafür, dass doch.

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                  "http://www.w3.org/TR/html4/strict.dtd">

          habe ich angegeben. Das ist doch richtig, oder?

          1. hi,

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                    "http://www.w3.org/TR/html4/strict.dtd">

            habe ich angegeben. Das ist doch richtig, oder?

            steht's auch ganz am dokumentanfang?

            gruß,
            wahsaga

            --
            "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
            1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">

              habe ich angegeben. Das ist doch richtig, oder?

              steht's auch ganz am dokumentanfang?

              Jupp.

              Ich habe den "Fehler" gefunden. Die Leiste links hat eine Breite von 171 Pixeln. Für die Liste gab ich u. a. an:

              li a {
               color:#F8EC11;
               text-decoration:none;
                      display:block;
               width:171px;
               padding: 6px 20px;
               font-weight:bold;
               font-size:12pt;
              }

              Das width dort musste ich um die 20px links und rechts kleiner machen. Eigentlich könnte man es ja weglassen (Die Ebene, in der die Menüleiste hat ja die richtige Breite.), aber dann haut der IE ja leider noch eine Leerzeile unter jeden Menüpunkt.

              Oder mache ich noch einen Denkfehler?

              Conny

              1. Hallo.

                Das width dort musste ich um die 20px links und rechts kleiner machen. Eigentlich könnte man es ja weglassen (Die Ebene, in der die Menüleiste hat ja die richtige Breite.), aber dann haut der IE ja leider noch eine Leerzeile unter jeden Menüpunkt.

                Für den IE ist es sicherer, sowohl display:block; als auch width:100%; anzugeben, da dieser nicht logisch versteht und bei block nicht automatisch 100% der Breite nutzt.

                Gruß, Ashura

                --

                Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
              2. Hallo,

                das Verhalten des IE bei Listen ist sowieso etwas eigen, eine etwas drastische Maßnahme zur Korrektur ist der Einsatz von float um ein Listen Menu per CSS für den IE anzupassen.

                Grüsse

                Cyx23

  2. Hallo,

    am besten mit einem zusätzlichen Div

    Das 1. Div bekommt die Angabe zum Padding und keine width, das 2. bekommt width 100%

    Damit umgehst Du den IE Box-Model-Bug ohne jeden Hack der in Zukunft u.U. problematisch werden könnte.

    Gruß

    Hans