Ongevraagde witruimte

[MotleyCrue]

Hallo allemaal,

Ik zit in het 1e jaar van mn ICT opleiding en ben bezig met mijn 2e site (voor een werkstuk).
Nu heb ik nog niet gigantisch veel ervaring met html en css en zit ik met een probleem.

Mijn HTML en CSS klopt (gevalideerd bij w3c).
In Firefox wordt hij goed weergeven, maar in chrome en Safari komt er witruimte tussen 2 divjes in.



Iemand een idee om dit op te lossen? Er staan geen marges, borders of wat dan ook meer op. Wanneer je inspect element doet laat hij ook niks zien wat problemen op zou moeten leveren.

[NMe]

Er zit érgens een marge op, want anders zou je geen marge zien. Waarop die marge zou kunnen zitten hangt van je HTML en CSS af. Daar valt dus niet bijster veel over te zeggen zonder een uitgeklede testcase of een stukje (relevante!) code.

[MotleyCrue]

Heb hem op de server van school gezet.

http://athena.fhict.nl/users/i320673/securitec/

Er komt nog meer content op, maar dit stoorde me en ik zie de leraar voorlopig ook niet meer.

[ Voor 35% gewijzigd door MotleyCrue op 03-11-2014 20:16 ]

[mauricedb]

overflow:auto; op .wallone verhelpt het probleem bij mij in Chrome

[SmokingAces]

Het ligt aan de padding, voor zover ik het kan zien.
Verwijder de padding-top eens in de CSS om te testen.

[MotleyCrue]

De overflow auto verhielp het probleem ook in Safari.
Kende overflow nog niet, maar W3school verteld mij dat de content binnen wallone walltwo een stuk naar beneden duwt?
Bedankt!

De padding top is bedoeld om het tekstkopje wat naar beneden te krijgen.
Wat ik uiteindelijk gedaan heb is padding aan de onderkant toegevoegd.

Neem aan dat padding hier de voorkeur heeft boven overflow?

[mauricedb]

Vind sowieso de opzet van je html en (voornamelijk) css een beetje raar, niet heel logisch zeg maar. Op .wallone heb je idd een padding-top zitten die het iets naar beneden duwt en op de div#tekst zit een flinke margin. Dus tja, daardoor wordt de content een stuk naar beneden geduwd ja

[perpixel]

Overflow bepaald wat er gebeurd als de content buiten de div zou vallen (bijv. de div is 300px hoog maar er staat 400px aan content in). Een bijkomend "voordeel" is dat het float problemen oplost.

Stel je hebt 1 container div met 2 div's welke naar links gefloat. De container div zal dan niet de hoogte van de binnenste divs over nemen, maar naar 0 gaan (er is een reden voor, maar die kan ik zo snel niet opnoemen.). Geef je de container een overflow: hidden. Dan neemt hij deze wel mee over. Dit is de eenvoudigste manier van een "clearfix".

[MotleyCrue]

Ondanks dat de opbouw nog niet altijd een schoonheidsprijs verdient is deze wel verbeterd ten opzichte van mijn vorige site. Heb het door drukte met andere projecten niet echt tijd meer om het op te schonen. Het werkt en dat is nu even het belangrijkste. .

[MartLeFunk]

Op de body heb je background-attachment: fixed; staan. Als je deze uitzet is het probleem opgelost ;-).