Affichage décalé sous IE6

**dudule0** · 22/01/2009, 14h12

Bonjour à tous,

A l'aide je suis un débutant!

Voici mon souci, sous IE6, screenshot joint on peut constater que:

1°/ le menu vertical CSS ne colle pas à la partie gauche de l'écran
2°/ ce même menu doit faire 225px et sous IE6 il est d'une largeur bien inférieure
3°/ Sous FF3 et IE7 pas de problème l'affichage est correct.

Pourriez-vous me conseiller afin de remédier à ce vilain affichage sous IE6.

Bonne escalade.

PS mes deux feuilles CSS externes et la partie (x)HTML

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
menu
body { margin:0; padding:0; }
 html .monelementbogue { height: 1%; }
 
#tab1 { 	
	position:absolute;
	left:225px;
} 
#menu {
width:225px; 
text-align:center; 
position:fixed; 
left:0; top:0;
float:left; }
 
.box { position:relative; }
#menu a, #menu a:visited { /*configuration des blocks menu*/
background-color:#CD3301;
color:#FFFFFF; 
display:block;
width:200px; 
height:28px; 
font-weight: bold; /*text gras*/
font-size:16px; /*14px*/
border:0px solid #fff; /*1px solid #fff (espacement vertical entre les blocks)*/
padding: 12px; /*5px*/ }
* html #menu a, * html #menu a:visited {
width: 225px; /*200px*/
height:28px; /*28px*/
width:88px; /*88px*/
height:28px; /*16px*/ }
#menu a span { display:none; }
#menu a:hover { /*encadrement des block au survol*/
border:1px solid #ccc; /*000*/ }
#menu a:hover span.left, /* boutons d'encadrement de texte*/
#menu a:hover span.right { /* boutons de'encadrement de texte*/
display:block; /*block*/
position:absolute; /*absolute*/
height:0; /*0*/
width:0; /*0*/
border-top:8px solid #fff; /*#fff */
border-bottom:8px solid #fff; /*#fff */ }
#menu a:hover span.left { /* espacement horizontal gauche des boutons d'encadrement du texte*/
left:13px; /*5px*/
top:15px; /*5px*/
border-left:8px solid #c00; }
#menu a:hover span.right { /* espacement horizontal droite des boutons d'encarement du texte*/
left:210px; /*87px*/
top:15px; /*5px*/
border-right:8px solid #c00; }
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px; /*8px*/
height:20px; /*16px*/
width:0; /*0px*/
h\eight:0; /*opx*/
}
#menu a:hover span.lk { /*définition des blocks explication*/
display:block;
position:absolute;
left:225px; /*120px*/
top:0; /*0px*/
padding:10px; /* 5px*/
width:250px; /*100px*/
background-color:#CCFFFF; /*définition couleur de fond blocks explication*/
color:#000; /*000*/
border:1px solid #CD3301; /*1px solid #234*/
}

Fond de page

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
 
 
body {
	background-image: url(images/varappe.jpg);
	background-repeat: repeat-x;
	background-attachment: fixed;
	width:100%
	height:100%
;
}
-->
#content {
	background-image:url(images/varappe.jpg);
}
 
h1, h2, {font-family: "Times New Roman", serif;
}
h1, h2	{text-align: center;
}
 
p{font-family: "Courier New", Courier, monospace;
}
	p{text-align: justify;
}
 
th { 
	text-align: center;
}
a {
	color: red;
 
}
td {
	text-align: left;
}
a {
	color: blue;
 
}
p {
	text-align: justify;
}

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Ma montagne</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
<--<link rel="stylesheet" type="text/css" href="style.css" />-->
<style type="text/css">
<!--
p.MsoNormal {
margin:0cm;
margin-bottom:.0001pt;
font-size: 10px;
font-family:"Arial","sans-serif";
}
-->
</style>
</head>
 
<body>
<div id="menu">
  <div class="box">
    <a href="">Accueil
    <span class="lk">Votre page de réception      </span> </a>  </div>
  <div class="box">
  <a href=""><span class="lk">      </span>    </a>  </div>
  <div class="box">
    <a href="pages/nouscon.htm">Nous connaître
      <span class="left"></span>
      <span class="right"></span>
      <span class="lk">
  Nos fonctions, nos activités.      </span>    </a>  </div>
  <div class="box">
  <a href=""><span class="lk"></span>    </a>  </div>
  <div class="box">
    <a href="pages/formul.htm">Recherche d itinéraire
      <span class="left"></span>
      <span class="right"></span>
      <span class="lk">
  Aidez-vous de notre formulaire !    </span>    </a>  </div>
  <div class="box">
    <a href="">
    <span class="left"></span>
    <span class="right"></span>
    <span class="lk">      </span>    </a>  </div>
  <div class="box">
    <a href="pages/denivele.htm">Dénivelé
    <span class="left"></span>
    <span class="right"></span>
  <span class="lk">Un grand choix de pentes      </span>    </a>  </div>
  <div class="box">
    <a href="">
    <span class="left"></span>
    <span class="right"></span>
    <span class="lk">      </span>    </a>  </div>
  <div class="box">
    <a href="pages/force.htm">Aptitude
    <span class="left"></span>
    <span class="right"></span>
  <span class="lk">Un grand choix selon votre niveau       </span>    </a>  </div>
  <div class="box">
    <a href="">
    <span class="left"></span>
    <span class="right"></span>
    <span class="lk">      </span>    </a>  </div>
  <div class="box">
    <a href="pages/equipement.htm">Equipement
    <span class="left"></span>
    <span class="right"></span>
    <span class="lk">Nous pouvons vous aider à satisfaire votre recherche !     </span>    </a>  </div>
  <div class="box">
    <a href="">
      <span class="left"></span>
      <span class="right"></span>
  <span class="lk">  </span></a>  </div>
</div>
<div style="margin-left:225px;">
</div>
<!--<div align="right"><img src="images/varappe.jpg" alt="" width="983" height="800" border="0" /></div>-->
<p class="MsoNormal">&nbsp;</p>
 
</body>
</html>

**12monkeys** · 24/01/2009, 16h54

Bonjour

Dans ton fichier html tu as une erreur sur ton premier commentaire : il manque le point d'exclamation :

Code html :

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

<--<link rel="stylesheet" type="text/css" href="style.css" />-->

C'est ce qu'on voir affiché sur ta copie d'écran...

**dudule0** · 24/01/2009, 17h21

Merci de ta réponse 12monkeys, le ! est enlevé pour utiliser la feuille de style

Je remet ce ! lorsque je désire annihiler le fond de page. Merci quand même de me l'avoir signalé.

As-tu une solution pour adapter ma page sous IE6 ?

Il est bon de se relire parfois !!!

**12monkeys** · 24/01/2009, 17h41

Je ne te comprends pas trop parce que tu dit des trucs contradictoires

Envoyé par dudule0

le ! est enlevé pour annihiler la feuille de style

Tu enlève le ! pour enlever (

annihiler = réduire à néant, détruire) la feuille de style ? Or enlever le point d'exclamation c'est supprimer une composante essentielle du commentaire tout en laissant une autre partie qui risque d'être affiché dans le navigateur.

Envoyé par dudule0

Je remet ce ! lorsque je désire enlever le fond de page.

Ok là je suis d'accord...

Envoyé par dudule0

As-tu une solution pour adapter ma page sous IE6 ?

Si tu veut enlever le commentaire, enlève le en entier, je ne dis pas que cela peut venir de là mais c'est une chose à ne pas négliger...

**dudule0** · 24/01/2009, 18h26

J'ai "réparé" mon commentaire

**12monkeys** · 24/01/2009, 18h44

Et ? ... Ca marche ?

**dudule0** · 24/01/2009, 19h14

Non ça ne marche pas

Et je ne sais que faire peux-tu m'aider?

Je pense qu'il s'agit de l' affichages de mon CSS menu mal interprété sous IE6. Sous FF3 et IE7 ect tout est parfait.

**Erwan31** · 24/01/2009, 20h08

Bonsoir,
pour commencer ton code est un peu lourd :
> à quoi servent les span right et left du menu?
> tu as un class .box sur chaque div mais tu pourrais éviter cela en ciblant les div enfant de menu (#menu div {...})

> Tu devras remplacer ton div menu par un élément sémantique plus approprié
(un <ul> (unordored list))

> Enfin ton problème vient de ce code

Code :

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

1
2
3
4
5
6
* html #menu a, * html #menu a:visited {
	width: 225px; /*200px*/
	height:28px; /*28px*/
	width:88px; /*88px*/
	height:28px; /*16px*/
}

Les règles introduites par * html ne s'appliquent qu'à IE6- et le dernier width prend le dessus sur celui déclaré en amont.

**dudule0** · 24/01/2009, 20h44

Bonsoir Erwan31,

je suis sur que nous allons y arriver, merci de l'entraide.

.../...Les règles introduites par * html ne s'appliquent qu'à IE6- et le dernier width prend le dessus sur celui déclaré en amont.

1°/Donc et si je comprends bien la suppression de "width:88px;" doit permettre de réaligner le menu CSS sur la page.

(Pardon de mon insistance mais j'apprends le CSS "sur le tas" en modifiant des codes et ne sais pas encore créer.)

2°/ J'ai tout de même bien noté les allègements nécessaires au bon fonctionnement de mon site perso

Peux-tu me répondre sur 1°/.

Cordialement.

**Erwan31** · 24/01/2009, 21h34

Oui tu n'as qu'à essayer

Ce n'est pas un réalignement qui se produit mais un augmentation de la largeur des lien du menu vers la gauche et la droite.

Pour info le code que tu as récupéré n'est pas très bon.
D'autre part tu as h\eight:0 (ce qui invalide ta CSS)
et tu as oublié de supprimer une virgule après la règle commençant par h1, h2.

**dudule0** · 25/01/2009, 11h21

La tentative a échoué.

J'ai bien enlevé "width:88px;" et l'affichage avec IE6 est le même que mon screenshot de début de post.

Ou alors je m'y suis encore mal pris !

**Erwan31** · 25/01/2009, 12h32

Envoyé par dudule0

La tentative a échoué.
Ou alors je m'y suis encore mal pris !

Oui

**dudule0** · 26/01/2009, 09h46

Envoyé par Erwan31

Bonsoir,
pour commencer ton code est un peu lourd :
> à quoi servent les span right et left du menu?
> tu as un class .box sur chaque div mais tu pourrais éviter cela en ciblant les div enfant de menu (#menu div {...})

> Tu devras remplacer ton div menu par un élément sémantique plus approprié
(un <ul> (unordored list))

Bon tout fonctionne Erwan31, j'ai repris tes explications point par point et c'est parfait.

Maintenant je vais travailler sur l'allègement du code...Merci encore

Affichage décalé sous IE6

Positionnement en CSS

Discussions similaires

Partager

Partager