Pierre: Woher kommt der Abstand bei IE im li-Tag?

Hallo zusammen

Ich ärger mich mal wieder mit der CSS-Umsetzung von IE rum. Es geht um die Unternavigation oben rechts auf meiner Musterseite. Schaut in Firefox sauber aus, aber der liebe Explorer macht zwischen den einzelnen li-Tags immer einen 2 oder 3 Pixel grossen Abstand rein. Kann mir jemand sagen woher das kommt? Der Border um die <li> kommt natürlich in der finalen Version wieder raus.

Hier die Musterseite:
http://www.per-net.ch/garage/sbs/

CSS (Definition der Navigation Zeilen 297-321)
http://www.per-net.ch/garage/sbs/fileadmin/css/main.css

Ich freu mich über jeden Tipp
Pierre

  1. Hi,

    Ich ärger mich mal wieder mit der CSS-Umsetzung von IE rum. Es geht um die Unternavigation oben rechts auf meiner Musterseite. Schaut in Firefox sauber aus, aber der liebe Explorer macht zwischen den einzelnen li-Tags immer einen 2 oder 3 Pixel grossen Abstand rein. Kann mir jemand sagen woher das kommt?

    Vermutlich line-height - könnte aber auch mit overflow:hidden beseitigt werden.

    Nebenbei bemerkt: Die unlesbar kleine Navigation soll wohl zur Erblindung der Seitenbesucher führen, damit die dann die Hörbücher kaufen?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo Andreas

      Overflow hat nix geholfen, line-height hatte ich vorher auch schon mal probiert. Für die Sehbehinderten gibts dann noch eine CSS-Alternative, die alles grösser Darstellt.

      Sonst noch Ideen?

      Und noch eine kleine Anmerkung meinerseits, der Code steht natürlich in den Zeilen 192-228. Da hab ich mich vertippt oder besser gesagt verguckt.

      Pierre

      1. Hallo,

        Overflow hat nix geholfen, line-height hatte ich vorher auch schon mal probiert. Für die Sehbehinderten gibts dann noch eine CSS-Alternative, die alles grösser Darstellt.

        dann zähl ich mich aber auch zu den Sehbehinderten.
          du solltest auch anderen Menschen die Möglichkeit geben die Navigation per Browserschriftgradgrösse einzustellen.

        gruss

        --
        no strict;
        no warnings;
        Meine Signatur hat Urlaub.
        1. Nur keine Panik ich hab ja geschrieben dass ich das noch einfügen werde. Ist erst mal die erste Musterseite dieses Layouts. Es wird noch einen Zusatzlink geben, wo man grössere Schriften, höheren Kontrast und eine Druckansicht wählen kann. Aber diese Version hier soll so bleiben. Die Navi ist vom Grafiker absichtlich mit dem Pixelfont designt worden.

          Pierre

          1. Hallo Pierre.

            Die Navi ist vom Grafiker absichtlich mit dem Pixelfont designt worden.

            Mit welcher Absicht?

            Schädigung der Augen?
            Unlesbarkeit?
            Verlust von genervten Kunden?

            Einen schönen Freitag noch.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
            Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
            [Deshalb frei! - Argumente pro freie Software]
            1. Guten Morgen Pierre,

              ich konnte dieses lästige Problem bei meinen Navis lösen indem ich via (Star html) hack dem li eine feste Höhe gegeben habe, sprich:

              * html li {
              height: 1em;
              }

              z.b.

              damit war die Darstellung für alle Browser schön einheitlich.

              vg melanie

              1. Hallo Melanie

                danke für deinen Tipp. Mit der height: 1em, bin ich zwar nicht weitergekommen, war dem IE egal, aber mit dem starhtml-Hack konnte ich dem IE einen anderen margin-bottom-Wert mitgeben und somit die Abstände mit den anderen Browsern angleichen. Ist mir zwar nicht ganz geheuer, aber in den Browsern wo ich getestet habe, sehen die Abstände nun überall gleich aus.

                Gruss
                Pierre

                1. Hallo Melanie

                  danke für deinen Tipp. Mit der height: 1em, bin ich zwar nicht weitergekommen, war dem IE egal, aber mit dem starhtml-Hack konnte ich dem IE einen anderen margin-bottom-Wert mitgeben und somit die Abstände mit den anderen Browsern angleichen. Ist mir zwar nicht ganz geheuer, aber in den Browsern wo ich getestet habe, sehen die Abstände nun überall gleich aus.

                  Hallo Pierre,

                  height: 1em; >> der Wert 1em war doch nur ein Beispielwert. Na gut hätte ich vielleicht noch dazuschreiben sollen, sorry. Du kannst da jeden beliebigen Wert hinschreiben, die Einheit sollte eben nur relativ sein (em, % ) zwecks Barrierefreiheit etc. aber das weisst Du ja.

                  Mir ist es auch lieber wenn es ohne Hacks klappt. Aber beim IE gehts einfach nicht. Er hat einfach zu viele Macken der Gute...

                  vg melanie

                2. Hallo Pierre,

                  ...] dem IE einen anderen margin-bottom-Wert mitgeben und somit die Abstände mit den anderen Browsern angleichen. Ist mir zwar nicht ganz geheuer, aber in den Browsern wo ich getestet habe, sehen die Abstände nun überall gleich aus.

                  wahrscheinlich wäre es sicherer bei allen (beteiligten) Elementen margin, padding
                  und line-height festzulegen, hast du aber vielleicht schon durch dein margin:0 usw.
                  hinreichend gemacht, dazu ggf. (für den IE) vertical-align:top;.
                  Allerdings mag die Methode erstmal für Unterschiede zwischen Opera und Mozilla
                  ausreichend sein aber beim IE und Listen doch noch Anpassungen erfordern,
                  einige Unstimmigkeiten lassen sich auch etwas rustikal per float umgehen,
                  doch da mag ein margin-bottom von 5px weniger riskant zu sein.
                  Abgesehen von den offenbar vorhandenen Bugs bei Listen gibts auch noch Unterschiede
                  durch falsche Vererbung der Schriftgrößen beim IE.

                  Grüsse

                  Cyx23

      2. Hallo.

        Da hab ich mich vertippt oder besser gesagt verguckt.

        In wen denn, oder ist diese Frage zu intim?
        MfG, at