Jonas Dinkelmann: Liste im Firefox und IE nicht gleich

Hallo zusammen
Ich habe hier schon seit einiger zeit folgendes Problem:

<style type="text/css" media="screen">
body
{
 margin: 0;
 padding: 0;
 text-align: left;
}

#subnavlist
{
 list-style-type:none;
 margin: 0px 0px 0px 0px;
}
</style>

<ul id="subnavlist">
<li><a class="sublink" href="">Bla</a></li>
<li><a class="sublink" href="">Blabla</a></li>
<li><a class="sublink" href="">Blablabla</a></li>
<li><a class="sublink" href="">Blablablabla</a></li>
<li><a class="sublink" href="">Blablablablabla</a></li>
</ul>

Dies ist nur ein kurzer Auszug ohne <html>-Tags etc.

Das Problem ist, dass im Firefox die Liste nicht ganz am linken Rand ist, wie es eigentlich sein sollte.
Wenn ich margin-left auf z.B. -30px setze dann sieht im Firefox gut aus, leider geht es dann im IE über den Eand hinaus.

Könnt ihr mir helfen?

Gruss Jonas

  1. Hi,

    Ich hab da mal etwas ergaenzt. Bin mir nicht sicher, welche der Eigenschaften fuer das Verhalten verantwortlich ist, aber wenn du margin und padding von ul und li auf 0 setzt muesste es auf jeden Fall klappen.

    <style type="text/css" media="screen">
    body
    {
    margin: 0;
    padding: 0;
    text-align: left;
    }

    #subnavlist
    {
    list-style-type:none;
    margin: 0px 0px 0px 0px;

    Das ist das gleiche wie "margin: 0;".
    padding: 0;

    }

    #subnavlist li {
    margin: 0;
    padding: 0;
    }

    </style>

    <ul id="subnavlist">
    <li><a class="sublink" href="">Bla</a></li>
    <li><a class="sublink" href="">Blabla</a></li>
    <li><a class="sublink" href="">Blablabla</a></li>
    <li><a class="sublink" href="">Blablablabla</a></li>
    <li><a class="sublink" href="">Blablablablabla</a></li>
    </ul>

    mfG,
    steckl

    1. Vielen Dank, sieht schon viel besser aus.
      Jetzt habe ich noch ein anderes Problem:
      http://mekmek.ch/tibet-forever.ch/

      Zwischen den Navigationspunkten gibt es im IE einen recht grossen Abstand, welcer eigentlich nicht sein sollte.
      Auch noch so ne gute Lösung?

      1. Hallo Jonas,

        Lass mal ein Leerzeichen vor dem schliessenden </a> weg.

        <li><a class="sublink" href="">Blablablablabla </a></li>
        ----------------------------------------------^
        Ich habe keine Ahnung, warum das funktioniert, aber oftmals ueberredet das den IE zur Mitarbeit.

        Auf die Klasse sublink kannst du verzichten, weil du die Links bereits mit
        #subnavlist a{} ansprechen kannst.

        Gruß,

        Dieter

        1. Icvh habe vorher etwas Unsinn getippt:

          Lass mal ein Leerzeichen vor dem schliessenden </a> weg.

          sollte eigentlich heissen:

          Bau vor dem schliessenden </a> mal ein Leerzeichen ein.

          Gruß,

          Dieter

          1. Hallo,

            ich würde das Leerzeichen weglassen.
            Dann würde ich dem li-Element eine height und eine line-height geben.
            Die Abständer der LI-Elemente sollten dann gleich sein.

            Gruß,
            Floater

          2. Danke euch vielmal. Ich verwende jetzt mal die methode mit den Lehrzeichen, dass mit der Höhe will auch nicht so recht klappen.

            Was haltet ihr sonst so vom Design und dem Code?

        2. ach nee meine Lösung funktioniert doch nicht.
          Danke für den Tipp mit der Klasse, das mit dem Lehrzeichen verstehe ich nicht, da ist doch garkein Lehrzeichen :S

          1. Hallo Jonas,

            da ist doch garkein Lehrzeichen

            Lies mein Posting mit dem Titel 'Korrektur'

            Gruß,

            Dieter

        3. Danke euch vielmal. Ich verwende jetzt mal die methode mit den Lehrzeichen, dass mit der Höhe will auch nicht so recht klappen.

          Was haltet ihr sonst so vom Design und dem Code?

      2. So, hab selber ne Lösung gefunden. Musste die Schriftgrösse in der Aufzählung nochmals angeben, obwohl das irgendwie kein Sinn ergibt.

        Dennoch vielen Danl