Probleme de footer sous ie6

**-fleo-** · 29/11/2007, 14h58

Bonjour a tous,

Je viens ici à propos d'un probleme de footer qui se déplace vers le haut sous ie6 alors que je voudrais qu'il reste collé en bas.
Je suis plutot novice dans le domaine de programmation de site internet mais je suis épaulé par quelqu'un qui m'aide a résoudre les problemes.. mais alors la !

Voila le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
@charset "utf-8";
 
/* CSS Document */
 
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0px 0px 0px 0px; /* top right bottom left */
}
 
#Container {
	position: absolute;
	min-height: 100%;
	height: 100%;
	width: 100%;
/*	margin-bottom: 150px; */
}
 
#Header {
	position: absolute;
	width: 100%;
	font-family: Verdana;
    font-size: 13px;
	background-color: #111111;
}
#Main {
	position: absolute;
	margin: 15px 0px 0px 0px;
	left: 10px;
	right: 10px;
	top: 100px;
}
 
#footer {
  text-align: center;
  border: #fc0 1px solid;
}
#footerbr { clear: both; }
 
#login {
	 color: #000000;
     font-family: Verdana;
     font-size: 10px;
     text-align: right;
}
#login .theInput {
     font-family: Verdana;
     font-size: 11px;
     width: 110px;
     margin-right: 5px;
 
}
#login .theSubmit {
     font-family: Verdana;
     font-size: 10px;
     background-color: #333333;
     color: #FFFFFF;
     margin-right: 5px;
}
#Menu {
	position: absolute;
	width: 100%;
	z-index: 5;
	left: 0px;
	top: 0px;
    font-family: Verdana;
    font-size: 13px;
}
#Content {
	margin: 0px 175px 0px 175px; /* top, right, bottom, left */
	background-color: #f2fbee;
	border: 2px solid #8d2100;
	min-height: 350px;
}
 
#LeftNavBar {
	position: absolute;
	left: 0px;
	width: 150px;
	border: 1px solid orange;
	background-color: #fbfbdf;
}
#RightNavBar {
	position: absolute;
	right: 0px;
	width: 150px;
	border: 1px solid orange;
	background-color: #fbfbdf;
}
#TopNavBar{
	position: absolute;
	top: 70px;
	width: 100%;
	height: 30px;
	line-height: 25px;
	text-align: center;
	vertical-align: middle;
	font-weight:bold;
    font-family: Verdana;
    font-size: 13px;
	background-color: #FFFFFF;
	background-image: url("images/bormenu.png");
	background-repeat: repeat;
	margin: 0px 0px 0px 0px;
 
}
 
.titleBox {
    font-family: Verdana;
    font-size: 14px;
	margin: 0;
	padding: 0;
	height: 30px;
	line-height: 30px;	/* fix pour vertical align */
	text-align: center;
	vertical-align: middle;
	background-image: url("images/menuorange.png");
	background-repeat: repeat;
}
.menu {
	list-style-type: none;
	margin: 0;
	padding:0;
}
 
/* Main styles */
 
.menu li {
	margin-bottom: 5px;
}
.menu a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menu a:hover {
text-decoration: none;
}
 
 
.Footer li {
	display: inline;
}
 
#banner{
	text-align:center;
	height: 65px;
	background-color: #FFFFFF;
}
 
 
/* CLASS STYLE */
 
.top {
/*line-height: text-top;*/
list-style-type: none;
margin: 0;
padding:0;
}
.top li {
display: inline;
}
.top_space li {
           height: 30px;
           width: 3px;
           background-image: url("images/sepbordo30px.png");
}
.top a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.top a:hover {
text-decoration: overline;
}
 
/*label register form*/
label {
display:block;
width:250px;
float:left;
}
 
fieldset {
width : 80%;
}

Merci de votre aide je reste pas loin pour précisé si besoin est

1ere petite précision le site est censé etre fluide, s'adapter niquel a la taille de l'écran avec seulement le header collé en haut et le footer en bas. Le reste se démerde

en fait fodrait savoir comment on peut faire pour avoir un footer qui soit systématiquement en dessous du grand menu de gauche, ou du main, selon que l'un ou l'autre soit plus grand

**Kerod** · 29/11/2007, 15h27

Il faut le dire en tant que position: absolute et lui dire où se positionner. Par exemple bottom:0

Ca devrait fonctionner

**-fleo-** · 29/11/2007, 16h30

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#Footer {    
	position: fixed;
	z-index: 6;
	bottom: 0px;
	width: 100%;
	height: 30px;
	line-height: 0px;
	vertical-align: middle;
	text-align: center;
	font-weight:bold; 
	font-family: Verdana;
    font-size: 13px;
	background-color: #FFFFFF;
	background-image: url("images/bormenuinv.png");
	background-repeat: repeat;
}

bon ca c'est le vrai footer que j'utilise l'autre etait une erreur ;D (un test..)

et donc si je le met en absolute avec bottom 0 il se retrouve en haut, au dessus du header et plus superpose comme avant!

En tout cas merci de ton aide rapide

**Kerod** · 29/11/2007, 17h41

Ce n'est pas normal car j'utilise ce que je t'ai dit et je n'ai aucun soucis de ce côté.

Peux-tu mettre le html ?

**Candygirl** · 29/11/2007, 19h09

Envoyé par -fleo-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#Footer {    
	position: fixed;

si je le met en absolute avec bottom 0 il se retrouve en haut, au dessus du header et plus superpose comme avant!

Là tu n'a pas utilisé un positionnement absolu mais fixed, non reconnu sur IE6-

**-fleo-** · 29/11/2007, 19h31

non ca c'etait le footer qui aurait du etre dans le premier post

apres l'erreur décrite dans le 2eme post est bien en absolut sous ie6..

maintenant le html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EE</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
 
<body>
 
<!-- TOP BAR /-->
<div id="Container">
<div id="Header">
	<div id="banner"><img src="images/logo.png" alt="Logo" title="The"/></div>
	<div id="TopNavBar">
		<ul class="top">
 
        		<li><a href="index.htm">Home</a></li>
 
        		<li><a href="register.htm">Register</a></li>
 
			<li><a href="">Search</a></li>
 
			<li><a href="">Entrepreneur</a></li>
 
			<li><a href="">Investor</a></li>
 
      		</ul>
	</div>
</div>
 
<!-- MIDDLE /-->
<div id="Main">
  <div id="Menu">
	<div id="LeftNavBar">
	  <div class="titleBox">Search</div>
	  <ul class="menu">
		<li><label for="search">Search</label><br /></li>
		<li><input type="text" name="search" id="search" size="15" /></li>
		<li><input type="submit" value="Submit" name="Submit" /></li>
		<li><a href="#">Advanced search</a></li>
	  </ul>
	  <div class="titleBox">Categories</div>
	  <ul class="menu">
<li><a href="#">Books</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Clothes</a></li>
<li><a href="#">Computing</a></li>
<li><a href="#">Film</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Health &amp; Beauty</a></li>
<li><a href="#">Home &amp; Garden</a></li>
<li><a href="#">Jewellery &amp; Watches</a></li>
<li><a href="#">Local Services</a></li>
<li><a href="#">Mobile &amp; Home Phones</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Pottery, Porcelain &amp; Glass</a></li>
<li><a href="#">Sporting Goods</a></li>
<li><a href="#">Toys &amp; Games</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Video Games</a></li>
<li><a href="#">Everything Else</a></li>
	  </ul>
	</div>
 
	<div id="RightNavBar">
	  <div class="titleBox">Login Box</div>
 
        	<form id="login" action="admin/checkLog.php"><br />
			Username  :<input name="user" type="text" class="theInput" accesskey="1" title="User Name Field" /><br />
			Password  :<input name="password" type="password" class="theInput" accesskey="2" title="Password Field" /><br />
            Keep me signed in<input type="checkbox" name="keep" id="keep" /> <label for="keep"></label><br />
			<input type="submit" class="theSubmit" value="Submit" name="Submit" /><br />
			</form><br /><br /><br />
 
			<a href="register.htm">Register</a>
	</div>
  </div>
 
  <div id="Content">
    <div class="titleBox">Main Box</div>
			<p>Navigation information :</p>
			<p>You're on the main page of the website.</p>
			<p>You can visit the business idea without login.</p>
			<p>You can fill the REGISTER form by clicking on the top or on the right at the bottom of the login box.</p>
			<p> the login area don't work but you can see a page like a logged user can see it.</p>
			<p>For the entrepreneur or investor click on the corresponding top menu</p>
			<p>&nbsp;</p>
	  <p>gni</p>
	    	<p>gni</p>
	    	<p>gni</p>
	    	<p>gni</p>
	    	<p>gni</p>
  </div>
</div>
 
<!-- PIED /-->
<div id="Footer">
    	<ul class="Footer">
    	    <li><a href="about.htm">About Dragon's e-Den</a></li>
			<li><a href="contact.htm">Contact Us</a></li>
			<li><a href="privacy.htm">Privacy Policy</a></li>
			<li><a href="sitemap.htm">Site Map</a></li>
            <li><a href="help.htm">Help</a></li>
            <li><a href="accessibility.htm">Accessibility</a></li>
        </ul> 
</div>
 
</div>
 
</body>
</html>

Je fais tout pour qu'il soit ok w3c et fonctionnel sur les navigateurs les plus utilisés
C'est un site que je dois faire pour mes cours..

Probleme de footer sous ie6

CSS

Vue hybride

Discussions similaires

Partager

Partager