Marge tussen divs niet weg te krijgen

[BramVroy]

Start - De Notenbalkers

Bekijk de index en nieuwspagina. Onderaan zie je dan dat de 'rounded corners' afbeelding een marge boven zich heeft, die er niet zou moeten zijn. Ik heb alles al afgezocht maar vind het niet.

Ik was de site wat aan het opmaken, wat divs te veel waren wegwerken en nu ineens dit. Zeer vreemd. Alle hulp welkom.

Eerst dacht ik dat deze marge er was wanneer de min-height overschreden werd, maar dat blijkt toch niet zo te zijn (bij bv. 'kalender' is dit niet) Ik weet dus echt niet hoe het komt.

hier zie je wat ik bedoel: http://i55.tinypic.com/20j20ap.png

[ Voor 6% gewijzigd door BramVroy op 06-03-2011 18:36 ]

[Ventieldopje]

Ik zie geen marges boven die plaatjes hoor met opera 11.01

[Xardas]

Met hem ^ - Firefox 3.6

[BramVroy]

Ventieldopje schreef op zondag 06 maart 2011 @ 18:29:
Ik zie geen marges boven die plaatjes hoor met opera 11.01

Heb net wat crossbrowsertesting gedaan:

Bij Chrome is het op de index-, nieuws-, showavondpagina.
FF: nieuws, showavond
IE9: nieuws, showavond

Zeer frustrerend...

EDIT: hier zie je wat ik bedoel: http://i55.tinypic.com/20j20ap.png

[ Voor 10% gewijzigd door BramVroy op 06-03-2011 18:36 ]

[NederB]

Het komt door de margin-bottom van 25px op de div #startfoto

edit: bij de pagina nieuws komt het doordat chrome "p" standaard margin: 1em 0px; geeft.
Tip: gebruik reset css

Conclusie: het komt door de margins op de laatste elementen

[ Voor 64% gewijzigd door NederB op 06-03-2011 18:41 ]

[Wiethoofd]

Het komt door de

HTML:

<p class="align-right small"><span>»</span> Namens het bestuur</p>

in je main content die wel een margin boven en onder heeft Op de showavondpagina gaat het trouwens ook fout met de 'toppage' die over de rounded corner afbeelding heenstaat.

---

De site ziet er compleet anders uit in IE8 en FF3.6.15

[ Voor 37% gewijzigd door Wiethoofd op 06-03-2011 18:40 ]

[BramVroy]

Bedankt NederB en Wiethoofd. Door jullie heb ik de oorzaak gevonden.
Een overflow: hidden; op contecontent lost het probleem op. Een cssreset ga ik spoedig implementeren. Bedankt!

EDIT: kan iemand me uitleggen hoe het komt dat met overflow: hidden; dit probleem weggaat?


En at Wiethoofd nog: dat kan, als je ene venster kleiner is dan je andere Er zat een resize scriptje op dat de layout aanpaste aan de schermwidth. De kleine lay-out was de oude lay-out

[ Voor 46% gewijzigd door BramVroy op 06-03-2011 21:43 ]

[crisp]

BramVroy schreef op zondag 06 maart 2011 @ 18:42:
EDIT: kan iemand me uitleggen hoe het komt dat met overflow: hidden; dit probleem weggaat?

overflow heeft invloed op margin-collapsing

[gitaarwerk]

Je zou ook nog elementen op bock kunnen zetten. Meestal <p> en <img> tags geven die problemen. Vind ik persoonlijker mooiere oplossing.

[Bosmonster]

p is standaard een block en bij images lost het soms wel iets op, maar niet dit probleem van de margin-collapse.

[R4gnax]

Bosmonster schreef op dinsdag 08 maart 2011 @ 10:04:
p is standaard een block en bij images lost het soms wel iets op, maar niet dit probleem van de margin-collapse.

Inderdaad. Bij img en andere inline replaced elementen heeft het dan in bijna alle gevallen te maken met vertical-align en (de leading afkomstig van) line-height.

[ Voor 4% gewijzigd door R4gnax op 08-03-2011 12:49 ]