[css] min-height issues in IE7 & 8

[Nedra]

Hi All,

Ik ben momenteel bezig met het aanpassen van een website die niet zo 'clean' in elkaar gezet was. Wat ik wil bereiken is dit; http://www.xs4all.nl/~peterned/examples/csslayout1.html wat mij inmiddels ook wel gelukt is voor Safari en Firefox. Alleen IE7 & 8 doen ontzettend moeilijk.

Zoals je kan zien in de voorbeeld CSS van de link hierboven, wordt er in de grote container waar de header, footer en de content in zit, gebruik gemaakt van 'min-height'. In Ie7 & 8 wordt daardoor het content gedeelte z'n eigen lengte naar beneden verzet, en hangt de footer boven het het content gedeelte. Waarom zou ik niet weten, want in Safari/FF werkt et dus wel, en m'n code is bijna identiek aan wat hier boven staat. Wanneer ik de min-height declaratie weghaal staat de content wel weer gewoon recht onder de header. Any ideas?

Code:

Cascading Stylesheet:

* { margin: 0;  padding: 0;}

html,body
{
    height:100%;
    font-family: arial, verdana, sans-serif;
    font-size: 100%;
    text-align: center; 
    color: #2e2e2e;
}

#bg { 
    background:#f3a630;
}

#container {
    position:relative;
    margin: 0 auto;
    width:960px;
    
    min-height:100%;
    height:auto !important; /* real browsers */
    height:100%;
    
    
    font-size: 0.8em;
    text-align: left;
}

#header{background:#ddd ;}

#logo {
    height: 120px; 
    background:url(../images/header_wide.jpg) no-repeat left top;
}

h1#logo span {display: none;}

#mainmenu {
    width:960px;
    height:32px;
    background:#ddd;
}


#main {
    background: url(../images/text.jpg) repeat-x left top;  
    padding:30px;
    width:900px;
    margin:0 auto;
    text-align:left;
}

#main h1,
#main2 h1 {
    font-size:1.6em;
    font-weight:normal;
    margin:0;
}

#component-contact{margin-top:28px;}

em {
    font-weight:bold;
}


#footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:30px;
    border-top:3px solid #ff0000;
}

[peterkuli]

Et voila

Ohja...found using Google

[Nedra]

Was ik ook al tegengekomen tijdens het Googlen, maar ik snap niet hoe dit mijn probleem zou kunnen oplossen? En wat me verbaasd is dat het voorbeeld wat ik in m'n start post plaatste, geen problemen kent met IE en dezelfde techniek gebruikt..

[peterkuli]

Als het voorbeeld wat je plaatste wel werkt, pas je die aan met je eigen content.
Als je dat al gedaan hebt, heb je iets niet juist in je CSS gezet.

[Nedra]

Thanks, da's precies wat ik moest doen inderdaad. Ik werk met Joomla en had eigenlijk al geprobeerd om de code in 't joomla template te integreren, alleen had ik niet door dat het menu de boosdoener was. Menu vervangen door een andere module en 't probleem is opgelost.

Nu 't volgende, met het voorbeeld wat je ziet in de eerste post blijft de footer altijd onderaan staan, tenzij het display te klein wordt, waardoor er een scrollbalk wordt ingezet. Wat ik graag zou willen, is dat de footer sowieso altijd onderaan in beeld blijft staan, en dat de scrollbalk verschijnt in het content gedeelte. Zo kom je altijd op de site terecht waar een header en footer boven en onder staan, en het content gedeelte, afhankelijk van de scherm grote, met een scrollbalk. Is dat mogelijk?

(nb, dus de background fixed of overflow hidden zodat er geen standaard scrollbalk rechts is)

[ Voor 5% gewijzigd door Nedra op 11-10-2010 14:00 ]

[Patriot]

Mja, dat kan niet als je de boel nog een beetje vloeiend wilt houden zoals je dat nu hebt. Of je moet met javascript in de weer gaan. In ieder geval moet het element waarop je overflow op auto zet (zodat hij scrollbars laat zien) een vaste hoogte meekrijgen, anders dan laat je browser gewoon het element groeien.

[peterkuli]

Kijk hier eens.

[noes]

CSS:
position: fixed;
bottom: 0px;
height: 100px;