[Firefox] plaatje komt op 'volgende regel'

[MBV]

Ik heb voor iemand een site gemaakt, die binnenkort af is. Mijn geliefde firefox maakt daar alleen een render-foutje: op deze pagina wordt de 5e thumbnail een regel omlaag gegooid. Ik denk dat dat te maken heeft met de negatieve marge die ik erin heb gezet, maar zeker weten doe ik dat niet. Debuggen is ook nogal lastig: zodra ik met firebug een aanpassing doe aan de pagina is het probleem verholpen. Ook laat hij het probleem de eerste keer niet zien, omdat dan de plaatjes geladen moeten worden.

Heeft iemand een idee waar dit aan ligt? En nog belangrijker: hoe los ik het op?

[Jan_V]

Ik weet niet of een <nobr> werkt met alleen plaatjes, maar je zou het kunnen proberen.
Deze tag gebruik ik zo nu en dan als ik ten einde raad ben.

[MBV]

ten einde raad gooi ik een stukje onload-javascript erin, die de marge aanpast. Zodra er ook maar íets verandert, is het goed

[Bozozo]

Worden de thumnails samen niet gewoon breder dan de div waar ze in zitten?

[Verwijderd]

code:

#autodetails #pictures img {basic_layout.css (line 532)
border:medium none;
display:inline;
}

[MBV]

@Bozozo: nee, dat ding mag gewoon breder worden.
@maxi-pilot: ja, dat staat in mijn CSS. Wat wil je daarmee zeggen?

edit:
oh, je wilt dat ik er inline bij zet. 'k zal het proberen, maar ik zou het raar vinden als het werkt. Volgens de DOM zijn ze namelijk al inline.

Helaas, werkt niet. Betere suggesties?

[ Voor 47% gewijzigd door MBV op 11-08-2007 17:00 ]

[Verwijderd]

MBV schreef op zaterdag 11 augustus 2007 @ 16:51:
@Bozozo: nee, dat ding mag gewoon breder worden.
@maxi-pilot: ja, dat staat in mijn CSS. Wat wil je daarmee zeggen?

edit:
oh, je wilt dat ik er inline bij zet. 'k zal het proberen, maar ik zou het raar vinden als het werkt. Volgens de DOM zijn ze namelijk al inline.

Helaas, werkt niet. Betere suggesties?

ik heb display: inline toegevoegd en dan werkt het althans bij mij.

[MBV]

Zo staat hij ook nu online, en bij mij springt het laatste plaatje (na F5) weer omlaag.

[Ramon]

Zet gewoon een width: 400px; op je #pictures.

[MBV]

Dat is idd netter dan nobr, en het werkt ook nog eens Wel jammer: nu moet ik weer conditionele css-dingen voor 5 plaatjes doen.
Iemand een idee waardoor dit komt? Known bug?

[funkwurm]

Ik ben zelf wel eens het volgende probleem tegen gekomen, stel je hebt een div van een onbekende breedte en die deel je in in 5 gelijkwaardig verdeelde divs. Je initiële gedachte is width:20%.

Echter als de basis-div nou toevallig 98 pixels is, dan gaat hij de breedte van de divs die 20% breed zijn berekenen en komt hij op 19,6 pixels per div. Halve pixels bestaan niet en dus worden alle 5 de divs 20 pixels, wat een totale breedte van 100 pixels oplevert, en aangezien dat niet past binnen je 98 pixels brede hoofddiv, wordt de 5e op een volgende regel gezet.

Tot nog toe ben ik dit probleem alleen in IE tegen gekomen en heb ik het op kunnen lossen door bijvoorbeeld 19.8% te nemen waardoor de afronding naar beneden gaat en het allemaal net wel past. Maar misschien loop je hier tegen een soortgelijk probleem aan in FF.

[MBV]

Ik heb hier geen div die wordt opgedeeld in 20%, maar het is wel een negatieve marge van -1.5px, dus waarschijnlijk heeft het idd met afronden te maken.

Het is trouwens nog mooier: Firefox laat de <a></a> staan, maar de <img /> erin gooit hij naar de volgende regel (buiten de <a>) . En de negatieve marge is op de <a>... Ach, ik zal het wel fout doen. Het is verholpen, en ik ben die site inmiddels goed zat