hoogte van tabel rekt niet uit binnen parent-element

[link0007]

Het probleem is dat de rechter-schaduw bij de meeste browsers niet wilt uitbreiden tot de hoogte van de td ernaast.

Hier is de code waar het uiteindelijk om gaat:

XML:

<table cellspacing="0" cellpadding="0" border="0" id="details_total">
    <tbody>
        <tr>
            <td>
                <table cellspacing="0" cellpadding="0" border="0" id="details_table">
                    <tbody>
                        <tr id="top">
                            <td id="top_middle">test uploading</td>
                        </tr>
                        <tr id="middle">
                            <td id="middle_content">
                                blabla..blabla..
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 50px; height: 100%;">
                <table cellspacing="0" cellpadding="0" border="0" id="shadow_right_table" style="height: 100%;">
                    <tbody>
                        <tr>
                            <td id="shadow_top_right"/>
                        </tr>
                        <tr>
                            <td id="shadow_middle_right"/>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Het probleem zit hem bij de shadow_right_table, die niet de hoogte wilt aannemen van de td waar hij zich in bevindt.

Voor verdere analyse en zo (css bijvoorbeeld) kan gekeken worden bij de daadwerkelijke pagina, waarvan ik de link liever niet hier neerzet vanwege zoekmachines.

Kan iemand mij uitleggen wat ik verkeerd doe? Ik ben geen held als het gaat om de quirks van markup, maar in mijn ogen verteld de code prima wat er moet gebeuren wat betreft hoogte.

Ik heb al geprobeerd om shadow_right_table als height 'inherit' op te geven, maar dat leek geen verschil te maken.

[ Voor 5% gewijzigd door link0007 op 16-09-2008 00:16 ]

[Boelie-Boelie]

Met dit stukje code en wat screenshots krijg je geen fatsoenlijke antwoorden, want er is nog teveel onduidelijk. Wel is duidelijk dat hier niet al die tabellen voor nodig zijn (of tabellen übehaupt). Ook hoeft men het linkje naar je site niet, slechts een geïsoleerde testcase (d.w.z. het probleem teruggebracht tot de HTML van zo'n blokje en de bijbehorende CSS).

[link0007]

Zal inderdaad ook wel fijn zijn als er uiteindelijk minder tabellen-gegoochel voor nodig is


edit: Door de shadow_right_table een achtergrond te geven, en daarin een div te plaatsen met de rechterbovenhoekafbeelding, heb ik het probleem in alle browsers behalve Safari opgelost.

en aangezien 4.6% van mijn gebruikers Safari gebruikt, lijkt het me wel zo aardig om het daar ook in op te lossen.

edit2: En fixed in alle browsers

[ Voor 57% gewijzigd door link0007 op 16-09-2008 00:17 ]