Lege ruimte tussen 2 onderliggende DIV's

[nowherebound123]

Medetweakers,

Ik ben bezig aan een vrij simpele layout voor een website in XHTML/CSS.

Ik zet een aantal DIVjes dmv float:left naast elkaar in css. Vervolgens moet ik direct hieronder een nieuwe rij DIVjes hebben. Deze maak ik tevens met float:left;. Vervolgens klopt dit niet helemaal, er zit namelijk een rij van een aantal pixels tussen de twee rijen en hierdoor sluiten de images niet goed aan.

Er zijn nergens rare paddings opgenomen in de CSS en de HTML lijkt ook niets mis mee te zijn. Heb al van alles geprobeerd maar kom er niet uit.

Kan iemand hier mee helpen?

Je ziet het linksboven bij het stekkertje.

website:
http://www.adopters.nl/dev/index.php

CSS
http://www.adopters.nl/dev/css/sheet.css

Alle suggesties zijn welkom..

Nils

[ Voor 3% gewijzigd door nowherebound123 op 18-09-2009 15:59 ]

[Bosmonster]

De images op display:block zetten? (of vertical-align:bottom)

(kan de case nergens vinden op je site)

Als ik je nog een usability tipje mag geven: Maak onderscheid tussen klikbare tekst en niet-klikbare tekst. Nu zijn headers en knoppen allemaal hetzelfde vormgegeven en heb je geen idee wat klikbaar is en wat niet.

[ Voor 68% gewijzigd door Bosmonster op 18-09-2009 15:59 ]

[nowherebound123]

Welke images precies? Het gaat verder om background images die in de CSS zijn aangegeven.

[MBV]

Ik heb geen idee wat je bedoelt? Ik zie alleen een kopregel die te breed is t.o.v. content.

spoiler:

en ik ga niet iemand anders zijn site debuggen in IE, firebug aanslingeren vind ik geen probleem.

[ Voor 22% gewijzigd door MBV op 18-09-2009 16:04 ]

[nowherebound123]

Ok, in Internet Explorer 7 is dit probleem wel aanwezig, firefox blijkbaar niet...

[Bosmonster]

In geen enkele browser, behalve IE7.

Als ik je nog een tip mag geven: ontwikkel je basis niet voor IE7, maar voor een Webkit-based browser of FF.

[MBV]

IE8 doet hetzelfde als Firefox. Het effect is dat je je website niet test voor browsers die door 20% + 23% + kleine browsers = 50% van de internetters wordt gebruikt.
http://marketshare.hitsli...market-share.aspx?qprid=2

edit:
With stupid ^^

[ Voor 5% gewijzigd door MBV op 18-09-2009 16:12 ]

[Bosmonster]

Dat heeft niks te maken met ontwikkelen voor de meerderheid, maar met het feit dat het gewoon minder werk is als je ontwikkelt voor browsers die wel de standaarden aanhangen en dan de bugs uit de oudere browsers haalt, ipv je website compleet verkeerd opbouwen en dan probeert deze werkend te krijgen in browsers die het wel goed doen.

[Da Weef]

Trouwens je gebruikt nu een losse div met als enige doel de banner te plaatsen. Misschien is het in dit geval handiger om de banner (inclusief stekker) als achtergrond te plaatsen in je container...

Verder idd wat Bosmonster zegt... Je hebt je pagina uitgelijnd in IE7, in FF en IE8 is de header breder dan de content. Ontwikkel voor standard-compliant browsers (FF, Opera) en gebruik conditional comments en scripts om het werkend te krijgen in IE7 & 6

[MBV]

Bosmonster schreef op vrijdag 18 september 2009 @ 16:31:
Dat heeft niks te maken met ontwikkelen voor de meerderheid, maar met het feit dat het gewoon minder werk is als je ontwikkelt voor browsers die wel de standaarden aanhangen en dan de bugs uit de oudere browsers haalt, ipv je website compleet verkeerd opbouwen en dan probeert deze werkend te krijgen in browsers die het wel goed doen.

offtopic:
Het argument dat vaak wordt gebruikt is dat 'iedereen toch IE6 gebruikt'. Dat is niet meer zo, vandaar dat ik dat wilde benadrukken. Dat het makkelijker is om eerst 'netjes' je layout te maken, en daarna de quirks van IE6/7 te omzeilen ben ik met je eens.

[ Voor 9% gewijzigd door MBV op 18-09-2009 17:02 ]