Div 100% height, footer loopt niet mee in firefox

[danielkraak]

Ik ben een website voor informatica aan het maken en deze bouw ik met DIVs. Hij moest een height van 100% krijgen en dit is ook gelukt; De footer komt gewoon netjes onderaan te staan. Nu heb ik alleen het probleem dat wanneer ik firefox gebruik en de tekst in het showgedeelte teveel is om zonder scrollbar te laten zien, dat de footer niet mee wil gaan, maar die blijft gewoon eigenwijs onderaan het scherm. In internet explorer loopt alles gewoon wel mee.

Hier is mijn site: <snip>

De CSS:

code:

html, body {
    margin:0;
    padding:0; 
    height: 100%;
    background-color: #3F4D73;
    text-align: center;
    font-family: Verdana;
    font-size: 10pt;
    text-decoration: none;
    color: #444;
}

html {
    overflow-y: scroll;
}

.clear {
    clear: both; /* deze class gaan we gebruiken om de twee floats #left en #right te clearen. */
}

#container {
    width: 1013;
    position: relative;
    background-image: url('../images/background.gif');
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
}

#left {
    width: 39;
    height: 400;
    background-image: url('../images/left.gif');
    float: left;
}

#nav {
    width: 935;
    height: 28;
    float: left;
    background-image: url('../images/navhead.gif'); 
}

#right {
    width: 39;
    height: 400;
    background-image: url('../images/right.gif');
    float: right;
}

#header {
    width: 935;
    height: 137;
    float: left;
    background-image: url('../images/header.gif');
}

#margintop {
    width: 935;
    height: 5;
    float: left;    
    background-color: #223053;
}

#leftshowcontainer {
    width: 620;
    *width: 625;
    float: left;
    padding-left: 5px;
    height: 100;
}

#leftshowhead {
    width: 613;
    height: 16;
    background-image: url('../images/showhead.gif');
    float: left;
}

#leftshow {
    width: 603;
    *width: 600;
    height: auto;
    background-image: url('../images/showbackground.gif');
    float: left;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
}

#leftshowfoot {
    width: 613;
    height: 12;
    background-image: url('../images/showfoot.gif');
    position: absolute;
    bottom: 60px;
    *bottom: 66px;
    *right: 355px;
}

#rightshowcontainer {
    width: 310;
    height: 100;
    float: left;
    height: auto;
}

#mustvisit {
    width: 302;
    height: 142;
    float: left;
    margin-top: 5px;
}

#shortcutscontainer {
    float: left;
    height: auto;
    width: 303;
}

#shortcutshead {
    float: left;
    height: 19;
    width: 303;
    background-image: url('../images/shortcutshead.gif');
}

#shortcuts {
    float: left;
    height: auto;
    width: 303;
    background-image: url('../images/shortcutsbg.gif');
}

#shortcutsfoot {
    float: left;
    height: 9;
    width: 303;
    background-image: url('../images/shortcutsfooter.gif');
    background-repeat: no-repeat;
}

#footercontainer {
    float: left;
    position: absolute;
    height: auto;
    bottom: 0px;
    *bottom: -1px;
    right: 40px;
    *right: 38px;
}

#marginfoot {
    width: 935;
    height: 5;
    *height: 3;
    float: left;    
    background-color: #223053;
}

#footer {
    width: 935;
    height: 42;
    float: left;
    background-image: url('../images/footertop.gif');
}

#footerfoot {
    width: 935;
    height: 14;
    float: left;
    background-color: #121826;
}

Om de code van de html te kunnen zien, moet je even broncode weergeven doen.

Zou iemand mij hiermee kunnen helpen?

[ Voor 1% gewijzigd door RobIII op 16-01-2008 00:22 ]

[RobIII]

danielkraak schreef op dinsdag 15 januari 2008 @ 22:39:
Zou iemand mij hiermee kunnen helpen?

Euh, nee dus.
Kan iemand even...?

Het is hier niet de bedoeling dat je een bak code dumpt, verwijst naar een externe pagina en dat wij dan even je probleem gaan zitten oplossen. Zoals je zult lezen in onze Quickstart verwachten we toch op z'n minst dat je zelf wat moeite doet, laat zien wat je al geprobeerd/gezocht/gevonden hebt en wat er niet werkt(e) aan de tot nu toe geprobeerde oplossingen. Dat zie ik nu niet terug. Nu dump je gewoon een kwak CSS en mogen wij gaan kijken waar het probleem zit; voor iets dat notabene zowat op dagelijkse basis in dit forum voorbij komt.

Als je al code post dan stellen we het zeer op prijs als je het beperkt tot het broodnodige; dus maak een 'uitgeklede' test-case en demonstreer daar je probleem mee; de code die je nu post bevat veel te veel overbodige zaken waardoor het voor ons ook nog eens lastiger danwel meer werk is om je te helpen zoeken naar je probleem.

[ Voor 110% gewijzigd door RobIII op 16-01-2008 00:25 ]