différence IE7 et ff 3.5 avec dl dd

**zekabyle** · 05/11/2009, 16h15

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 html :

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
 
<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="&gt;" /></li>
							<li><a href="#">Products</a> <img src="img/common/fleche.gif" width="10" height="30" alt="&gt;" /></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&eacute;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 :

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
 
#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:

J'espère avoir été clair.

Merci d'avance pour votre aide

**zekabyle** · 06/11/2009, 16h16

Sous firefox, le background de l'image est bien blanche par contre sous IE 7 ça coupe, j'ai essayé avec un hack IE7 de modifier les padding et les margin mais je n'arrive pas à résoudre le problème représenté par l'image au dessus.

Comment faudrait-il faire pour mieux gérer les problèmes d'espacements avec IE 7 ?
Est-ce que sous les autres IE aussi ils risqueraient d'y avoir un problème?

**zekabyle** · 08/11/2009, 14h46

est-ce qu'il faudrait modifier l'image de fond?

faut-il ajouter un margin pour chaque dl pour modifier l'espacement entre chaque dl et modifier l'image de fond en l'aggrandissant?

y a-t-il un moyen de faire sans modifier l'image?

pourtant sous firefox l'image de fond ne descend pas jusqu'à ce que le texte soit bien sûr trop long. Enfin ici, l'image de fond sous firefox ne descend pas et on voit bien le texte entier avec un fond d'image blanc.

**zekabyle** · 09/11/2009, 17h38

C'est en fait les deux images du background du footer qui se séparent mais je ne vois pas comment faire pour modifier les espacements et faire en sorte que sous IE7 les images ne se séparent pas.

Qu'est-ce qui fait que sous IE7, les images se séparent ainsi contrairement à firefox?

**zekabyle** · 10/11/2009, 19h28

Est-ce qu'il y a quelque chose qui n'est pas clair dans mon problème?
Je peux essayer de reformuler mon problème si je me suis mal exprimé, ça m'arrive assez souvent.

En tout cas j'ai retouché l'image pour avoir une hauteur plus grande mais ça n'a rien changé

différence IE7 et ff 3.5 avec dl dd

HTML

Vue hybride

Discussions similaires

Partager

Partager