[HTML] Tabellen met "loze ruimte"

[-Mous-]

Ik ben bezig met mijn website en tot nu toe ging alles goed, totdat ik em in Mozilla ging testen (best lekkere browser trouwens ).

Internet Explorer (klik voor een grotere)


Mozilla (klik voor een grotere)


Zoals je kunt zien zijn de tabellen niet recht. Ook de knoppen links zitten in Mozilla verder uit elkaar.

Ik heb "gesearcht" en heb gevonden dat dit zogenaamde "loze ruimte" is en dat dat opgelost kan worden door bijv. de <td> en </td> en de data ertussen in één enkele regel te zetten. Dit kan bij mij echter niet, omdat er in die regel nog een tabel zit . Mijn code wordt dan dus veelste lang.

Weet iemand hoe ik dit probleem kan oplossen? De makkelijke manier is natuurlijk mijn frame iets groter maken en de lijnen iets langer, maar ik wil het meteen goed doen.

[Verwijderd]

met css kom je ook een eind:

code:

<style type="text/css">
  td img {
    display: block;
  }
</style>

[Verwijderd]

Op bepaalde punten kun je je code wel afbreken, er zijn een aantal plaatsen voor (idd, niet allemaal even netjes)

PHP:

<table>
  <tr>
    <td style="width: 20px; border-top: 2px solid #000; padding-left: 4px;">
      [img]"eendirectory/eenplaatje/plaatje.gif"[/img]
    </td>
  </tr>
</table>

^^wil niet werken, je krijgt witruimte

<table>
  <tr>
    <td style="width: 20px; border-top: 2px solid #000; padding-left: 4px;">[img]"eendirectory/eenplaatje/plaatje.gif"[/img]</td>
  </tr>
</table>

^^ werkt wel, maar is te breed

<table>
  <tr>
    <td 
    style="width: 20px; border-top:
    2px solid #000; padding-left: 4px;"><img
     src="eendirectory/eenplaatje/plaatje.gif" alt="" /></td>
  </tr>
</table>

^^werkt ook!

wat Cheatah zegt is natuurlijk veel eenvoudiger en beter, zie dit maar als nutteloze aanvulling

[-Mous-]

hmmm, ik heb al een CSS, dus dat is makkelijk. Ik ga het meteen proberen.

Bedankt trouwens voor de snelle reply.

edit:

Dat van CSS werkt! Stom dat ik daar zelf niet achter ben gekomen, want het is verekte simpel. Enne die andere methode heb ik niet geprobeerd, want dat was me ff te veel werk.

[ Voor 46% gewijzigd door -Mous- op 02-12-2002 23:33 ]

[Dark Blue]

Heb je alle hoogtes van de tabellen in pixels aangegeven, of laat je het hem gokken dmv. de hoogte van het plaatje of de tekst die erin staat?

Hoe is de code van jouw menubalkje, links?
<td>plaatje</td>
<td>plaatje</td>

of

<td>plaatje<br>
plaatje<br>
</td> ?

Misschien zou het helpen namelijk als je dus in de tabel voor elke knop een cel aanmaakt, die je een vaste pixelhoogte geeft.
Ah, ik zie het al... zou het misschien helpen door ook de <tr> en </tr> bij op die regel te zetten? Ik doe maar een gok...

En waarom vorige en volgende verkeerd gaan, weet ik niet... ik ken Mozilla niet zo goed. Iets wat ik wel zou doen, is het frame gewoon iets langer maken, al is dat een 'foute' oplossing.

edit:
Te laat... maar ja, wat wil je, als je eerst alle 7 nieuwe tutorial video's van Designs By Mark gaat checken

[ Voor 15% gewijzigd door Dark Blue op 02-12-2002 23:46 ]

[Hangloozz]

-Mous- schreef op 02 December 2002 @ 23:28:

Dat van CSS werkt! Stom dat ik daar zelf niet achter ben gekomen, want het is verekte simpel. Enne die andere methode heb ik niet geprobeerd, want dat was me ff te veel werk.

daar kom je zelf ook niet achter
Het blijkt een andere interpretatie te zijn van XHTML bij Mozilla tov IE.
Heeft mij ook hoofdbrekens, een topic op GoT en een speurtocht op Google gekost
Hier mijn topic.

Daarnaast kom je waarschijnlijk nog wel gezeik tegen bij IE6 mbt DTD's..

[-Mous-]

Om mijn code te bekijken ga je naar deze pagina en druk je in IE op de rechter muisknop en dan op "bron" (dat wisten jullie nog niet he? ).

Zoals je dan kan zien is het aardig wat code en dus best veel werk om alles aan te passen. Die oplossing in het CSS is dus veel makkelijker.

Het lukt me trouwens nog niet om em door de validator van w3c te krijgen. Ik ga nog ff wat aanpassingen maken.

[ Voor 4% gewijzigd door -Mous- op 03-12-2002 01:17 ]

[Hangloozz]

dit noem je veel code mwoa, dan moet je de bron van de frontpage van tweakers maar es openen

Wat betreft validatie, nog wat tipjes:
- alle attributen en value's double quoten (zoals <link rel="stylesheet")
- geef alle attributen mee (zoals bij de image-tag; nu ontbreken ze heel vaak)
- Dit gaat nergens over:

code:

<tr>
  <td><br></td>
</tr>

- net als dit:

code:

<tr>
  <td><a href=""><br></a></td>
</tr>

[-Mous-]

Hangloozz schreef op 03 december 2002 @ 10:15:
dit noem je veel code mwoa, dan moet je de bron van de frontpage van tweakers maar es openen

Wat betreft validatie, nog wat tipjes:
- alle attributen en value's double quoten (zoals <link rel="stylesheet")
- geef alle attributen mee (zoals bij de image-tag; nu ontbreken ze heel vaak)
- Dit gaat nergens over:

code:

<tr>
  <td><br></td>
</tr>

- net als dit:

code:

<tr>
  <td><a href=""><br></a></td>
</tr>

Ja dat stukkie code is alleen maar omdat ik een heleboel links erin moest zetten, nu kon ik makkelijker kopieren en plakken. En ik heb voor het gemak die <a href... enz. laten staan om er later makkelijk links in te kunnen zetten