Nico: Firefox bringt DOM durcheinander

Hallo,

folgender Effekt ist bei mir im FF 2 und 3 auf verschiedenen Rechnern nachvollziehbar. Ich habe auf meiner Seite mehrfach folgende Strukturen

<p>  
  <a href="link">  
    <div class="imglink">&nbsp;</div><span id="msFormat_a784nd_160">TEXT</span>  
  </a>  
</p>  

Wobei das span-Tag nicht formatiert ist, das div-Tag wie folgt definiert ist

.imglink {  
    width: 16px;  
    height: 16px;  
    float: left;  
    margin-right: 5px;  
    text-decoration: none;  
}  
  
.imglink { background: url(../images/img_link_default.gif) no-repeat left top; }  
  
p {  
    margin-top: 0px;  
    text-align: justify;  
    line-height: 150%;  
}  

Das document-model ist XHTML1 Transitional. Bitte besucht mal dev.mein-sachsen.net
Zu Beginn ist nun 100x TEXT mit einem Icon davor zu sehen. Seht euch die 100x genau an, bei wem noch keine Anomalien aufgetreten sind, der klickt einfach mal irgendwelche Links von der eigentlichen Seite (ganz unten) an, bis sich bei einem oder mehreren "TEXT"-Links was ändert.
Bei mir ist es so, dass nun scheinbar rein zufällig hin und wieder links von dem Icon vor TEXT noch ein kleiner Unterstrich (5 Pixel breit) zu sehen ist...warum? Wenn ich mir die Seite dann über den DOM-Inspector von FF ansehe, dann ist zu sehen, dass er bei den fehlerhaften TEXT-Elementen scheinbar das DOM durcheinander bringt (also nicht mehr die Hierarchie p->a->div/span beibehält).
Ich hoffe, ich konnte mein Problem erläutern und jemand hat ne Lösung parat.

Viele Grüße

  1. Als Anmerkung noch: wenn ich das Icon (also den DIV-Tag) weglasse, habe ich diese Probleme offensichtlich nicht. (Hoffe ich habe mich auch nicht im Forum vertan, weil ich hier nur von FF rede, im IE habe ich das noch nicht testen können.)

  2. folgender Effekt ist bei mir im FF 2 und 3 auf verschiedenen Rechnern nachvollziehbar. Ich habe auf meiner Seite mehrfach folgende Strukturen

    <p>

    <a href="link">

    hier ist dein <p> zu ende

    Bitte zuerst validieren, danach schimpfen...

    <div class="imglink">&nbsp;</div><span id="msFormat_a784nd_160">TEXT</span>
      </a>
    </p>

      
    mfg Beat
    
    -- 
    
    ><o(((°>           ><o(((°>  
    
       <°)))o><                     ><o(((°>o  
    Der Valigator leibt diese Fische
    
  3. Hallo!

    div-Elemente innerhalb von a-Tags sind nicht valide. Firefox bringt Dein DOM demnach nicht durcheinander, sondern korrigiert es zu einer validen Version.

    Verwende innerhalb von a-Tags lieber spans, um bestimmte Link-Inhalte zu gruppieren. Mit entsprechendem CSS verhalten sich diese zumindest Layout-technisch wie divs.

    Gruß, LX

    --
    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: Unusual
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo!

      div-Elemente innerhalb von a-Tags sind nicht valide. Firefox bringt Dein DOM demnach nicht durcheinander, sondern korrigiert es zu einer validen Version.

      Verwende innerhalb von a-Tags lieber spans, um bestimmte Link-Inhalte zu gruppieren. Mit entsprechendem CSS verhalten sich diese zumindest Layout-technisch wie divs.

      Gruß, LX

      Ok, das hat der Validator mir auch gerade gesagt ;) hätte ich wohl erst prüfen müssen, dann schau ich mal, ob sich das mit SPANs so umsetzen lässt, wie ich es brauche. Mich hat nur gewundert, dass er es nicht bei allen diesen Konstrukten macht und auch nicht immer. Ich melde mich nochmal, wenn ich das geändert hab.

      Danke

      1. Hallo,

        gib dem a-Element und wenns sein muss zusätzlich einem span-Element darin ein display:block; und es sieht genauso aus als wär ein div mit im Spiel.

        Mich hat nur gewundert, dass er es nicht bei allen diesen Konstrukten macht und auch nicht immer.

        Das ist ein bekannter Fehler, einer der vielen gründe, warum man immer mal wieder den validator anwerfen sollte :)

        Gruß