[CSS, FF] Div's vallen in verkeerde parent - Softwareontwikkeling

woensdag 1 februari 2006 20:52

Acties:

Verwijderd

Topicstarter

Hallo,

ik krijg iets uiterst vreemds. In internet explorer wordt mijn html goed weer gegeven en in firefox niet.
In firefox gaat het alleen goed als ik een border om een bepaalde div zit, de div Choices, maar dat wil ik niet.

De choice div's worden dmv javascript op een breedte gezet, maar het scriptje heb ik even weg gelaten.

In firefox valt de choices div (dus de choice div's) in de question div, tenminste ze staan binnen de blauwe border van de question div.

Ik kan helaas zo geen documentje online zetten, vandaar de volledige html. Deze zul je zelf in een documentje moeten plakken:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}

#Choices {
    border: 0px solid red;
    display: block;
}

#Choices .Choice {
    border: 1px solid black;
    float: left;

    text-align: center;
}

#Choices .ChoiceActive {
    border: 1px dashed black;
    background-color : #66FF99;
    float: left;

    text-align: center;
}

#Question {
    border: 1px solid blue;
    margin-top: 100px;
    text-align: center;
}

#Question img {
    border: 0px solid black;
    position: relative;
}
</style>

</head>

<body>

<div>
    <div id="Choices">
        <div id="Choice1" class="Choice">
            Keuze 1
        </div>
        <div id="Choice2" class="Choice">
            Keuze 2
        </div>
        <div style="clear: both;"></div>
    </div>

    <div id="Question">
        [img]"c14.gif"[/img]<br/>
        Tekst
    </div>
</div>

</body>

</html>

woensdag 1 februari 2006 21:12

Acties:

Geert.H

Uhm, ik snap niet helemaal wat je bedoeld... kan je misschien een paar prt-screens maken? Want als ik je html+css bekijk dan werkt het in IE en in FF 'goed' (het wordt wel anders weergegeven, maar ze worden niet bij elkaar in een vak gezet).

Dus wat bedoel je precies? en ligt het misschien niet aan het javascript wat ervoor zorgt dat de css vernaggeld wordt en waardoor FF begint te protesteren. Dus post dat javasciptje ook eens, denk dat mensen je dan even wat beter kunnen helpen...

woensdag 1 februari 2006 22:56

Acties:

crisp

Devver

Pixelated

Geef ipv die extra div met clear je #Choices een overflow: auto of hidden

Intentionally left blank

woensdag 1 februari 2006 22:59

Acties:

Verwijderd

Topicstarter

Hier volgen twee screenshots van de output van bovenstaande code:

De output door Internet Explorer:
http://bytesonline.nl/ie.jpg

De output door FireFox
http://bytesonline.nl/ff.jpg

Zoals te zien vallen de div's met Keuze 1 en Keuze 2 in internet explorer boven de div met blauwe border. In firefox vallen ze er binnen.
Maar volgens de HTML staan ze volledig "naast" elkaar.

In de css staat de border van de div Choices op 0px, als deze op 1px wordt gezet, dan werkt het wel goed in beide browsers.

Ik maak gebruik van internet explorer 6.0 en firefox 1.0

woensdag 1 februari 2006 23:03

Acties:

Verwijderd

Topicstarter

crisp schreef op woensdag 01 februari 2006 @ 22:56:
Geef ipv die extra div met clear je #Choices een overflow: auto of hidden

Harstikke bedankt, dat werkt dus. Scheelt weer een hoop frustratie.

Ik heb meteen in de CSS documentatie gekeken en daarin staat:
11.1.1 Overflow: the 'overflow' property
visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

Kan ik hieruit opmaken dat FireFox het anders interpreteerd dan internet explorer?

woensdag 1 februari 2006 23:03

Acties:

crisp

Devver

Pixelated

firefox 1.5 doet het iig al beter dan 1.0, maar zie mijn vorige reply voor een betere oplossing

vwb die overflow oplossing: IE doet het gewoon fout; die rekt de box waar de floats instaan standaard al uit ondanks dat de default voor overflow visible is. Floats zitten niet in de flow, dus die zouden moeten overflowen (en #Choices heeft dan dus feitelijk geen hoogte).

Door overflow op een andere waarde dan visible te zetten moet de browser #Choices wel uitrekken om de containing floats zichtbaar te maken - ze mogen dan immers niet meer overflowen.

[ Voor 72% gewijzigd door crisp op 01-02-2006 23:05 ]

Intentionally left blank

woensdag 1 februari 2006 23:05

Acties:

Verwijderd

Topicstarter

Zie mijn vorige reply

De quote van jou werkt! Heb er een overflow auto op gegeven en dat werkt dus naar behoren!

Hartstikke bedankt!

Vervolg...
(maar niet weer een nieuwe reply aanmaken)

Ik was in de veronderstelling dat een clear:both zorgde dat de container div mee rekte. Dit is wat ik eigenlijk "altijd" wel gebruikte als laatste node voor een container div met floats erin.

Met tijdelijk borders zetten en/of de developer toolbar is het te zien dat een container div niet mee rekt afhankelijk van zijn inhoud.

Wat me nu nog niet helemaal duidelijk is is dat (voor zover ik het weet) overflow toch te maken heeft met de inhoud van het toegepaste element en niet op de parent daarvan. Maar door het veranderen van de overflow van de laatste node van een container, met daarin floating elements, wordt de div wel mee gerekt.

[ Voor 72% gewijzigd door Verwijderd op 01-02-2006 23:16 ]

Pagina: 1

Reageer