différence IE7 et ff 3.5 avec dl dd
bonjour,
je ne savais pas trop dans quelle catégorie mettre mon post alors j'ai mis ici
sous IE7, j'ai une coupure du footer contrairement avec firefox et j'ai des espaces entre les dl trop grands par rapport à firefox.
J'ai une coupure au moment où j'ai rajouté un dl sous IE7 mais pas sous firefox
voilà le html
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
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
|
<div id="footer">
<div class="container">
<div id="breadcrumb">
<div class="container">
<ul>
<li><a href="#"><img src="img/common/picto_home2.gif" width="13" height="14" alt="Home" /></a> <img src="img/common/fleche.gif" width="10" height="30" alt=">" /></li>
<li><a href="#">Products</a> <img src="img/common/fleche.gif" width="10" height="30" alt=">" /></li>
<li>Features</li>
</ul>
</div>
</div>
<div class="footerInt">
<dl>
<dt><a href="#">Company</a></dt>
<dd>
<ul>
<li><a href="#">Duis ipsum. Integer</a></li>
<li><a href="#">Placerat metus ut quam</a></li>
<li><a href="#">Aliquam dolor sapien</a></li>
<li><a href="#">Dignissim nec, consectetuer</a></li>
<li><a href="#">Quis, vulputate vulputate, leo</a></li>
<li><a href="#">Quisque consequa</a></li>
<li><a href="#">ultrices pede. Nam gravida</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">Solution</a></dt>
<dd>
<ul>
<li><a href="#">Duis ipsum. Integer</a></li>
<li><a href="#">Placerat metus ut quam</a></li>
<li><a href="#">Aliquam dolor sapien</a></li>
<li><a href="#">Dignissim nec, consectetuer</a></li>
<li><a href="#">Quis, vulputate vulputate, leo</a></li>
<li><a href="#">Quisque consequa</a></li>
<li><a href="#">ultrices pede. Nam gravida</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">Products</a></dt>
<dd>
<ul>
<li><a href="#">Duis ipsum. Integer</a></li>
<li><a href="#">Placerat metus ut quam</a></li>
<li><a href="#">Aliquam dolor sapien</a></li>
<li><a href="#">Dignissim nec, consectetuer</a></li>
</ul>
</dd>
<dt><a href="#">Services</a></dt>
<dd>
<ul>
<li><a href="#">Duis ipsum. Integer</a></li>
<li><a href="#">Placerat metus ut quam</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">Customers</a></dt>
<dd>
<ul>
<li><a href="#">Duis ipsum. Integer</a></li>
<li><a href="#">Placerat metus ut quam</a></li>
<li><a href="#">Aliquam dolor sapien</a></li>
<li><a href="#">Dignissim nec, consectetuer</a></li>
<li><a href="#">Quis, vulputate vulputate, leo</a></li>
<li><a href="#">Quisque consequa</a></li>
<li><a href="#">ultrices pede. Nam gravida</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">Partners</a></dt>
<dd>
<ul>
<li><a href="#">Duis ipsum. Integer</a></li>
<li><a href="#">Placerat metus ut quam</a></li>
<li><a href="#">Aliquam dolor sapien</a></li>
</ul>
</dd>
<dt><a href="#">Contact</a></dt>
<dd>
<ul>
<li><a href="#">Duis ipsum. Integer</a></li>
<li><a href="#">Placerat metus ut quam</a></li>
<li><a href="#">Aliquam dolor sapien</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">Customers</a></dt>
<dd>
<ul>
<li><a href="#">Duis ipsum. Integer</a></li>
<li><a href="#">Placerat metus ut quam</a></li>
<li><a href="#">Aliquam dolor sapien</a></li>
<li><a href="#">Dignissim nec, consectetuer</a></li>
<li><a href="#">Quis, vulputate vulputate, leo</a></li>
<li><a href="#">Quisque consequa</a></li>
<li><a href="#">ultrices pede. Nam gravida</a></li>
</ul>
</dd>
</dl>
<br class="clear" />
<div class="footerOther">
<ul class="footerBloc1">
<li><a href="#"><img src="img/common/picto-rss.gif" width="21" height="20" alt="RSS" /></a> |</li>
<li><a href="#">Mentions</a> |</li>
<li><a href="#">légales</a> |</li>
<li><a href="#">Credits</a></li>
</ul>
<div class="footerNewsletter">
<form action="#" method="post">
<p><label for="newsletter">Newsletter</label>
<input type="text" class="inputNL" id="newsletter" name="newsletter" value="Please, enter you e-mail" onfocus="if(this.value=='Please, enter you e-mail') this.value='';" />
<input type="submit" class="btOk" value="Ok" /></p>
</form>
</div>
<p class="footerLogo"><img src="img/common/logo_.gif" width="90" height="30" alt="" /></p>
</div><!-- /footerOther -->
</div><!-- /footerInt -->
</div>
</div><!-- /footer --> |
Voilà le css du footer:
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
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
|
#footer{
background: url(../img/common/bg_footerT.gif) 0 0 no-repeat;
font-size: 0.9em;
width: 100%;
}
#breadcrumb{
padding: 1px 20px 1px 15px;
margin-bottom: 0;
height: 30px;
font-size: 1.18em;
color: #959595;
}
#breadcrumb li{
display: inline;
}
#breadcrumb li img{
vertical-align: middle;
}
#breadcrumb li a{
color: #959595;
}
.footerInt{
background: url(../img/common/bg_footerB.gif) 0 bottom no-repeat;
padding: 20px 1px 1px 1px;
}
* html .footerInt{
padding-bottom: 10px;
}
*+html .footerInt{
padding-bottom: 10px;
}
#footer a:hover{
color: #f26522;
}
#footer dl{
width: 175px;
float: left;
padding-bottom: 5px;
margin-left: 20px
}
#footer dt{
margin-bottom: 2px;
}
#footer dt a{
color: #555;
text-transform: uppercase;
font-weight: bold;
}
#footer dd{
margin-bottom: 15px;
}
#footer dd li{
margin-bottom: 2px;
}
#footer dd li a{
background: url(../img/common/arrowFooter.gif) 0 4px no-repeat transparent;
padding-left: 8px;
}
#footer dd li a:hover{
background-image: url(../img/common/arrowFooter_on.gif);
}
.footerOther{
border-top: solid 1px #e7e7e7;
padding: 10px 15px;
}
html > body .footerOther{
overflow: hidden;
}
* html .footerOther{
height: 1%;
}
.footerOther li{
display: inline;
}
.footerOther li img{
vertical-align: middle;
}
.footerOther li a{
margin-right: 5px;
padding-left: 5px;
}
.footerBloc1{
width: 280px;
float: left;
margin-right: 10px;
padding-top: 10px;
color: #c6c6c6;
}
.footerBloc1 a{
color: #858585;
}
.footerNewsletter{
width: 570px;
float: left;
margin-right: 10px;
padding-top: 10px;
}
.footerNewsletter label{
color: #3b3b3b;
font-size: 1.27em;
font-weight: bold;
background: url(../img/common/picto-newsletter.gif) 0 0 no-repeat transparent;
padding-left: 25px;
margin-right: 5px;
}
.inputNL{
background: url(../img/common/bg_inputNL.gif) 0 0 no-repeat transparent;
width: 148px;
height: 14px;
padding: 2px 5px;
color: #4c4c4c;
border: 0;
}
.btOk{
background: url(../img/common/bg_btOk.gif) 0 0 no-repeat transparent;
width: 39px;
height: 18px;
text-align: center;
border: 0;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.NLConfirmation{
background: url(../img/common/NLConfirmation.gif) 0 0 no-repeat transparent;
padding-left: 35px;
color: #f26522;
padding: 10px 5px 7px 35px;
margin-left: 10px;
}
.error{
color: Red;
display: block;
margin-left: 110px;
position: absolute;
margin-top: -15px;
}
.footerLogo{
float: left;
} |
j'ai essayé avec un hack IE7 mais je n'arrive pas à avoir la bonne forme
voilà la forme:
http://img691.imageshack.us/img691/341/footery.jpg
J'espère avoir été clair.
Merci d'avance pour votre aide
