Valign in firefox of betere oplossing?

[semicon]

Hallo,

Ik ben weer een beetje aan het updaten aan mijn site en loopt tegen het volgende probleem aan.
Ik werk nu nog met een table om kleine thumbnails te laten zien van plaatjes die je kan kiezen. Ik wil die thumbnails met een margin van ongeveer 10px tussen elke thumbnail laten zien, en de mogelijkheid dat je erop kan klikken. Eigenlijk wou ik dit met divs oplossen, maar dan loop ik steeds tegen firefox/ie problemen aan dat margin en padding niet hetzelfde zijn bij beide browsers en ik wil wel hetzelfde laten zien in alle twee.

Ik heb et dus voorlopig met een tabel geprobeerd maar heb ong. 2 problemen nog. 1) Ik vindt het niet netjes dat ik in mijn ASP code een counter moet bijhouden omdat ik de tabel <td>'s moet afmaken. en als grootste probleem in firefox zitten de plaatjes standaard bovenaan ipv gecentered dus het ziet er niet goed uit!

Ik wil als voorbeeld deze pagina maar nemen, staan er nu het meeste op en zie je wat ik bedoel: linkje


Het allerliefst zou ik het met divs willen die een relatieve positie hebben maar ik weet geen manier om de margin in beide browsers gelijk te houden! Dus elk commentaar is welkom, ik zoek nog naar een goede oplossing.

Semicon

edit: oke heb het nu voorelkaar met tables via een site die ik gevonden had, lijkt te werken iig. Nu alleen die divs nog eigenlijk want die tables is denk ik niks goed aan.

[ Voor 8% gewijzigd door semicon op 08-05-2006 18:16 ]

[JHS]

Het verschil in margin / padding kan je gewoon oplossen door de margin expliciet te setten ? Overigens is er zover ik weet geen verschil in de margin / padding van divisions en images. Als je een (verticaal) lijstje van plaatjes wil is het gewoon een kwestie van deze in een division met een fixed width zetten. Ze komen dan vanzelf onder elkaar.

Als het om een verticaal lijstje gaat (zoals hier) kan je dit met behulp van een container, en float: left; en display: block; op de images realiseren. Zie deze (oude) testcase .

[user109731]

Als je het met divs wilt doen kun je float:left; gebruiken.

Btw, ik Opera word je content helemaal niet weergegeven.

[semicon]

Owja, ik wil juist een horizontaal lijstje sorry ik wist da ik wat vergat.

http://semicon.adsoft.nl/portofoliodetaildiv.asp?num=5&cat=diversen heb et hier wel voorelkaar maar moet je dan eens kijken in firefox hoe die bugged!

edit: En dat opera probleem wil ik natuurlijk ook weg, maar die browser heb ik nu! en omg, idd heel de content gewoon weg o_0

[ Voor 22% gewijzigd door semicon op 08-05-2006 18:34 ]

[crisp]

Overigens over td's 'afmaken' - dat is niet nodig:

HTML:

<table>
  <tr>
    <td>1
    <td>2
    <td>3
    <td>4
  <tr>
    <td>5
    <td>6
</table>

volledig valid HTML

[semicon]

O dat nou dan heb ik hierbij weer wat geleerd

Maar denk nie dat ik die table wil gebruiken omdat ik iemand hier ooit heb horen zeggen dat ik beter met divs kan want die rendenren sneller door de browser ofzo. En voor zoiets wil ik gewoon een div dan hoef ik in mn asp code ook geen count te maken om te checkken wanneer ik een </tr><tr> moet doen

[semicon]

Subtiel kickje, weet iemand al waarom ik niks zie in opera? Ik heb het nog steeds niet kunnen vinden :x

[user109731]

Haal die height:100%; bij je container eens weg?

[Verwijderd]

Slightly off-topic: Het devies is overigens niet "hoe meer div's, hoe beter". Je kunt ook een class hangen aan een <a>, of je CSS goed nesten en ".container a" gebruiken om alle links binnen de div.container te stylen.

Met een wat minder cluttered HTML is het in mijn ervaring vaak eenvoudiger debuggen.

[ Voor 24% gewijzigd door Verwijderd op 10-05-2006 13:39 ]

[Michali]

2 manieren om dit op te lossen. Of doen wat Grote prutser zei, of je position: relative; uit je container weghalen. Die is sowieso overbodig, dus ik zou die weghalen. Je hebt overigens in nog veel meer elementen overbodige position: relative; definities staan, die kun je ook weghalen. En in je container defineer je 2 keer een margin, je overschrijft de eerste dus.

[semicon]

cool hij is nu bijna! helemaal gefixed, hij laat in opera alleen een rare margin zien weet nie waarom. Mja, bedankt zover het werk iig weer in opera.

[Exe-cuter]

crisp schreef op maandag 08 mei 2006 @ 18:54:
Overigens over td's 'afmaken' - dat is niet nodig:

HTML:

<table>
  <tr>
    <td>1
    <td>2
    <td>3
    <td>4
  <tr>
    <td>5
    <td>6
</table>

volledig valid HTML

Maar toch blijf ik dit een lelijke aanpak vinden

[crisp]

Exe-cuter schreef op woensdag 10 mei 2006 @ 21:38:
[...]

Maar toch blijf ik dit een lelijke aanpak vinden

Een tabel gebruiken voor deze specifieke toepassing of het feit dat in HTML sommige end-tags optioneel zijn en het aantal cellen per rij niet overeen hoeft te komen?
Voor wat betreft het eerste ben ik het met je eens, wat betreft het tweede hou ik niemand tegen om het 'netjes' te doen (maar gebruik dan ook tbody )

[Blaise]

Wat is dan het nut van een tbody (als je geen thead of tfoot gebruikt wat meestal niet het geval is)?

[user109731]

Volgens mij bedoeld crisp dat een tbody ook niet perse verplicht is. Net zoals het 'netjes' afsluiten van td's ed.

Dus als je dat laatste gaat doen (niet verplicht), waarom dan niet het eerste?

[ Voor 31% gewijzigd door user109731 op 10-05-2006 22:59 ]

[crisp]

Blaise schreef op woensdag 10 mei 2006 @ 22:27:
Wat is dan het nut van een tbody (als je geen thead of tfoot gebruikt wat meestal niet het geval is)?

Consistentie; als je tbody weglaat omdat deze implied is (en de start- en closetag dus optioneel) dan moet je html, head en body eigenlijk ook weglaten

tbody wel expliciet gebruiken heeft in ieder geval 2 voordelen: je helpt de renderengine een handje en je vergeet nooit meer dat de parsetree van een table wel altijd een tbody heeft dus je maakt minder snel de fout om die te vergeten als je met DOM-methods aan de slag gaat

[Michali]

Vooral dat laatste is handig. Daar heb ik wel eens een half uurtje mee zitten klooien voordat ik het doorhad.