[XHTML/CSS] Firefox en div's met ul's

[dream0r]

Ik liep tijdens het ontwerpen van een pagina tegen hetvolgende probleem aan: ik heb een unorderedlist binnen een div, maar deze wordt in firefox buiten de div weergegeven. Normaal "gaat een div toch om de containing elements heen?". In het onderstaande voorbeeld kan je zien wat ik bedoel, IE6 doet wat de bedoeling is in tegenstelling tot firefox 0.8.

Een illustratie van het probleem:


De website:
http://jasper.pcfreaks.com/mozbug/mozbug.html

CSS:

code:

            *   { 
                font-family: Tahoma, Arial;
                font-size: 12px;
                line-height: 15px;
            }
            
            body    {
                margin: 5px;
                background-color: #CCCCCC;
            }
                        
            #sitecontainer  {
                padding: 5px;
                width: 750px;
                margin-left: auto;
                margin-right: auto;
                background-color: #FFFFFF;
                border: 1px solid #333333;
            }
            
            #navigation {
                list-style-type: none; 
                float: left;
                margin: 0;
            }
            
            #navigation li  {
                margin: 0;
                padding: 0;
                display: inline;
            }

HTML:

code:

<div id="sitecontainer">
            <p>Een tekst boven de ul</p>
            <ul id="navigation">
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>

Wat doe ik nu fout?

[faabman]

dat komt door de float:left; van #navigation... via google is e.e.a. te vinden mbt de float verschillen tussen i.e. en firefox / mozilla (waarbij de tweede het op de juiste manier doet)


_{je topic staat in het verkeerde forum}

edit:
- dit artikel en bijbehorende pagina geeft informatie over de werking van floats...

http://www.positionisever...rticles/float-theory.html

op die site staan ook een aantal bugs van I.E.

[ Voor 31% gewijzigd door faabman op 17-03-2004 15:46 ]

[RM-rf]

de float is waarschijnlijk het probleem, deze zorgt ervoor dat het element zelf vrijstaand wordt en dus niet meer omvattende containers zelf ook uitrekt.

heb je die float nodig? kun je dat niet via een andere positioneringswijze oplossen,

een kleine fix zou eventueel zijn om een sluiter-DIV, met breedte 100% onder de float te plaatsen, aangezien deze wordt weggedrukt door de float gaat hij naar onder en rekt op die manier de container uit.

verder hoort zo'n probleem overigens in /13: W&G

[dream0r]

Bedankt, nu je dat zo zegt zie ik het ook, het is gewoon een domme fout van mij. Een float helpt hem inderdaad uit de div container.

[ Voor 84% gewijzigd door dream0r op 17-03-2004 15:50 ]

[.oisyn]

P&W FAQ - HTML / javascript /css, etc...

PW -> WG

[AkaXakA]

dus het probleem is nu opgelost?

Mischien kan je dan de goede code posten, ter refentie.