Affichage CSS sous IE

**vinzzzz** · 30/03/2006, 11h38

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 :

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

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
 
#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;
}

**glloq8** · 30/03/2006, 12h17

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

Code :

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

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 ??

**vinzzzz** · 30/03/2006, 12h32

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?

**vinzzzz** · 30/03/2006, 12h36

En fait yavai une erreur:

Code :

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

1
2
 
#navig, #nav li {

Devait etre:

Code :

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

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

**vinzzzz** · 30/03/2006, 13h00

En fait avec le .css suivant:

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

**blueice** · 30/03/2006, 15h05

Float:left, permet de retirer une boîte du flux normal pour la placer le plus à gauche possible dans le conteneur.

**vinzzzz** · 30/03/2006, 15h27

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.

**blueice** · 30/03/2006, 15h43

Essaye ca :

Tu le fais à ta sauce ensuite :

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
 
<!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>

Affichage CSS sous IE

CSS

Vue hybride

Discussions similaires

Partager

Partager