[HTML / CSS] vreemde marge onderkant table-column - Softwareontwikkeling

zondag 9 april 2006 23:29

Acties:

Topicstarter

Ik ben bezig met een projectje waarbij ik een tabel nodig heb (om tabular data in te tonen, dus helemaal semantisch correct

), maar ik loop totaal vast.

Wanneer ik in een <td> een <img> plaats ontstaat er een soort vreemde marge onder dat plaatje. Ik heb dit probleem vroeger volgens mij ook wel eens gehad (toen ik nog hele sites met tabellen bouwde), maar ik weet niet meer of en hoe ik dat toen opgelost heb.

Een voorbeeld zie je hier, en dit is de code waar het om gaat (uiteraard even gesimplificeerd zodat het wat leesbaarder is):

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
    <title>Tabelprobleem - GoT voorbeeld</title>
    <style>
        body,html
            {
                margin: 0px;
                padding: 0px;
                height: 100%;
                background-color: #000000;
                font-family: Arial, Verdana;
                font-size: 12px;
                color: #FFFFFF;
            }

        img
            {
                border: none;
            }

        td
            {
                height: 90px;
                width: 132px;
                background-color: yellow;
                vertical-align: top;
            }
    </style>
</head>

<body>

    <table cellspacing="8" cellpadding="0">
        <tr>
            <td>
                [img]"plaatje.gif"[/img]
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
    </table>


</body>

</html>

Zoeken op GoT en met Google leverde niet veel nuttigs op. Ik kwam wel dit topique tegen, maar daar kwam ik niet veel verder mee. Er wordt gezegd dat je geen enters tussen je <td>'s mag plaatsen, maar dat vind ik een raar praatje. Ik heb dit uiteraard toch even geprobeerd, maar het hielp niet...

Kortom: ik heb jullie hulp nodig. Wie weet wat er hier aan de hand is en helpt mij dit tabel-mysterie voor eens en altijd oplossen?

omniscale.nl

zondag 9 april 2006 23:39

Acties:

Verwijderd

Haal of de whitespace om je img tag weg, of voeg dit toe aan je CSS:

Cascading Stylesheet:

1	td img { display:block; }

zondag 9 april 2006 23:43

Acties:

posttoast

Topicstarter

Verwijderd schreef op zondag 09 april 2006 @ 23:39:
Haal of de whitespace om je img tag weg, of voeg dit toe aan je CSS:
Cascading Stylesheet:
1
td img { display:block; }

Nou moe: het werkt! Bedankt!

Ik heb het stukje CSS toegevoegd. Ik ben nog wel benieuwd naar het 'waarom' van deze oplossing. En wat bedoel je met haal [...] de whitespace om je img tag weg?

omniscale.nl

zondag 9 april 2006 23:52

Acties:

Verwijderd

Nou je hebt:

code:

1
2
3

            <td>
                [img]"plaatje.gif"[/img]
            </td>

Wat;

code:

1	<td>[img]"plaatje.gif"[/img]</td>

Moet zijn

maandag 10 april 2006 09:29

Acties:

Sappie

De Parasitaire Capaciteit!

posttoast schreef op zondag 09 april 2006 @ 23:43:
[...]

Nou moe: het werkt! Bedankt!

Ik heb het stukje CSS toegevoegd. Ik ben nog wel benieuwd naar het 'waarom' van deze oplossing. En wat bedoel je met haal [...] de whitespace om je img tag weg?

Een image is een inline element. Deze worden uitgelijnd op de baseline (en die bevindt zich niet helemaal onderaan de line-box). Om ervoor te zorgen dat de image wel onderaan wordt uitgelijnd in je table-cell kun je er ten eerste een block-level element van maken, zoals blues al aangeeft. Ten tweede zou je "vertical-align: bottom" toe kunnen passen, zodat het inline img-element niet op de baseline, maar helemaal onderaan de line-box wordt uitgelijnd.

[ Voor 10% gewijzigd door Sappie op 10-04-2006 09:35 ]

Specs | Audioscrobbler

maandag 10 april 2006 12:57

Acties:

posttoast

Topicstarter

Verwijderd schreef op zondag 09 april 2006 @ 23:52:
Nou je hebt:
code:
1
2
3
<td>
 [img]"plaatje.gif"[/img]
</td>
Wat;
code:
1
<td>[img]"plaatje.gif"[/img]</td>
Moet zijn

Dat had ik al geprobeerd, maar dat werkt niet. Zie dit voorbeeld.

Sappie schreef op maandag 10 april 2006 @ 09:29:
Een image is een inline element. Deze worden uitgelijnd op de baseline (en die bevindt zich niet helemaal onderaan de line-box). Om ervoor te zorgen dat de image wel onderaan wordt uitgelijnd in je table-cell kun je er ten eerste een block-level element van maken, zoals blues al aangeeft. Ten tweede zou je "vertical-align: bottom" toe kunnen passen, zodat het inline img-element niet op de baseline, maar helemaal onderaan de line-box wordt uitgelijnd.

Bedankt voor de uitleg

[ Voor 10% gewijzigd door posttoast op 10-04-2006 12:57 ]

omniscale.nl