Michael Wadewitz: Firefox >= 3.0 macht Abstand anders

Guten Tag,

ich habe am Ende meiner Seite eine Leiste mit zusätzlichen Informationen, das sieht wie folgt aus:

(c) Michael Wadewitz | Valid XHTML | Valid CSS

  
.link1 {  
margin : 0;  
padding : 0 7px 0 0;  
float : left;  
}  
.link2 {  
padding : 0 7px 0 7px;  
margin : 0;  
float : left;  
border-left : 1px solid #666666;  
}  
.link3 {  
border-left : 1px solid #666666;  
float : left;  
padding : 0 0 0 7px;  
margin : 0;  
}  

  
<ul>  
  <li class="link1">(c) Michael Wadewitz</li>  
  <li class="link2">Valid HTML</li>  
  <li class="link3Valid CSS 3.0</li>  
  <li class="left"></li>  
</ul>  

Im Firefox 3.0 ist der Abstand zwischen "Wadewitz" und "|" größer als 7px, wie kann man das beheben?

  1. Hallo,

    <li class="link3Valid CSS 3.0</li>
      <li class="left"></li>
    </ul>
    [/code]

    Im Firefox 3.0 ist der Abstand zwischen "Wadewitz" und "|" größer als 7px, wie kann man das beheben?

    gar nicht, da laut quelltext keine | vorhanden sind. Auserdem hast du bei dem LI-Element, was der klasse link3 angehört ein anführungszeichen vergessen. Wie groß ist denn der Abstand? Denn wenn er nicht all zu groß ist, merkt das niemals ein User...

    MfG. Christoph Ludwig

    --
    Wo die Sprache aufhört, fängt die Musik an...
    Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
    Go to this
    1. mit "|" ist border gemeint. der Abstand ist komischerweise doppelt so groß.

      1. Hallo,

        mit "|" ist border gemeint. der Abstand ist komischerweise doppelt so groß.

        probiers mal mit border-collapse:collapse;

        Das funktioniert zumindest bei einer tabelle. da es aber schon spät ist, verzichte ich darauf nachzugucken, ob das auch bei <li>-Elementen anwendbar ist. Aber ich denke schon :)

        MfG. Christoph Ludwig

        --
        Wo die Sprache aufhört, fängt die Musik an...
        Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
        Go to this
        1. probiers mal mit border-collapse:collapse;

          hat leider nix gebracht.

  2. hi,

    .link1 {
    margin : 0;
    padding : 0 7px 0 0;
    float : left;
    }
    .link2 {
    padding : 0 7px 0 7px;
    margin : 0;
    float : left;
    border-left : 1px solid #666666;
    }
    .link3 {
    border-left : 1px solid #666666;
    float : left;
    padding : 0 0 0 7px;
    margin : 0;
    }

      
    Wie sieht es mit den definitionen für `ul {}`{:.language-css} und `ul li {}`{:.language-css} aus?  
    Da könntest du schon mal alle `ul li {}`{:.language-css} nach links floaten und sparst dir so, für jede Klasse nochmal float zu notieren.  
      
    
    > ~~~html
      
    
    > <ul>  
    >   <li class="link1">(c) Michael Wadewitz</li>  
    >   <li class="link2">Valid HTML</li>  
    >   <li class="link3Valid CSS 3.0</li>  
    >   <li class="left"></li>  
    > </ul>  
    > 
    
    

    Der Valligator hätte dir hier nützliche Infos gegeben, insbesondere zu link3.

      
      
    <li class="link3Valid CSS 3.0</li>
    

    ^^^

    holla holla

    1. Hallo Malcolm,

      Der Valligator hätte dir hier nützliche Infos gegeben, insbesondere zu link3.

      Ja, es ist ein Valligator! Das nenn ich mal eine schöne Wortneuschöpfung. :-)
      Apropos: valligator.org und valligator.com sind noch frei...

      Grüße

      Marc Reichelt || http://www.marcreichelt.de/

      --
      panic("Oh boy, that early out of memory?");
              linux-2.2.16/arch/mips/mm/init.c
      Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
      1. hi Marc,

        Ja, es ist ein Valligator! Das nenn ich mal eine schöne Wortneuschöpfung. :-)

        Aufgrund deines Postings vermute ich jetzt mal, dass du die Geschichte des Valligators noch nicht kennst  ;)

        Apropos: valligator.org und valligator.com sind noch frei...

        valligator.de auch.

        Aber ich bin mit meinen 9 - 10 vllt. auch 11 Domains Vollzeit beschäftigt ;)

        Aber interessant, die Domainen sind ja gar nicht mal so schlecht.

        holla holla

      2. Hallo Marc!

        Ja, es ist ein Valligator! Das nenn ich mal eine schöne Wortneuschöpfung. :-)

        Neu? Wie lange liest Du hier mit? ;)

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --

            Diblom
        _ - jenseits vom delirium - _
        [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
        Nichts ist unmöglich? Doch!
        Heute schon gegökt?
    2.   
      ul {  
      margin : 0;  
      padding : 0;  
      list-style : none inside;  
      }  
      
      

      für li habe ich keine Definition eben nur die die iich in den Klassen link[123] angegeben habe.

      1. hi,

        ul {  
        margin : 0;  
        padding : 0;  
        list-style : none inside;  
        }  
        
        

        für li habe ich keine Definition eben nur die die iich in den Klassen link[123] angegeben habe.

        Hast du es in der zwischenzeit gelöst? Wenn nicht, setz erstmal alle margins und paddings im ul, also auch ul li {} auf 0 und vor allem das validieren nicht vergessen.

        holla holla

      2. Problem gelöst, hab einfach outside statt inside eingefügt.

  3. (c) Michael Wadewitz | Valid XHTML | Valid CSS

    Auch wenns schon gesagt wurde (aber du ignorierst dies ja gekonnt):
    Das stimmt so nicht (das mit dem nicht existierenden Copyright in Europa ignorier ich jetzt mal).

      
    
    > <ul>  
    >   <li class="link1">(c) Michael Wadewitz</li>  
    >   <li class="link2">Valid HTML</li>  
    >   <li class="link3Valid CSS 3.0</li>  
    
    ~~~zonk --------------------------^  
    ~~~html
    - 3.0 ist kein gültiger klassenname  
    - das class-Attribut ist nicht beendet  
    - das öffnende li-Tag ist unvollständig  
    
    >   <li class="left"></li>  
    
    und das hier ist ein unkluger Klassenname  
    
    > </ul>  
    
    

    Im Firefox 3.0 ist der Abstand zwischen "Wadewitz" und "|" größer als 7px, wie kann man das beheben?

    Firefox ist sehr behebig [1], wenns um Fehler geht.

    Anm.: Der Autor dieses Posts findet es lächerlich, wenn man sich diese "Valid HTML"- und "Valid CSS"-Aufkleber auf die Seite planzt. Das interessiert niemanden und all jene die es interessiert, wissen ohnehin wie man die Seite validiert oder den Quelltext betrachtet. Jedenfalls wird es lächerlich, wenn diese Bapperl dann nicht zutreffen.

    [1] wie bei jedem Browser ist das Fehlerkorrekturverhalten quasi nicht vorhersehbar - der Firefox behebt aber wie jeder andere Browser gerne fehler des Seitenautors.