Waarom "stretcht" div niet mee?

[ViNyL]

Ik heb de volgende div + spans in een html file zitten:

code:

<div id="under">
 <span class="last-projects">
   <h1>LAATSTE PROJECTEN:</h1>
    <ul>
      <li>Project 1 bij  projecten  langere naam</li>
      <li>Project 2 bij laatste projecten</li>
      <li>Project 3 bij laatste projecten</li>
     </ul>
   </span>
   <span class="random-text">
    <h2>&#8220;Een tuin om eindeloos van te genieten, een plek waar u zich thuis voelt, een verlengstuk van uw woonkamer. Uw tuin, op uw wensen gemaakt, en met veel zorg ontworpen.&#8221;</h2>
   </span>   
</div>

Met daarbij wat opmaak in css:

Cascading Stylesheet:

div#under {
background-image:url(images/line-under.gif);
width:885px;
margin-left: 9px;
border:1px solid #000;
}


div#under .last-projects {
float: left;
width: 400px;
margin-left: 30px;
}

div#under .random-text {
float: right;
width: 400px;
margin-right: 30px;
}

div#under .last-projects ul{
list-style-type: none;
list-style-image:url(images/arrow.gif);
margin-left: 20px;
padding: 0px;
text-indent: 0px;
}

Om de een of andere reden slikt Internet Explorer wel het feit dat alles in de div "UNDER" ook de achtergrond "line-under.gif" moet hebben maar in Safari moet ik perse een height meegeven in mijn css file omdat het er anders zo uitziet:


De div "stretcht" niet mee naar beneden. Om "under" heb ik even een zwarte rand gezet voor de duidelijkheid.

Waar komt dit probleem door? Doe ik iets fout of juist goed in mijn css wat IE toch doorvoert maar waar een andere browser een zetje voor nodig heeft?

Live te zien: http://wijmakenwebsites.nl/detuinenvanbosch

[ Voor 3% gewijzigd door ViNyL op 08-09-2008 20:57 ]

[Kiphaas7]

Zonder te kijken naar je site, clear je wel je floats?

http://www.quirksmode.org/css/clearing.html

[.Gertjan.]

Zover ik weet heeft dit te maken met het feit dat de blokken die in je ene div zitten floaten. Hierdoor neemt de div waarin ze liggen geen hoogte aan.

Zo uit mijn hoofd was dit op te lossen door aan de bovenliggende div (under) deze style toe te voegen:
overflow: hidden;

Dit forceert volgens mij de browser de hoogte aan de bovenliggende div toe te kennen.

[ViNyL]

Thanks!

Het clear:both; had er mee te maken maar ik heb het met "overflow:hidden" opgelost...

Dat was de truc inderdaad!

[tonyisgaaf]

offtopic:
Blij dat het is opgelost, maar volgens de w3c specs is <span> een inline element, dat geen blokelement mag bevatten. Dus misschien tijd voor een andere oplossing? Bijvoorbeeld de <span> vervangen door een <div>, of gewoon gelijk hetgeen je met de span-class wil doen, toepassen op de bedoelde elementen?
Excuses voor de principiële hufter uithangen

[.Gertjan.]

tonyisgaaf schreef op maandag 08 september 2008 @ 23:20:

offtopic:
Blij dat het is opgelost, maar volgens de w3c specs is <span> een inline element, dat geen blokelement mag bevatten. Dus misschien tijd voor een andere oplossing? Bijvoorbeeld de <span> vervangen door een <div>, of gewoon gelijk hetgeen je met de span-class wil doen, toepassen op de bedoelde elementen?
Excuses voor de principiële hufter uithangen

offtopic:
Als zijn span een div was geweest had hij het zelfde probleem gehad. Door aan je span de de style display:block mee te geven zal de browser hem gaan behandelen als een block element (zoals div).

W3C schrijft volgens mij inderdaad voor dat een inline element geen block element mag bevatten, maar als je je span een block element maakt (via display:block) mag er wel weer een div in...

[Verwijderd]

.Gertjan. schreef op dinsdag 09 september 2008 @ 08:40:
[...]
W3C schrijft volgens mij inderdaad voor dat een inline element geen block element mag bevatten, maar als je je span een block element maakt (via display:block) mag er wel weer een div in...
[/offtopic]

Da's klets

CSS block elementen zijn andere dingen dan HTML block elementen

[Bosmonster]

.Gertjan. schreef op dinsdag 09 september 2008 @ 08:40:
[...]

offtopic:
Als zijn span een div was geweest had hij het zelfde probleem gehad. Door aan je span de de style display:block mee te geven zal de browser hem gaan behandelen als een block element (zoals div).

W3C schrijft volgens mij inderdaad voor dat een inline element geen block element mag bevatten, maar als je je span een block element maakt (via display:block) mag er wel weer een div in...

Als je van je spans divs moet maken via CSS kun je natuurlijk al achter je oren gaan krabbelen

[.Gertjan.]

Verwijderd schreef op dinsdag 09 september 2008 @ 09:14:
[...]

Da's klets

CSS block elementen zijn andere dingen dan HTML block elementen

Is dat zo? Zo ver ik weet doet een span met display:block het zelfde als een div... Ik moedig dergelijk gebruik van een span niet aan, maar in sommige gevallen kan je niet anders (zoals bijvoorbeeld .NET die spans maakt om sommige elementen, als je die als div wil laten gedragen zul je display:block moeten gaan gebruiken.

[Bosmonster]

.Gertjan. schreef op dinsdag 09 september 2008 @ 10:08:
[...]

Is dat zo? Zo ver ik weet doet een span met display:block het zelfde als een div... Ik moedig dergelijk gebruik van een span niet aan, maar in sommige gevallen kan je niet anders (zoals bijvoorbeeld .NET die spans maakt om sommige elementen, als je die als div wil laten gedragen zul je display:block moeten gaan gebruiken.

De html valideert niet meer en zonder CSS klopt het dus ook niet meer. In eerste instantie klopt de gevoerde html dus niet en dit is wel iets waar de browser vanuit moet kunnen gaan.

Over wat .NET voor ranzigheid uithaalt zullen we maar niet beginnen

[ Voor 8% gewijzigd door Bosmonster op 09-09-2008 10:44 ]

[TeeDee]

.Gertjan. schreef op dinsdag 09 september 2008 @ 10:08:
[...]
(zoals bijvoorbeeld .NET die spans maakt om sommige elementen

Gelukkig is dat vrij gemakkelijk te overriden met bijvoorbeeld HtmlTagWriter in de Render (dacht ik) overwrite.

[_JGC_]

Overflow: hidden op het buitenste element lost het probleem idd op, maar als je daar weer dingen als css-menus in zou gooien vallen die ook weg als ze buiten de div komen. Ik gebruik zelf dus over het algemeen een lege div met clear: both en een line-height van 0px.

Wat betreft span vs div: als je van een span een block element maakt via CSS kan je net zogoed een div gebruiken. De enige uitzondering die ik hierop maak is als ik een block element wil gaan nesten in een inline element, zoals een hyperlink met daarin een div. In dat geval wordt het een hyperlink met daarin een span, die via CSS display:block krijgt.