Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

raar gedrag van div's

Anoniem
gwbonline
11 antwoorden
  • Hoi,

    Ik kom het volgende probleem tegen:

    - container div (900px) met een 1px border
    - twee andere divs (500px en 250px) heb ik in de container geplaatst en naast elkaar uitgelijnd, zodat ze samen de 900px container vullen (met een border eromheen)

    Internet Explorer laat zien wat ik graag wil, maar Firefox plaatst de twee kleinere divs buiten de container. Zo lijkt het tenminste, want de border is ineens een lijn omdat de browser geen inhoud in de container weergeeft (de top en borrom border zitten dus tegen elkaar aan, terwijl het kader om de twee andere divs zou moeten staan: die divs staan in html ook gewoon in de container).

    Wat doe ik fout? Ik heb al allerlei instellingen geprobeerd, maar krijg het niet voor elkaar.

    Willem
  • Probeer eens om de container div géén hoogte te geven (waarschijnlijk is dat nu al het geval) en vervolgens de volgende eigenschap met CSS:
    [code:1:ba34844ce4]overflow: hidden;[/code:1:ba34844ce4]
    Succes!

    - Bas
  • Volgens mij heb je te maken met het boxmodel probleem met Internet Explorer. (IE zegt: totale breedte = breedte + borders + marges + padding. Andere browsers zeggen: Totale breedte = breedte)

    Er bestaan diverse hacks voor. maar omdat ik niet van hacks houd werk ik altijd om het probleem heen. Ik gebruik breedte nooit in dezelfde DIV als border, margin of padding. Ik nest dus 2 divs. De buitenste geeft alleen de breedte weer en heeft border padding en margin op 0. De binnenste regelt de rest.In combinatie met de tip van bas zou dit een gelijke weergave moeten opleveren in de meeste browsers.
  • Een prima oplossing/workaround voor het box-model probleem is om door middel van conditional comments IE6 andere CSS voor te schotelen. Dan heb je ten minste geen extra markup.

    Maar ff ter verduidelijking, met 900px bedoel je wat ? breedte hoogte? En hoe vul je 900px met 500+250px? (BTW: 900px + 1 px boorder word dus 902px). Werk je ook met float, want dat kan het probleem ook zijn. Als je containder div niet float en de divs erin wel dan zit de container niet meer "om" de divs die erin zitten. En dan geeft firefox het juist weer en IE niet. De "overflow:hidden;" voor de container div lost dat wel op maar veroorzaakt problemen als er wel overflow is.

    Als je gewoon al de html en css geeft word het een stuk makkelijker oplossen.
  • [quote:0ce57633cb="Drewster"]Een prima oplossing/workaround voor het box-model probleem is om door middel van conditional comments IE6 andere CSS voor te schotelen. Dan heb je ten minste geen extra markup.[/quote:0ce57633cb]
    Nog makkelijker is om ervoor te zorgen dat je een goede doctype op de eerste regel hebt staan, dan heeft IE gewoon hetzelfde box model als alle andere moderne browsers.
    [quote:0ce57633cb="Drewster"]De "overflow:hidden;" voor de container div lost dat wel op maar veroorzaakt problemen als er wel overflow is.[/quote:0ce57633cb]Oh? Ik dacht dat de div gewoon blijft rekken (aangezien de hoogte niet gedefinieerd is). De viewport heeft een eigen scrollbalk en horizontale overflow zou sowieso lelijk zijn, maar is inderdaad misschien een optie. Iemand anders een voorbeeld hiervan voor mij?
    [quote:0ce57633cb="Drewster"]Als je gewoon al de html en css geeft word het een stuk makkelijker oplossen.[/quote:0ce57633cb]Of een linkje! :D

    - Bas
  • [quote:8d738b5993="BasHamar"][quote:8d738b5993="Drewster"]De "overflow:hidden;" voor de container div lost dat wel op maar veroorzaakt problemen als er wel overflow is.[/quote:8d738b5993]Oh? Ik dacht dat de div gewoon blijft rekken (aangezien de hoogte niet gedefinieerd is). De viewport heeft een eigen scrollbalk en horizontale overflow zou sowieso lelijk zijn, maar is inderdaad misschien een optie. [/quote:8d738b5993]Ik weet niet meer precies wat het maar ik had laatst problemen met dat "overflow:hidden", als ik het me goed herinner scrolde de browser niet meer mee…maar dat weet ik niet zeker meer…(maar heb geen zin om dat nu uit te testen)

    En IE6 houd zich niet goed aan de regels, wat voor doctype je ook gebruikt
  • [quote:69a20da3d0="Drewster"]En IE6 houd zich niet goed aan de regels, wat voor doctype je ook gebruikt[/quote:69a20da3d0]In het algemeen klopt dat natuurlijk wel, maar specifiek voor het box model doet IE precies wat het moet doen met de juiste doctype.

    - Bas
  • Dus om het overzichtelijk te houden:
    - gebruik een correct doctype (en zet er geen andere code boven), dan gedraagt IE6 zich voor een groot deel zoals de rest
    - width 900px + border 1px = 902px, ook in IE6
    - floats in een containing element clear je door een overflow:hidden of een clear:both op het element volgend op het containing element.

    [offtopic]
    Overigens, behalve dat je moet opletten bij het gebruik in een evt. print-stylesheet, heb ik op fora of blogs nooit iets vernomen over nadelen van overflow:hidden, en zelf ook niet meegemaakt. Maar stel dat het toch problemen zou geven, dan heb je nog die andere manier.

    En verder is het tegenwoordig helemaal niet meer nodig om de werkwijze van Gooly te hanteren, aangezien IE6 zoals gezegd het juiste box-model gebruikt bij een correct doctype. Oudere browsers die mogelijk wel voor een verkeerde weergave zorgen, worden simpelweg niet meer gebruikt.
    [/offtopic]
  • [quote:b940bc120f="boelieboelie"]Oudere browsers die mogelijk wel voor een verkeerde weergave zorgen, worden simpelweg niet meer gebruikt.
    [/quote:b940bc120f]
    Dan zou ik toch mijn statistieken er nog maar eens op nakijken. Ik kom IE5 nog met regelmaat tegen.
    Desalniettemin heb ik weer wel wat geleerd, want ik wist niet dat je het box model probleem in IE6+ met de doctype op kon lossen.
  • Ik durf er mijn hand niet voor in het vuur te steken, maar ik meen me te herinneren dat het zelfs al werkt vanaf IE5.5 SP2! Mijn grootste frustratie was echter altijd dat [i:22ed5b4cd8]margin: 0 auto;[/i:22ed5b4cd8] niet werkte in IE-versies ouder dan 6, maar vanaf IE6 werkt het eindelijk mits je een goede doctype gebruikt.

    - Bas
  • [quote:5fac2a42cf="Gooly"]
    Dan zou ik toch mijn statistieken er nog maar eens op nakijken. Ik kom IE5 nog met regelmaat tegen..[/quote:5fac2a42cf]Recentelijk? Ik wist tot voor kort ook niet dat het inmiddels vaak verwaarloosbaar was. Ligt ook wel aan je doelgroep, dus zou het oordeel laten afhangen van je stats.

    Los daarvan zijn m.i. conditional comments een nettere manier om browserverschillen op te lossen. Je vervuilt dan immers je HTML niet met overbodige elementen.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.