[CSS] Footer blijft bovenaan in IE6 - Softwareontwikkeling

dinsdag 16 oktober 2007 12:07

Acties:

Topicstarter

Ik ben op dit moment bezig een website van PSD om te zetten naar een werkende site en ik zit nu met een raar probleem. In Firefox en Internet Explorer 7 werkt de site perfect en staat de footer dus netjes onderaan, ook als je scrollt.

Het probleem is dat hij in Internet Explorer 6 helemaal bovenaan staat op een vaste plek. Als ik naar beneden scroll verdwijnt hij dus ook uit beeld.

Nu is mijn vraag dus: Hoe krijg ik het voor elkaar dat hij in Internet Explorer 6 ook onderaan het scherm staat en blijft staan tijdens het scrollen.

De site/broncode is te zien op http://users.firestarter.us/ronaldlokers/webdesign/rotako/index.html

Ik heb oa. al deze pagina's gevonden, maar daarmee krijg ik het ook niet werkend: http://www.wickham43.supa...rial/headerfooterfix.html
http://www.netlash.com/log/sticky_footer_tutorial

Alvast bedankt voor de hulp!

dinsdag 16 oktober 2007 12:57

Acties:

Verwijderd

En als je hem in plaats van position: fixed, position: absolute geeft?

dinsdag 16 oktober 2007 13:02

Acties:

ronaldlokers

Topicstarter

Dan staat hij wel onderaan, maar dan beweegt hij mee met de pagina ipv dat hij onderaan blijft staan als je scrollt.

Misschien dat ik moet kijken naar een oplossing met javascript die ervoor zorgt dat hij hem in IE6 onderin houdt. Maar dan zit je weer met het probleem dat niet iedereen javascript ingeschakeld heeft staan.

dinsdag 16 oktober 2007 13:41

Acties:

Geert.H

Klopt, IE6 ondersteunt position:fixed niet, je zult hiervoor dus creatief voor moeten CSS'en.

Je zou het als volgt kunnen doen (uit mijn hoofd, dus d'r kunnen wat foutjes inzitten)

HTML:

<html>
<head><title>test</title></head>
<body>
  <h1 id="header">de header van de pagina</h1>
  <div id="content">
    Alle content die wél moet scrollen
  </div>
  <h2 id="footer">de footer van de pagina</h2>
</body>

Vervolgens positioneer je alles absolute.
De content div geef je een width en height mee van 100% en overlow:auto;
De body body &html krijgen overflow:hidden;
Wat je dus doet is alles vast zetten, maar als er iets is in de content div wat te groot is dan geeft de content div scrollbalken en alleen wat daar in staat kan scrollen.

nog wat css:

Cascading Stylesheet:

            html, body {
              width:100%;
              height:100%;
              overflow:hidden;
              margin:0px;
              padding:0px;
            }
            h1#header {
              position:absolute;
              margin:0px;
              padding:0px;
              z-index:100;
              left:0px;
              top:0px;
              width:100%;
              height:80px;
              background-color:red;
            }
            h2#footer{
              position:absolute;
              margin:0px;
              padding:0px;
              z-index:100;
              left:0px;
              width:100%;
              height:80px;
              bottom:0px;
              background-color:blue;
            }
            div#content {
              position:absolute;
              width:100%;
              height:100%;
              left:0px;
              top:0px;
              margin:0px;
              padding:0px;
              overflow:auto;
              z-index:50;
            }

Succes

Edit:
hmm, met de bovenstaande case heb je wel het probleem dat je scrollbalk achter de header en de footer komen. Dit gebeurt alleen als je header en footer 100% breed zijn. Als je header & footer een vaste breedte hebben dan heb je dit probleem niet.

edit 2:
nog een andere oplossing:
http://www.cssplay.co.uk/layouts/fixed.html

ok en nu heb ik wel weer genoeg voorgekauwd.

[ Voor 47% gewijzigd door Geert.H op 16-10-2007 13:55 ]

woensdag 17 oktober 2007 11:22

Acties:

ronaldlokers

Topicstarter

Bedankt voor jullie hulp/suggesties!

Blijkbaar zat dit stukje code dwars waardoor alles wat ik probeerde hopeloos faalde:

Cascading Stylesheet:

* html #container {
    height:100%;
    width:100%;
}

Nadat ik deze code eruit gehaald had heb ik bij #container en #footer "postion: absolute" ingesteld. En bij #container ook de overflow.

Nu werkt hij wel goed in alle browsers. Daarnaast heb ik ervoor gezorgd dat de footer wat veranderd in IE6 omdat er een transparante afbeelding in zit die niet werkt in IE6.