Firefox en strict xhtml

[Cryothic]

Ik zit hier met iets vaags.

Ik heb de volgende html:

code:

    <table cellspacing="0" cellpadding="0" border="1">
        <tr>
            <td valign="top"><img src="/afbeeldingen/news/small/pic01a.jpg" alt="nieuws" border="0" /></td>
            <td valign="top"><h1>nieuws</h1>Lorem Ipsum</td>
        </tr>
    </table>

Dat is alles. Geen css, niks speciaals.
De afbeelding die getoond wordt is 109px hoog.

Nou gebruikte ik het strict doctype, en wat viel mij op? In FireFox zit er zo'n 2 pixels ruimte tussen de onderkant van de image en de border van de tabel. De tekst is te klein om dit te veroorzaken. En zelfs als ik de valign op bottom zet, veranderd er niks... de afbeelding blijft tegen de bovenkant van de tabel staan, en weer zo'n 2 pixels aan de onderkant.

Als ik het doctype aanpas naar transitional sluit de tabel netjes om de afbeelding heen.
En in IE (6&7) is dit geen probleem.

Kan iemand mij uitleggen hoe dit komt? Strict lijkt me opzich de mooiste manier van werken, maar dan moet het wel gewoon werken.

[crisp]

Dat heeft te maken met het feit dat in standards-compliant mode afbeeldingen worden uitgelijnt op de baseline, ook in table-cells. Quirksmode lijnt een enkele afbeelding in een table-cell uit op de bottom. Dit kan je in standards-mode bijvoorbeeld oplossen dmv:

Cascading Stylesheet:

td > img {
  vertical-align: bottom;
}

Maar je zou je ook kunnen afvragen of een table wel het juiste element is om hier te gebruiken...

[ Voor 18% gewijzigd door crisp op 08-01-2009 10:19 ]

[Verwijderd]

[Edit: onzin]

[ Voor 93% gewijzigd door Verwijderd op 08-01-2009 10:23 ]

[Cryothic]

Dank je, die vertical align is idd de oplossing.

Natuurlijk is een table niet altijd de ideale manier.
Maar het werkt in dit geval even het snelst.

Dank je

[harrald]

Cryothic schreef op donderdag 08 januari 2009 @ 10:25:
Dank je, die vertical align is idd de oplossing.

Natuurlijk is een table niet altijd de ideale manier.
Maar het werkt in dit geval even het snelst.

Dank je

En waarom heb je dan gekozen voor een doctype als xhtml strict als ik vragen mag?

[_Thanatos_]

Natuurlijk is een table niet altijd de ideale manier.
Maar het werkt in dit geval even het snelst.

Nouja, dat ligt aan je vaardigheden heh

[ Voor 21% gewijzigd door _Thanatos_ op 11-01-2009 03:38 ]

[mcDavid]

_Thanatos_ schreef op zondag 11 januari 2009 @ 03:38:
[...]

Nouja, dat ligt aan je vaardigheden heh

Exact het zelfde resultaat zou bereikt kunnen worden met de volgende html:

code:

<div>
  <img src="/afbeeldingen/news/small/pic01a.jpg" alt="nieuws" border="0" />
  <div><h1>nieuws</h1>Lorem Ipsum</div>
</div>

Ik denk dat we in dit geval wel kunnen stellen dat het gebruik van een table het alleen maar onnodig moeilijk maakt.