[html] ongewenste ruimte rond images in tabelcel

[Cresso]

Zoals op het plaatje hier boven te zien is, zit er ruimte rondom plaatjes,
alleen in de hoogte. Dit is Internet Explorer te zien, Mozilla 1.4b heeft hier
daarentegen geen problemen mee (eerdere versies wel dacht ik).

De slices van de plaatjes zijn allemaal even groot, dus daar kan het niet
aan liggen. Mijn site is html 4.01 transitional validated, en voor de header
zoals op de afbeelding hierboven te zien is heb ik de volgende html code gebruikt:

HTML:

<table width="773" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td colspan="7">[img]"images/toplogo.jpg"[/img]</td>
  </tr>
  <tr> 
    <td>[img]"images/bar_L.jpg"[/img]</td>
    <td><a href="news.php"
     onMouseOver="changeImages('button_news', 'images/button_news-over.jpg'); return true;"
     onMouseOut="changeImages('button_news', 'images/button_news.jpg'); return true;">[img]"images/button_news.jpg"[/img]</a>
    </td>
    <td><a href="members.php"
     onMouseOver="changeImages('button_crew', 'images/button_crew-over.jpg'); return true;"
     onMouseOut="changeImages('button_crew', 'images/button_crew.jpg'); return true;">[img]"images/button_crew.jpg"[/img]</a>
    </td>
    <td><a href="/cgi-bin/ultimatebb.cgi"
     onMouseOver="changeImages('button_forum', 'images/button_forum-over.jpg'); return true;"
     onMouseOut="changeImages('button_forum', 'images/button_forum.jpg'); return true;">[img]"images/button_forum.jpg"[/img]</a>
    </td>
    <td><a href="wars.php"
     onMouseOver="changeImages('button_wars', 'images/button_wars-over.jpg'); return true;"
     onMouseOut="changeImages('button_wars', 'images/button_wars.jpg'); return true;">[img]"images/button_wars.jpg"[/img]</a>
    </td>
    <td><a href="fixtures.php"
     onMouseOver="changeImages('button_fixture', 'images/button_fixture-over.jpg'); return true;"
     onMouseOut="changeImages('button_fixture', 'images/button_fixture.jpg'); return true;">[img]"images/button_fixture.jpg"[/img]</a>
    </td>
    <td>[img]"images/bar_R.jpg"[/img]</td>
  </tr>
</table>

Dit stuk code zit in de middelste kolom in de bovenste rij van een tabel waar
de gehele site in zit (100%).

Weet iemand waar deze ruimtes vandaan komen?

[bRight]

kan aan de render engine van IE liggen.. af en toe wordt de onderste rij pixels niet weergegeven.

Wat trouwens ook kan helpen is ff een <br> zetten voordat je de <td> afsluit.

[Verwijderd]

Zonder echt het hele verhaal te lezen denk ik:

Images, Tables, and Mysterious Gaps

Ofwel:

code:

td img{
display: block;
}

[Verwijderd]

Waarom gebruik je eigenlijk een tabel voor je layout? Dit is toch veel makkelijker met CSS op te lossen?

Waar het aan zou kunnen liggen zijn:

• de line-breaks na de afsluitende <a>
• een display:block die je plaatjes automatisch kunnen krijgen (soms, hangt van je doctype af)

voor het 2e voeg dit toe aan je CSS:

Cascading Stylesheet:

img { display:inline; }

[Verwijderd]

Verwijderd schreef op 02 June 2003 @ 21:10:

voor het 2e voeg dit toe aan je CSS:

Cascading Stylesheet:

img { display:inline; }

Dat veroorzaakt het juist

[Verwijderd]

Verwijderd schreef op 02 June 2003 @ 21:14:
[...]

Dat veroorzaakt het juist

Whoopsadaysie! Pardon!
http://www.alistapart.com/stories/betterliving/ voor meer info

[Cresso]

Verwijderd schreef op 02 June 2003 @ 21:07:
... <knip> ....

code:

td img{
display: block;
}

Dit lost inderdaad het probleem op!

Verwijderd schreef op 02 juni 2003 @ 21:10:
Waarom gebruik je eigenlijk een tabel voor je layout? Dit is toch veel makkelijker met CSS op te lossen?

.... <knip> ....

Ik gebruik een tabel voor mijn lay-out als optimalisatie voor 800*600 gebruikers. Mijn site is namelijk breder dan 800 pixels, doormiddel van een tabel die de hele breedte van de site beslaat, kan ik de brede stukjes van de site als achtergrond plaatje laten weergeven, zodat je op een 800*600 resolutie geen horziontale scrollbalken ziet. Misschien kan dit wel makkelijker met CSS, maar zo diep heb ik mij daar in nog niet verdiept .

[Willem]

Tabellen hebben voor 800*600 "optimalisatie" niets te maken

Maar het spacing probleem in je tabel cellen had je op kunnen lossen door eerst even een beetje rond te zoeken... d'r zijn je een hoop mensen voorgegaan