Sticky footer & IE7

woensdag 8 september 2010 10:22

Acties:

0 Henk 'm!

Topicstarter

Ik gebruik op mijn site een sticky footer om de footer altijd onderaan het scherm te houden, ongeacht de hoeveelheid content op een pagina. Dit werkt perfect voor alle browsers, behalve IE7 (IE6 is buiten scope).
Versimpeld ziet mijn pagina structuur er zo uit:

HTML:

<html>
  <head>
  </head>
  <body>
    <div class="wrapper">
      <p>bla</p>
      <div class="push"></div>
    </div>
    <div class="footer">
      <p>Copyright (c) 2010</p>
    </div>
  </body>
</html>

En de CSS als volgt:

Cascading Stylesheet:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;
}
.footer, .push {
    height: 80px;
}

Je kan [code=html | css][/code] tags gebruiken

Na lang zoeken ben ik er achter gekomen dat IE de regel "height: auto !important;" negeert, omdat het dit niet kent. Iemand een idee hoe ik dit kan aanpassen zodat het ook werkt in IE7? Ik vraag me zowiezo af wat een browser doet als er 2x een "height" property staat voor dezelfde class?

[ Voor 3% gewijzigd door BtM909 op 10-09-2010 00:27 ]

woensdag 8 september 2010 10:35

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Dit los ik altijd zo op:

HTML:

<html>
<body>
    <div id="site">
        <h1>Hello World!</h1>
    </div>
    <div id="footer">
        <p>&copy; 2010</p>
    </div>
</body>
</html>

Cascading Stylesheet:

body {
    height:100%;
}

#site {
    min-height:100%;
}

#footer {
    margin:-50px 0 0;
    height:50px;
}

Voor ie6 enkel nog dit in een apparte CSS:

Cascading Stylesheet:

1
2
3

#site {
    height:100%;
}

[ Voor 5% gewijzigd door MoietyMe op 08-09-2010 10:37 ]

woensdag 8 september 2010 11:46

Acties:

0 Henk 'm!

DutchAddick

Topicstarter

Thanks, ik ga het eens proberen

woensdag 8 september 2010 11:50

Acties:

0 Henk 'm!

MoietyMe

zij/haar

CAFC1905 schreef op woensdag 08 september 2010 @ 11:46:
Thanks, ik ga het eens proberen

Post je bevindingen nog even als het (niet) lukt.

woensdag 8 september 2010 13:33

Acties:

0 Henk 'm!

DutchAddick

Topicstarter

Good Fella schreef op woensdag 08 september 2010 @ 11:50:
[...]

Post je bevindingen nog even als het (niet) lukt.

Het werkt prima

Toch blijf ik nog 2 vragen hebben
1. Wat doet "height: auto !important;" precies?
2. Als je 2x een "height" hebt staan, worden deze dan ook beiden uitgevoerd door de browser?

[ Voor 30% gewijzigd door DutchAddick op 08-09-2010 13:38 ]

woensdag 8 september 2010 14:47

Acties:

0 Henk 'm!

MoietyMe

zij/haar

CAFC1905 schreef op woensdag 08 september 2010 @ 13:33:
[...]

Het werkt prima
Toch blijf ik nog 2 vragen hebben
1. Wat doet "height: auto !important;" precies?
2. Als je 2x een "height" hebt staan, worden deze dan ook beiden uitgevoerd door de browser?

1. Dat heeft te maken met het aantal punten in je CSS declaratie.

Als voorbeelden:
Afbeeldingslocatie: http://www.allapis.com/CSS-Specificity-Cheat-Sheet/CSS-specificity-cheat-sheet.PNG

Afbeeldingslocatie: http://www.allapis.com/CSS-Specificity-Cheat-Sheet/CSS-specificity-cheat-sheet.PNG

!important in je CSS overschrijft eigenlijk al die punten. Dus a{color:#fff !important;} overschrijft a{color:#000;}.

2. Nee.

donderdag 9 september 2010 16:57

Acties:

0 Henk 'm!

Clay

cookie erbij?

De combinatie:

Cascading Stylesheet:

1
2
3

min-height: 100%;
height: auto !important;
height: 100%;

is bedoeld om echte browsers een min-height van 100% te geven, en een height van auto. 100% height hoort namelijk niet meer dan je viewport te worden. IE snapte min-height nooit, maar behandelde height wel zo; als een element meer bevat dan de toegestane hoogte, wordt het gewoon groter. Die important werd dan genegeerd (bug), waardoor IE met height:100% effectief toch een min-height had.

[edit]

IE7 snapt min-height trouwens al prima, dus je kan die hele constructie eigenlijk wel weg doen. Als je in quirks mode draait geeft het zelfs meer problemen dan zonder.

[edit 2]

Wbt properties 2 keer opgeven; ik weet niet of dat ergens in de spec zo beschreven staat, maar als je het volgende doet:

Cascading Stylesheet:

.yada {
   background:red;
   background:rgba(255,0,0,0.5);
}

Pakt je browser de laatste die die snapt. IE bv maakt het dan rood, ipv transparant rood.

[ Voor 34% gewijzigd door Clay op 09-09-2010 17:13 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

Onderwerpen