[css/html] cell hoogte klopt niet

[bakakaizoku]

Om meteen met de pagina met het probleem in huis te vallen: http://cc2656-b.deven1.ov...e_id=forums&showThread=61 (en nou even niet zeuren dat het ook in divjes kan worden gemaakt aub)

Zoals te zien is in het probleem, is dat de rechter cell niet bovenaan de table begint.

De table structuur is het volgende:

HTML:

<table id="forumPosts" cellspacing="1" cellpadding="0">
    <tr>
        <td rowspan="4" class="light userInfo">
            Links, Rowspan=4
        </td>
    </tr>
    <tr>
        <td class="light data top">
            Header
        </td>
    </tr>
    <tr>
        <td class="light data txt">
            Content
        </td>
    </tr>
    <tr>
        <td class="light data bottom">
            Footer
        </td>
    </tr>
</table>

En de bijbehorende CSS

Cascading Stylesheet:

#forumPosts td {
    text-align: left;
    vertical-align: top;
}

#forumPosts td.light {
    background-color: #57544b;
}

#forumPosts td.dark {
    background-color: #4a473e;
}

#forumPosts td.userInfo {
    padding: 10px;
    width: 130px;
}

#forumPosts td.userInfo a.username {
    font-weight: bold;
    text-decoration: none;
    color: #dac51c;
    font-size: 11px;
}

#forumPosts td.userInfo img.avatar {
    border: 1px solid #0f0f0f;
    width: 84px;
    height: 84px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#forumPosts td.userInfo span.title {
    font-size: 9px;
    color: #c8be6a;
    font-weight: normal;
}

#forumPosts td.userInfo span.info {
    color: #c8be6a;
    font-size: 9px;
}

#forumPosts td.data {
    width: 590px;
    font-size: 10px;
    color: #dac51c;
}

#forumPosts td.txt {
    padding: 10px;
}

#forumPosts td.top {
    height: 25px;
}

#forumPosts td.bottom {
    height: 20px;
}

Nu is mijn vraag uiteraard, hoe los ik die ene pixel op

[Minos111]

Haalt het aanzetten van border-collapse iets uit?

Cascading Stylesheet:

#forumPosts table {
    border-collapse: collapse;
}

[bakakaizoku]

Dan verdwijnt de border helemaal..

[OnTracK]

je HTML klopt gewoon niet, je hebt een rowspan van 4, terwijl er maar 3 cellen naast staan. Bovendien gooi je gelijk een nieuwe regel ertegenaan terwijl de "test2" op gelijk hoogte moet beginnen. Je HTML moet zijn:

HTML:

<table id="forumPosts" cellspacing="1" cellpadding="0">
    <tr>
        <td rowspan="3" class="light userInfo">
rowspan is 3!
            Links, Rowspan=3
        </td>
niet je tr afsluiten en een nieuwe beginnen, want je wil 
op dezelfde regel door
        <td class="light data top">
            Header
        </td>
    </tr>
    <tr>
        <td class="light data txt">
            Content
        </td>
    </tr>
    <tr>
        <td class="light data bottom">
            Footer
        </td>
    </tr>
</table>

[ Voor 95% gewijzigd door OnTracK op 02-01-2005 13:44 ]

[crisp]

Je tabelstructuur klopt gewoon niet:

HTML:

<table id="forumPosts" cellspacing="1" cellpadding="0">
    <tr>
        <td rowspan="3" class="light userInfo">
            Links, Rowspan=4
        </td>
        <td class="light data top">
            Header
        </td>
    </tr>
    <tr>
        <td class="light data txt">
            Content
        </td>
    </tr>
    <tr>
        <td class="light data bottom">
            Footer
        </td>
    </tr>
</table>

[bakakaizoku]

Ahh... spanx, blijkbaar dus te lang geleden dat ik met tables heb gewerkt..

Ik vond het al stom dat hij alleen maar bij een rowspan van 4 enigzins deed wat ik wou, enfin, slotje