[HTML / CSS] Div schaalt niet mee in FIREFOX met floating li

[Verwijderd]

Hoi,

Wederom met eenzelfde probleem als ik eerder mee zat.

Alleen ditmaal werkt het half.
Ik wil een fotogallery maken met een LIST item omdat dat zo lekker zichzelf schaalt.

Het enige probleem is dat het omhullende divje dat weigert te doen onder FireFox.

Internet Explorer geeft het ditmaal tegen alle verwachtingen in perfect weer. Maar FireFox weer niet.
Dus ik baal hier een beetje van en vraag me af wat de oplossing zou zijn.

Zo wordt het weergegeven in Internet Explorer:


En zo wordt het weergegeven in FireFox


Zoals het dus bij IE wordt weergegeven moet het overal weergegeven worden.

Het CSS gedeelte dat ik met Expression Web uitgespuugd heb _{Wat een geweldig pakket trouwens!!}

Cascading Stylesheet:

.keurfoto {
    padding: 10px 10px 10px 90px;
    width: 750px;
    margin: auto;
    position: relative;
    z-index: 2;
    background: #5d5958;
    display: block;
}
.keurfoto ul {
    list-style: none;
}
.keurfoto ul li {
    float: left;
    margin: 5px;
    padding: 5px;
    background-color: #f5efed;
    color: #090505;
    width: 170px;
    height: 160px;
    border: 4px solid #e8dad6;
    text-align: center;
    display: block;
}
.keurfoto ul li:hover {
    border: 4px solid #bf948b;
}
.keurfoto ul li img {
    border: 2px solid #574f4f;
}

Het HTML gedeelte:

HTML:

                        <div class="keurfoto">
                            <ul>
                                <li><a href="#"><span><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</span></li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                                <li><a href="#"><img src="parket_thumb.jpg" alt="Parket testplaatje" /></a><br /><br />Test parkets sdiodsod sdkdshkds  sdohdsiouds sdohoidsj sdkhjo</li>
                            </ul>   
                        </div>

Het geheel is gewoon W3C Valide dus ik zou verwachten dat het gewoon moest werken.
Maar helaas doet dat het niet.

[RobIII]

Zet een overflow:hidden op je div ul.
Soortgelijk topic loopt nog.

[ Voor 62% gewijzigd door RobIII op 16-04-2010 11:32 ]

[Verwijderd]

RobIII schreef op vrijdag 16 april 2010 @ 11:15:
Zet een overflow:hidden op je div.

Weet je!!

JE BENT EEN SCHAT!!!

Cascading Stylesheet:

.keurfoto {
    padding: 10px 10px 10px 90px;
    width: 750px;
    margin: auto;
    position: relative;
    z-index: 2;
    background: #5d5958;
    display: block;
    overflow: hidden;
}

Het werkt!!!!

Dit wist ik dus echt niet.
En maar vogelen!! En maar niet willen werken!!

SUPER!!!!

Dus om een DIV mee te laten schalen met list items die floaten.

Cascading Stylesheet:

overflow: hidden;

[RobIII]

Verwijderd schreef op vrijdag 16 april 2010 @ 11:21:
Weet je!!

JE BENT EEN SCHAT!!!

Ik hou ook van jou

[Bosmonster]

Werkt ook in IE6, alleen moet je dan ook nog even hasLayout triggeren (bijvoorbeeld met een zoom:1).

Overigens, het feit dat het bij jou wel werkte zonder dit in IE doet me vermoeden dat je geen standardsmode-doctype hanteert.

[ Voor 39% gewijzigd door Bosmonster op 16-04-2010 11:24 ]

[crisp]

RobIII schreef op vrijdag 16 april 2010 @ 11:15:
Zet een overflow:hidden op je div.

Ik zou die overflow op de ul zetten. Het is dat je in dit geval verder geen styling hebt op de ul zelf...

Verder eensch @ Bosmonster; volgens mij zit je in quirksmode te werken en dat is een recept voor crossbrowser verschillen.

[RobIII]

crisp schreef op vrijdag 16 april 2010 @ 11:28:
[...]

Ik zou die overflow op de ul zetten. Het is dat je in dit geval verder geen styling hebt op de ul zelf...

Dat is inderdaad beter.

[Mj2sL]

Wel een gedoe altijd met die floats, ben hier ook meerdere keren tegen aan gelopen. Als je containing element alleen maar floats bevat gebeurt zoiets. Ik gebruikte meestal een lege div met clear:both maar die overflow:hidden is ook wel een nette oplossing. Ik neem aan dat die de voorkeur verdient simpelweg omdat het een extra div-je overbodig maakt?

Bosmonster schreef op vrijdag 16 april 2010 @ 11:23:
Werkt ook in IE6, alleen moet je dan ook nog even hasLayout triggeren (bijvoorbeeld met een zoom:1).

Doet de width dat niet al? (Mijn bron, bij new solution)

[RobIII]

Mj2sL schreef op zaterdag 17 april 2010 @ 11:30:
Wel een gedoe altijd met die floats,

Helemaal niet als je weet waar je mee bezig bent.
http://css-tricks.com/all-about-floats/

[Svennetjee]

Ik los het altijd op met een element met clear:both; onderaan de div. Maar met overflow:hidden of zoom:1 is het misschien makkelijker opgelost

[Mj2sL]

RobIII schreef op zaterdag 17 april 2010 @ 14:27:
[...]

Helemaal niet als je weet waar je mee bezig bent.
http://css-tricks.com/all-about-floats/

Mee eens, maar dat neemt niet weg dat de werking van floats soms wat onlogisch kan lijken, zeker voor degenen die weinig ervaring hebben met floats. Goede link trouwens, heb ik paar maanden geleden heel veel hulp van gehad.

Svennetjee schreef op zaterdag 17 april 2010 @ 14:30:
Ik los het altijd op met een element met clear:both; onderaan de div. Maar met overflow:hidden of zoom:1 is het misschien makkelijker opgelost

Ja, dat was ook een beetje mijn vraag. Ik snap dat overflow:hidden meestal zorgt dat je een element minder hoeft te gebruiken (geen lege div) en dat je HTML dan ietsjes meer semantisch wordt, maar overflow:hidden is ook niet bedoeld voor dit doel, toch?

[ Voor 37% gewijzigd door Mj2sL op 17-04-2010 14:37 ]

[ZpAz]

Bosmonster schreef op vrijdag 16 april 2010 @ 11:23:
Werkt ook in IE6, alleen moet je dan ook nog even hasLayout triggeren (bijvoorbeeld met een zoom:1).

Overigens, het feit dat het bij jou wel werkte zonder dit in IE doet me vermoeden dat je geen standardsmode-doctype hanteert.

Ook met correct doctype doet IE dat wel automatisch, althans als ik me niet vergis.

[Bosmonster]

ZpAz schreef op zaterdag 17 april 2010 @ 14:41:
[...]


Ook met correct doctype doet IE dat wel automatisch, althans als ik me niet vergis.

Floats worden nooit automatisch gecleard in standardsmode. Dat doet alleen IE in quirksmode.

Mj2sL schreef op zaterdag 17 april 2010 @ 11:30:
Doet de width dat niet al? (Mijn bron, bij new solution)

Ja als je het op de div zet dan werkt de width ook als hasLayout trigger idd

[ Voor 34% gewijzigd door Bosmonster op 18-04-2010 15:33 ]

[R4gnax]

Mj2sL schreef op zaterdag 17 april 2010 @ 14:34:
[...]
maar overflow:hidden is ook niet bedoeld voor dit doel, toch?

Inderdaad. Overflow:hidden i.c.m. floating child elements is een edge case bij het berekenen v/d hoogte voor een element wat in CSS height: auto heeft. Dat is ook precies waarom ik het zelf nooit gebruik. Dat, en het feit dat het onder sommige browsers print afdrukken om zeep helpt. Soms heb je toch echt floats nodig in je print sheet, dus beter om dan maar consistent een oplossing te gebruiken die alle cases dekt. De :after clearfix, is er zo één en dat is óók een puur CSS oplossing.

[Bosmonster]

R4gnax schreef op maandag 19 april 2010 @ 09:01:
[...]

Inderdaad. Overflow:hidden i.c.m. floating child elements is een edge case bij het berekenen v/d hoogte voor een element wat in CSS height: auto heeft. Dat is ook precies waarom ik het zelf nooit gebruik. Dat, en het feit dat het onder sommige browsers print afdrukken om zeep helpt. Soms heb je toch echt floats nodig in je print sheet, dus beter om dan maar consistent een oplossing te gebruiken die alle cases dekt. De :after clearfix, is er zo één en dat is óók een puur CSS oplossing.

Die 'clearfix' vind ik een stuk ranzigere oplossing, die voor zowel onverwacht gedrag als browser-incompatibility zorgt, tenzij je weer een javascript clearfix-fix eraan toe gaat voegen

Het feit dat het een edge-case is maakt het nog niet ongedocumenteerd of fout. Het is gewoon gedocumenteerd gedrag dat alle browsers hetzelfde hanteren.

Het print-probleem is dan het enige dat overblijft, maar daar het ik persoonlijk nog nooit last van gehad (zoals ik eerder al zei gebruik ik uberhaupt geen, of extreem eenvoudige, CSS in de print-versie). Of je dat wel relevant vindt lijkt me dus nogal persoonlijk. Hier gaan prediken dat overflow:hidden fout is om te gebruiken lijkt me derhalve nogal overdreven.

[ Voor 12% gewijzigd door Bosmonster op 19-04-2010 10:44 ]