Affichage CSS sous IE

Version imprimable

Hello,
je me suis mis au css depuis qqes jours, et je constate qu'internet explorer n'affiche pas du tout de la mème manière que firefox.
Entre autre, j'ai simplement voulu créer une bare de navigation verticale avec 3 liens. Celle ci s'affiche parfaitement sous firefox, mais sous IE ca merde (les liens s'affichent en escalier...).
Quelqu'un connait-il un moyen de régler le problème que je rencontre sous IE?

Le XHTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Exemple de barre de navigation verticale</title>
       <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Test du css" href="style.css" />
   </head>
   <body>
		<ul id="navig">
			<li class="first"><a href="index.html">Home</a></li>
			<li><a href="index.html">A propos</a></li>
			<li><a href="index.html">Quoi de neuf?</a></li>
			<li><a href="index.html">Help</a></li>
		</ul>
   </body>
</html>

Le CSS style.css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#navig, #nav li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#navig {
	font-family: Verdana, Geneva, Helvetica, sans-serif;
	font-size: .82em;
	background-color: #DDD;
}
#navig li a {
	border-color: #000;
	border-width: 1px 1px 1px 0; /* 0 a gauche pour éviter les superpositions*/ 
	border-style: solid;
	float: left;
	padding: 3px;
}
#navig li.first a { /* Pour obtenir le bord de gauche de la première case */
	border-width: 1px;
}

et si dans cette partie là, tu mets un display:inline
Code:

1 2 3 4 5 6 7 8 #navig, #nav li { display: inline; /*float: left;*/ list-style: none; margin: 0; padding: 0; }
Ca change quelque chose ??

30/03/2006, 12h32
vinzzzz

Oui j'y avais pensé mais malheureusement ca ne s'alligne plus si j'utilise inline... Les liens se remettent a l'horizontal et se chevauchent un peu, que ce soit sous firefox ou sous IE... C'est d'ailleur bizard si on demande au navig d'afficher les li inline il devrait le faire non?
30/03/2006, 12h36
vinzzzz
En fait yavai une erreur:
Code:

1 2 #navig, #nav li {
Devait etre:
Code:

1 2 #navig, #[b]navig[/b] li {
A présent c'est aligné, reste a faire ls petits réglages necessaires pour le padding qui est différent selon le navigateur (vivement qu'ils se mettent tous d'accord (et a jours...))

Merci de ton aide ;)

En fait avec le .css suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #navig, #navig li { float: left; list-style: none; margin: 0; } #navig { font-family: Verdana, Geneva, Helvetica, sans-serif; font-size: 0.8em; background-color: #DDD; padding: 0; } #navig li { display: inline; border-color: #000; border-width: 1px 1px 1px 0; border-style: solid; padding: 3px; } #navig li.first { border-width: 1px; }
Ca marche trés bien.
En revanche si j'enlève le "float: left;", les bordures ne sont plus déssinées correctement, et il apparait un espace entre les différentes cases...
De plus, si je met j'applique le float aux <li> uniquement (et pas au ul), alors le fond de couleur gris disparait...

Quelqu'un peut il me dire pourquoi le float: left; est si important et necessaire dans les deux balises? J'ai bien obtenus ce que je voulais mais j'aimerai comprendre cette partie du code que je n'arrive pas a saisir... Le positionnement css est encore un peu obscure pour moi...

30/03/2006, 15h05
blueice

Float:left, permet de retirer une boîte du flux normal pour la placer le plus à gauche possible dans le conteneur.
30/03/2006, 15h27
vinzzzz

Ouaip, mais ce que je ne comprend pas, c'est pourquoi d'une part lorsque je retire le float il apparait un espace entre les case (les balises <li> sont afifchées en inline), et d'autre part lorsque je laisse uniquemenent le float ben ca ne marche pas sur IE... Bon mùa deuxième question obtiendra surement la réponse "IE n'est pas a jours", mais pr mla première réponse j'avour ne pas comprendre.

Essaye ca :

Tu le fais à ta sauce ensuite :

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
 
<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
   <head> 
       <title>Exemple de barre de navigation verticale</title> 
       <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" /> 
      <link rel="stylesheet" media="screen" type="text/css" title="Test du css" href="style.css" /> 
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><style type="text/css">
<!--
#navcontainer
{
margin: 10px 0 0 30px;
padding: 0;
height: 20px;
}
 
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
 
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
 
#navcontainer ul li a
{
background: #fff;
width: 78px;
height: 18px;
border-top: 1px solid #f5d7b4;
border-left: 1px solid #f5d7b4;
border-bottom: 1px solid #f5d7b4;
border-right: none;
padding: 0;
margin: 0 0 10px 0;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
 
#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}
 
#navcontainer a:active
{
background: #c60;
color: #fff;
}
 
#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
}
-->
</style></head> 
   <body> 
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Quoi de neuf?</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
   </body> 
</html>