[CSS]Border veroorzaakt problemen - Softwareontwikkeling

zondag 4 mei 2008 18:26

Acties:

Topicstarter

Hallo,

Ik zit met ene probleempje. Ik probeer een lay-out voor men forum-berichten te maken. (dit doe ik met divs)
Nou ik neem dus een soort van container met width: 100%, een soort van menutje met als width 25%. Ik dacht dus het content-vlak (waar het bericht in komt) op 75% te zetten, ik heb wel aan men menu nog een border-right (van 2px) en die zorgt uiteindelijk voor problemen, de tekst komt niet op de goede plaats. Ik vraag me dus af hoe ik dit best kan oplossen.

Ik heb nu een testcode in mekaar gestopt:

code:

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

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.forum_container {
    background-color: #000;
    border: 3px solid #666;
    width: 100%;
    overflow: auto;
}
.forum_menu {
    background-color: #FFF;
    width: 25%;
    border-right: 2px solid #666;
    float: left;
}
.forum_content {
    background-color: orange;
    width: 75%;
    float: right;
}
-->
</style>

</head>
<body>

<div class="forum_container">
<div class="forum_menu">lala</div>  
<div class="forum_content">e</div>  
</div>

</body>
</html>

Nou in IE7 werkt dit allemaal naar behoren maar in firefox wil dit niet werken. Dan springt het oranje vlak als het ware een lijn lager.

Weet iemand raad?

zondag 4 mei 2008 19:58

Acties:

XWB

Devver

1) Floats clearen doe je met overflow: hidden i.p.v. auto.
2) Border maakt je element breder (in dit geval 2 pixels)

Dus 25% + 75% + 2 pixels heb je nu. Misschien kan je beter met vaste waarden werken?

[ Voor 39% gewijzigd door XWB op 04-05-2008 20:02 ]

March of the Eagles

zondag 4 mei 2008 20:16

Acties:

FuriousAngel

Hacku schreef op zondag 04 mei 2008 @ 19:58:
1) Floats clearen doe je met overflow: hidden i.p.v. auto.

Niet waar, floats clearen kan met de overflow-property van de parent op auto, zie http://annevankesteren.nl/2005/03/clearing-floats

2) Border maakt je element breder (in dit geval 2 pixels)

Dus 25% + 75% + 2 pixels heb je nu. Misschien kan je beter met vaste waarden werken?

Dat klopt, de pagina wordt in Quirks mode (http://en.wikipedia.org/wiki/Quirks_mode) gerenderd. Bij IE betekent dit dat volgens het gebruikte box model, de border bij de width zit inbegrepen. Vaste waarden kunnen dit probleem verhelpen.

maandag 5 mei 2008 10:58

Acties:

Dark Blue

Compositionista!

Alpenmeisje

Hacku schreef op zondag 04 mei 2008 @ 19:58:
2) Border maakt je element breder (in dit geval 2 pixels)

De positie van de border is toch ook weer bij diverse browsers anders geïnterpreteerd? Tenminste, dat hou ik altijd in mijn achterhoofd.

Dus, de ene browser plakt de borders aan de búitenkant van het element, de andere browser plakt de borders aan de bínnenkant... klopt dat? Of hou ik al jaren een slag om de arm die helemaal niet hoeft?

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

maandag 5 mei 2008 11:08

Acties:

Verwijderd

Dark Blue schreef op maandag 05 mei 2008 @ 10:58:
[...]

De positie van de border is toch ook weer bij diverse browsers anders geïnterpreteerd? Tenminste, dat hou ik altijd in mijn achterhoofd.

Dus, de ene browser plakt de borders aan de búitenkant van het element, de andere browser plakt de borders aan de bínnenkant... klopt dat? Of hou ik al jaren een slag om de arm die helemaal niet hoeft?

Dit hangt in principe af van het box model waarin de pagina gerenderd wordt en niet van de browser. Nu is het wel goed mogelijk om dezelfde pagina in de ene browser (IE) in border-box en in alle andere browsers in content-box te laten renderen.

Grofweg is de volgende relatie aan te wijzen: quirks-mode = content-box / strict-mode = border-box.

maandag 5 mei 2008 11:35

Acties:

Bosmonster

*zucht*

Ik zie eerlijk gezegd niet zoveel verschil tussen de twee. Wat wil je precies bereiken?

Ze zijn niet op de pixel gelijk, maar met percentages en quirksmode is dat niet zo gek. Verder zien ze er hier in IE7/FF2 eigenlijk gelijk uit.

[ Voor 45% gewijzigd door Bosmonster op 05-05-2008 11:35 ]