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.

[serpolet]

Merci pour ta réponse!

Mais cela ne marche pas, merci pour ton aide en tout cas!

[Lideln75]

Il y a plein de sites (surtout en anglais) qui expliquent différentes solutions pour ce bug des 3px (sur google : "3px jog", ou "3px gap", etc)

Par exemple : mettre un float: right à ton élément de droite.
Ou mettre une margin-right de 3px.

Enfin il faut tester un peu, quoi, mais je suis sûr que tu trouveras une solution sur ces sites. Essaie déjà le float:right pour ton élément de droite. Donne une width à ton élément de gauche. Fais des ptits tests de ce genre. J'essaierai quand je serai au boulot (j'ai le même bug au taff mais c'est à un endroit non gênant donc j'ai d'autres choses plus importantes à régler)

A+

[serpolet]

Je te remercie pour ton aide, j'y ai passé beaucoup de temps là dessus et j'ai réussi à trouver une autre solution pour plus qu'il y ait ce bug ( je ne l'ai pas corrigé mais remplacé), elle me convient très bien...si j'ai le temps je me pencherai aussi là-dessus pour pouvoir résoudre à l'avenir si j'ai un problème similaire.

Merci encore pour le temps que t'as consacré à m'aider, bonne journée.