position:fixed et Firefox

Bonjour,

Utilisant la feuille Knacss comme base de mes CSS, j'ai attribué à mon <header> une position "fixed". Sous Chrome, ça fonctionne parfaitement : si on ôte le commentaire HTML dans le <head>, Chrome décalera correctement le #content sur la droite. Des ajustements sont juste nécessaires pour les media queries mais ce n'est pas le propos ici.

En revanche, ça cafouille pas mal sous Firefox et IE8 : le #content passe sous la barre latérale gauche (= <header>). Je ne suis pas très étonné par le comportement d'IE mais ce qui se passe avec Firefox me laisse perplexe. La solution est sans doute toute simple mais à force d'avoir les yeux sur son code, on ne voit plus rien...

Auriez-vous une idée ?

La structure HTML ressemble à celle-ci, la feuille de style étant téléchargeable à cette adresse :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html class="no-js" lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="knacss.css" media="all">
    <!--<STYLE type="text/css">
  @media (min-width: 641px) {
    header{max-width: 13.5em;}
}
  </STYLE>-->
</head>
 
<body class="mw960p center ">
 
<div id="main" class="row">
 
<header class="col w20" style="background-color: red; position: fixed;height:100%;">
    <p>aside</p>
                <p>aside</p>
                <p>aside</p>
</header>
 
<div id="content" role="main" class="col w60" style="background-color: green;">
        <article class="art1 w50" style="background-color: #ccc;">
                        <p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
                        <p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
                        <p>Allez tchao bissame !</p>
                        </article>
        <section class="main row gut" style="background-color: brown;">
            <article class="art1 w50 col left" style="background-color: #ccc;">
                        <p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
                        <p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
                        <p>Allez tchao bissame !</p>
                        </article>
            <article class="art2 w50 col left" style="background-color: #ccc;">
                        <p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
                        <p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
                        <p>Allez tchao bissame !</p>
                        </article>
            <article class="art3 w50 col left" style="background-color: #ccc;">
                        <p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
                        <p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
                        <p>Allez tchao bissame !</p>
                        </article>
        </section>    
 
</div>
 
<aside id="sidebar" class="col w20" style="background-color: cyan;">
<p>aside</p>
                <p>aside</p>
                <p>aside</p>
</aside>
 
</div>
 
<footer class="line mod" style="background-color: pink;">
    <p>footer</p>
</footer>
 
</body>
</html>