[HTML] IE6 én FF1.5 goed, maar IE7 fout! <table>

[Hs82H]

Ben ff bezig om met behulp van tables de opmaak van m'n site goed te krijgen. In IE6 en FF1.5 gaat alles perfect. Het resultaat is onderstaand plaatje en dat is wat ik wil:




In IE7 echter krijg ik het volgende te zien:




Twee dingen zijn hier anders:
1) De twee vakken zijn niet even hoog.
2) De blauwe borders links en rechts van de vlakken lopen niet van boven tot onder (slechts 1 px hoog in het midden als je goed kijkt.)

Allebei heeft eenzelfde oorzaak (nl dat <td height="100%"> niet wordt uitgevoerd), zie hier de code voor het linkervlakje.

code:

<!-- START BORDER DEEL 1 -->
<table cellpadding="0" cellspacing="0" height="100%">
<tr height="8">
<td width="8"><img src="templates/rhuk_solarflare_ii/images/border_lb.png" width="8" height="8"></td>
<td><img src="templates/rhuk_solarflare_ii/images/border_mb.png" width="100%" height="8"></td>
<td width="8"%><img src="templates/rhuk_solarflare_ii/images/border_rb.png" width="8" height="8"></td>
</tr>
<tr height="100%">
<td width="8" height="100%"><img src="templates/rhuk_solarflare_ii/images/border_lm.png" width="8" height="100%"></td>
<td width="100%" height="100%">
<!-- EINDE BORDER DEEL 1 -->
                            <div class="user1_inner">
                            <?php mosLoadModules ( 'user1', -2 ); ?>
                            </div>
<!-- START BORDER DEEL 2 -->
</td>
<td width="8" height="100%"><img src="templates/rhuk_solarflare_ii/images/border_rm.png" width="8" height="100%"></td>
</tr>
<tr height="8">
<td width="8"><img src="templates/rhuk_solarflare_ii/images/border_lo.png" width="8" height="8"></td>
<td height="100%"><img src="templates/rhuk_solarflare_ii/images/border_mo.png" width="100%" height="8"></td>
<td width="8"><img src="templates/rhuk_solarflare_ii/images/border_ro.png" width="8" height="8"></td>
</tr>
</table>
<!-- EINDE BORDER DEEL 2 -->

Ik probeer dus met <td height="100%"> de td's altijd even hoog te krijgen.

Iemand enig idee hoe ik het moet aanpassen zodat het in IE6 en 7 en FF goed werkt?

Thnx

[ Voor 1% gewijzigd door Hs82H op 23-09-2006 00:43 . Reden: verduidelijking ]

[Verwijderd]

Een aantal dingen:

Tables voor layout is not the way. Semantisch klopt daar geen hout van en je krijgt dit soort onregelmatigheden tussen IE, IE en FF. Gebruik liever de correcte tags zoals h1 voor heading1, p voor paragrafen, en div voor blokken die semantisch nergens anders in thuishoren. Deze tags kan je dan met css helemaal naar jouw needs stylen.

img-tag voor background images? Niet handig. Zorgt er onder andere voor dat je deze plaatjes kan selecteren. Dit kan je beter met css afhandelen.

Legacy attributen. Tenzij dit een html4- site is die nog moet worden omgezet, zou ik geen legacy troep gebruiken. Transitional zorgt er ook voor dat IE de pagina op een andere manier rendert.

De oplossing moet je denk ik in deze richting zoeken: Geef je html pagina het html4.01 strict doctype mee en fix de bugs in de pagina, net zolang totdat deze valid html is. Dan wordt de pagina niet meer in quirks-mode gerenderd.

[ Voor 42% gewijzigd door Verwijderd op 23-09-2006 02:18 ]