Discussion :

[serpolet]

Bonjour,

voilà mon problème, ma page s'affiche correctement dans tous les navigateurs, même internet explorer7, mais j'ai un petit problème avec le 6:

aperçu sur tous les navigateurs excepté IE6 (première image "nopb.jpg")
aperçu sur sur IE6 (deuxième image "pb.jpg")

Ce qui me pose problème, c'est la barre noir qui s'affiche au milieu, en ce qui concerne le pied de page, j'ai trouvé une solution...

Voici le code HTML pour la partie concernée:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="content">
		<ul id="iconmenu2">
                              <li id="panel1c2"><a href="toutemarque.html">/a></li>
                              <li id="panel2c2"><a href="stock.html"></a></li>
                              <li id="panel3c2"><a href="moyen.html"></a></li>
                </ul>
</div>
<div class="menu">
 
</div>

Voici le code CSS qui nous intéresse:

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
 
/*______________________________________________________________ produit ____________________________________________________________*/
 
#iconmenu2 {
 
border:0px;
margin-top:-10px;
position: relative;
margin-left: 10px ;
padding: 3px; 
width: 394px;
height: 375px; 
background: url(images/content-produits.jpg) no-repeat;
}
 
#iconmenu2 li {
left:0px;
border:0px;
width: 394px; 
height: 125px; 
position: absolute; 
top: 0px; 
background: url(images/content-produits.jpg) 0 0 no-repeat; 
display: block; 
list-style: none;
}
 
#iconmenu2 a {
width: 394px; 
height: 125px; 
display: block; 
border: 0px;
a:active {outline: none;}
}
 
#iconmenu2 a {
 
	outline: none;
 
}
 
:focus {
 
	-moz-outline-style: none;
 
}
 
#iconmenu2 a:hover {
border: 0px;
}
#iconmenu2 #panel1c2 {
border:0px;
left: 0px;
}
 
#iconmenu2 #panel2c2 {
border:0px;
top: 125px;
background-position: 0 -125px ;
}
 
#iconmenu2 #panel3c2 {
border:0px;
top: 250px; 
background-position: 0 -250px ;
}
 
 
 
#iconmenu2 #panel1c2 a:hover {border:0px; background: url(images/content-produits.jpg) -400px -0px  no-repeat;}
#iconmenu2 #panel2c2 a:hover {border:0px; background: url(images/content-produits.jpg) -400px -125px  no-repeat;}
#iconmenu2 #panel3c2 a:hover {border:0px; background: url(images/content-produits.jpg) -400px -250px  no-repeat;}
 
 
 
/*___________________________________________________________ Fin ______________________________________________________________*/
 
 
.content {
  float: left;
 
}
.menu {
  background:url(images/content-produits2.jpg) no-repeat;
 
  margin-top:-10px;
  margin-right:11px;
  margin-left: 410px;
  background-color:white;
  border: 0px solid #000000;
  height:375px;
}

Mon site est en ligne: http://www.pro-pneus.fr/

A mon avis cela vient des classes .menu et .content dans le css...

Si vous avez des éventuelles réponses...merci d'avance.

Cordialement,

Serpolet.

[Lideln75]

Oui c'est le problème très connu des "3 pixels" quand tu as des éléments en float avec IE6 (j'ai pas regardé ton code mais je présume que c'est bien ça).

En fait faut faire une recherche sur google avec "3px bug ie6" et hop :
http://www.positioniseverything.net/...reepxtest.html

Bonne journée

[serpolet]

En effet, j'en avais déjà entendu parler...j'en ai pas fait le rapprochement...mais je ne vois pas trop comment l'appliquer dans mon cas...

Je sais que cela vient donc des classes et que le changement doit se faire:

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
 
.content {
  float: left;
 
}
.menu {
  background:url(images/content-produits2.jpg) no-repeat;
 
  margin-top:-10px;
  margin-right:11px;
  margin-left: 410px;
  background-color:white;
  border: 0px solid #000000;
  height:375px;
}

Mais je ne vois pas ou placer les -3px...

[Lideln75]

Ton "content" n'a pas de width ?

Je pense qu'il faudrait faire un truc du genre :

Code :

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

1
2
3
4
5
6
 
.menu
{
  margin-left: 410px;
  -margin-left: 407px; /* spécial IE */
}

Peut-être... A tester ! Je connais ce bug de renommée mais je n'ai pas eu à le résoudre pour le moment.

[serpolet]

Ce n'est pas grave qu'il n'y ait pas de width dans content, je l'ai mis deja dans inconmenu2...le problème ne vient pas de là.

Et ence qui concerne ton code css, cela n'existe pas " -margin:..."

Merci en tout cas pour ta participation.

[Lideln75]

1) Heuu ben si, en général vaut mieux mettre une width, surtout que ton content est ta partie flottante et que c'est un div (donc ça prend 100% de la place, par défaut)

2) Si, "-margin-left" existe, et comme je l'ai mis en commentaire, il n'y a qu'IE qui le voit.

J'arrête de t'aider, bonne continuation.