CSS: scroll door border bij verticaal uitgelijnde div

[Maverick2001]

Allereerst weet ik dat hier veel topics over geweest zijn maar ik kom er niet uit.

Ik heb in mijn CSS aangegeven dat de footer verticaal onder moet worden uitgelijnd. Dit werkt allemaal prima echter wanneer in om de container (content) een border zet dan krijg ik een scroll balk. Natuurlijk kan ik dit wel ondervangen door niet om de content een border te zetten maar door een border te zetten rond de afhankelijke div's. Toch is het gek dat ie opeens een scroll balk laat zein.

Het 2e probleem is dat IE netjes de footer onderaan zet, echter FF zet m gewoon onder de tekst en doet nix met de verticale uitlijning.

CSS:

Cascading Stylesheet:

html, body, #content { min-height: 100%; width: 100%; height: 100%;}
html>body, html>body #content { height: auto;}

body {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    background-image: url(images/backbody.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #e2e2e1;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#content {
    position: relative;
    width:850px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
    border: 9px solid #FFFFFF;
}
#topbanner {
    height: 262px;
    border: none;
    width: 100%;
    background-color: #FFFFFF;
    background-image: url(images/background-topbanner2.jpg);
}
#divmenu {
    width: 150px; 
    float: left; 
    padding-bottom: 3em; 
    height: auto;}

#divscroll {
    margin-left: 170px; 
    padding-bottom: 3em; 
    height: auto;
    text-align:left;
}

#divfooter {
    clear: both;
    height: 17px;
    position: absolute;
    bottom: 0;
    left: 0;
    border: none;
    width: 850px;
    background-color: #FFFFFF;
    background-image: url(images/bottum.jpg);
    background-repeat: no-repeat;
    padding-top:4px;
}

[ Voor 6% gewijzigd door Maverick2001 op 23-02-2007 11:27 ]

[Maverick2001]

Subtiel kickje

[crisp]

Boxmodel; door de border wordt je content-div 850 + 9 + 9 = 868 pixels breed en 100% + 9 + 9 pixels hoog en dus een verticale scrollbar

Het gedrag van Fx is ook te verklaren aangezien je daarvoor zelf in je CSS opgeeft dat de hoogte van de body en van #content automatisch bepaald moet worden (regel 2 in je voorbeeldcode)

[Maverick2001]

Dat is het inderdaad! Heb nu de content op 100% gezet en vervolgens mezelf een klap tegen mijn hoofd gegeven omdat ik het niet gezien heb. Resultaat (ook in FF). beedlvullend en koppijn.

Maar nog even over die border. Is de beste oplossing dan een border om de losse div's te zetten?

[ Voor 22% gewijzigd door Maverick2001 op 24-02-2007 13:46 ]

[crisp]

Maverick2001 schreef op zaterdag 24 februari 2007 @ 13:45:
Maar nog even over die border. Is de beste oplossing dan een border om de losse div's te zetten?

Jep. Alternatief is IE in quirksmode duwen en andere browsers mbv CSS het border-box model laten gebruiken maar support voor border-box laat nog wel te wensen over in obscure browsers en met IE in quirksmode krijg je vaak weer te maken met een heel scala aan andere verschillen...

Zelf ben ik sowieso geen voorstander van '100%-height' designs - ik snap de redenatie daarachter niet waarom dat noodzakelijk zou zijn...

[ Voor 12% gewijzigd door crisp op 24-02-2007 13:53 ]

[Maverick2001]

Ik heb het zelf nog nooit eerder gedaan en vandaar ook mijn probleem.

Ben zelf ook niet altijd een voorstander van 100% height websites. Echter bij dit design vind ik het wel mooi om het door te laten lopen met een footer helemaal onderaan. Over smaak valt natuurlijk altijd te twisten.. maar het heeft ook wel weer iets.