Discussion :

[snyfir]

Bonjour, j'ai créé un menu pour mon site web. Sous firefox et ie7, j'obtien exactement la même chose. Par contre sur ie6, les éspacement son presque doublé. Je n'arrive pas a afficher la même chose que sur firefox et ie7.
Merci de votre aide.

Voici le code.

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="menup">
   <ul>
    <li><a href="index.php">ACCUEIL</a></li>
    <li><a href="contenu.php">ARTICLES</a></li>
    <li><a href="news.php">NEWS</a></li>
        <li><a href="about.php">A PROPOS</a></li>
    <li><a href="contact.php">CONTACT</a></li>
   </ul>
</div>

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
 
.menup ul /* Toutes les listes à puces se trouvant dans un menu */
{
    list-style-type: none; 
    padding: 0px;
    margin: 0px;
}
 
.menup li /* Toutes les listes à puces se trouvant dans un menu */
{
    margin:0;
    margin-bottom: 8px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
    padding: 0px 0px 0px 2px;
    vertical-align:middle;
}
 
.menup a
{
    color: #ffffff;
    font-family: Candara, "Agency FB", "Myriad Pro", Arial, "Arial Black", "Times New Roman", Times, serif;
    font-size: 16px;
    text-decoration: none;
    display:block;  /* Permet d'étendre le surlignage du texte */
}
 
.menup a:hover /* Quand on pointe sur un lien du menu */
{
    text-decoration: none;
    background-color: #525454;
}

[Erwan31]

Bonsoir,
c'est un bug de haslayout que tu dois corriger en dotant les liens d'une propriété leur conférant le layout:

Code :

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

.menup a {zoom:1}

A placer dans une CSS IE pour IE6 et inférieur appelée via des commentaires conditionnels
dans le head (faire une recherche)

[snyfir]

Bonsoir,
c'est un bug de haslayout que tu dois corriger en dotant les liens d'une propriété leur conférant le layout:

Code :

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

.menup a {zoom:1}

A placer dans une CSS IE pour IE6 et inférieur appelée via des commentaires conditionnels
dans le head (faire une recherche)

Merci,
J'ai rajouter cette ligne.
Mon espacement est devenu beaucoup plus convenable. Cependant, j'ai encore un espacement un peut supérieur que sur ie7 et firefox (2, 3 px).

De plus "zoom" n'est pas reconnu valide CSS !!

[MasterOfChakhaL]

Salut,

Ça peut aussi venir de nœud texte qui trainent (les sauts de lignes dans le code HTML).

Tu peux essayer un code du genre:

Code html :

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

1
2
3
4
5
<ul>
  <li><a href="...">...</a></li><!--
  --><li><a href="...">...</a></li><!--
  --><li><a href="...">...</a></li>
</ul>

Les commentaires HTML masqueront le saut de ligne.
Tu peux aussi écrire tous tes li sur une seule ligne, mais bon, le code ne sera vraiment pas lisible...

[pop_up]

De plus "zoom" n'est pas reconnu valide CSS !!

Il faut que tu mette cette propriété dans une feuille de style pour IE et que tu la joigne dans un commentaire conditionnel du style

Code :

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

1
2
3
4
 
<!--[if lt IE 7]>
        <link href="ie.css" rel="stylesheet" media="screen" />
    <![endif]-->

[Candygirl]

Bonjour,

Cependant, j'ai encore un espacement un peut supérieur que sur ie7 et firefox (2, 3 px).

Il se peux que tu doives aussi doter ton li du layout (en testant ton code ci-dessus, le résultat est idem FF/IE6 chez moi).

De plus "zoom" n'est pas reconnu valide CSS !!

C'est, entre autre pour ça que Erwan31 t'a conseillé de l'insérer par le biais des commentaires conditionnels. De cette manière ta validation est préservée.

Dans ton cas, vu que tu n'as ni margin ou padding sur ton a, tu peux, à la place du zoom, lui attibuer un width de 100%, ce qui aura le même effet pour IE6. Par contre, ce n'est pas utilisable sur ton li qui comporte un padding.

[Erwan31]

De plus "zoom" n'est pas reconnu valide CSS !!

Oui pardon j'avais oublié de le préciser.

[snyfir]

Merci bien pour vos réponses.