Mauvais rendu sous IE

Sujet résolu

8 mai 2007 à 20:01:57

EDIT : Le problème de l'espace est réglé. J'ai simplement modifié display: block; en display: inline;
Par contre, le problème de la zone cliquable est toujours bien présent.

Bonjour à tous,
Je rencontre un petit problème avec Internet Explorer. Je testais mon site sous Firefox jusqu'à ce que je me dise qu'il faudrait voir le rendu sous IE et là, catastrophe

Le problème est au niveau du menu. Les différents éléments du menu sont beaucoup trop espacés sous IE alors qu'il n'y a aucun problème sous Firefox.
Deuxièmement, sous firefox, la zone cliquable va jusqu'au bout du menu alors que sous IE, seul le texte est cliquable.
Pour faire simple, j'ai fait deux screens. Un sous Firefox et un sous IE, les voilà :

Sous Firefox:

Et sous IE :

Le code HTML en question :

<div id="menu">
<ul class="menu-ul">
<li><a href="index.php">Accueil</a></li>
<li><a href="?p=inscription">Inscription</a></li>
<li><a href="?p=connexion">Connexion</a></li>
<li><a href="?p=recherche">Recherche</a></li>
<li><a href="?p=contact">Contact</a></li>
<li><a href="?p=about">A propos</a></li>
</ul>
</div>

Et le CSS qui va avec :

#menu{
width: 150px;
border-right: 4px solid #5472AE;
margin-top: 10px;
margin-bottom: 10px;
float: left;
}

#menu ul{
list-style-type: none;
padding-left: 0px;
margin: 0;
}

#menu li{
margin: 0px;
padding: 0px;
display: block;
}

#menu li a{
text-decoration: none;
color: #A75502;
font-variant: small-caps;
font-size: x-large;
display: block ;
}

#menu a:hover{
background-color: #5472AE;
color: #2F2E2C;
}

Comment pourrais-je résoudre ces deux problèmes ?

Merci d'avance.

OyoKooN

8 mai 2007 à 20:07:30

Pour ton menu, rajoute une balise <br /> après les </li>. De cette façons, ton texte ira à la ligne et le résultat sera le même sous IE que sous FF.
Pour la zone cliquable, je peux pas t'aider là. Mais au fond, ca change pas grand chose si ??

Hooli

8 mai 2007 à 20:10:20

Non, je ne veux pas bricoler un truc qui fonctionnera plus ou moins. En plus, je ne veux pas qu'il y ait d'espace entre les éléments.
Mais merci quand même.

OyoKooN

8 mai 2007 à 20:12:59

Citation : Hooli

Non, je ne veux pas bricoler un truc qui fonctionnera plus ou moins.

Ca ne fonctionnera pas plus ou moins, ca fonctionne !

Mais si là je n'ai pas répondu a ta question, que veux tu vraiment ??

Hooli

8 mai 2007 à 20:14:54

Il me semblait pourtant avoir été assez claire dans mon premier post mais c'est pas grave, je vais réexpliquer.
Je veux supprimer cet espacement entre les différents éléments du menu sous IE et je veux que toute la zone (jusqu'à la barre bleue) soit cliquable (comme c'est le cas sous Firefox, mais pas sous IE).

EDIT : Le problème de l'espace est réglé. J'ai simplement modifié display: block; en display: inline;

Par contre, le problème de la zone cliquable est toujours bien présent.

Anonyme

8 mai 2007 à 20:55:49

#menu li a{
text-decoration: none;
color: #A75502;
font-variant: small-caps;
font-size: x-large;
margin: 0;
padding: 0;
display: block ;
}

essayes-ça, ça devrait fonctionner

Hooli

8 mai 2007 à 21:44:31

Ca ne change rien BlackShade, mais merci quand même.

Bilbou

8 mai 2007 à 22:35:04

Chu !

La propriété display: block; associée aux balises <li></li> de ton menu me semble tout d'abord superflue...

Ensuite, tout semble impec' sous IE 7.

Quelle version utilises-tu ?

Envoie-nous un screen pour illustrer ce problème de hover !

Bonne soirée !

Hooli

8 mai 2007 à 22:56:08

Je test sous IE 6 car c'est la version la plus utilisée actuellement.
Il m'est impossible de faire un screen pour illustrer le problème de hover car le screen ne prend pas en compte le curseur. Mais sous Firefox, la zone cliquable et le rectangle allant de l'extrême gauche jusqu'à la barre verticale bleue alors que sous IE, seul le texte est cliquable.

Bilbou

8 mai 2007 à 23:01:44

Je ne vois qu'une explication, farfelue !

#menu li a{
text-decoration: none;
color: #A75502;
font-variant: small-caps;
font-size: x-large;
display: block ;
}

Enlève l'espace avant le dernier point-virgule !

Hooli

8 mai 2007 à 23:03:00

Non, ça ne change rien, mais merci quand même

Bilbou

8 mai 2007 à 23:04:20

J'ai un doute tout à coup... :-°

Tu as bien laissé un display: block sur tes liens ?

Yaminou

8 mai 2007 à 23:45:59

Une petite page en ligne?

Candygirl

9 mai 2007 à 11:13:53

Probablement un problème de haslayout. En rajoutant un width de 100% sur tes différents éléments ton problème devrait disparaître:

#menu ul{
width:100%;
}

#menu li{
width:100%;
}

#menu li a{
width:100%;
}

Hooli

9 mai 2007 à 14:23:07

Candygirl : c'est une bonne idée à laquelle je n'avais pas pensé mais ça ne change rien

J'ai mis la page en ligne : http://www.hooli666.be/sites/hb2/index.php
Je remet les codes modifiés :

HTML :

CSS :

#menu{
width: 150px;
border-right: 4px solid #5472AE;
margin-top: 10px;
margin-bottom: 10px;
float: left;
}

#menu ul{
list-style-type: none;
padding-left: 0px;
margin: 0;
width: 100%;
}

#menu li{
margin: 0px;
padding: 0px;
display: inline;
width: 100%;
}

#menu li a{
text-decoration: none;
color: #A75502;
font-variant: small-caps;
font-size: x-large;
display: block;
width: 100%;
}

#menu a:hover{
background-color: #5472AE;
color: #2F2E2C;
}

J'espère que vous saurez m'aider.
Merci d'avance.

Bilbou

9 mai 2007 à 19:13:51

YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH !!!!!! :pirate:

Et bien après des heures de recherche pour savoir le pourquoi du comment ton menu fonctionnait mal sous IE, je te le dis : j'ai trouvé la solution ! (enfin, je crois...) :-°

Ce bug venait visiblement du fait que ton lien ne comportait ni image de fond, ni couleur de fond avant son survol ! :soleil:

Je n'avais jamais entendu parler de cela auparavant, alors, merci, grâce à toi, je me coucherai moins bête ce soir !

Venons-en à la solution...

Pour résoudre ton affaire, tu peux :

- Soit créer un GIF transparent de 1px sur 1px que tu placeras en background répété sur tes liens (ce que j'ai fait).
- Soit appliquer à tes liens la même couleur de fond que ton div #page.

Voilà, voilà, désolé pour le cri de joie, mais je m'en arrachais les cheveux !

J'espère que cela règlera ton problème !

PS : Voici la CSS que j'ai utilisée : (fond.gif étant le fameux pixel transparent)

/*
Feuille de style de Heavy-Blog V2.
Date de création : 12/01/2007
Dernière modification : 18/02/2007
*/

html{
background-image:url("../img/fond.jpg");
}

body{
font-family: 'Trebuchet MS', Arial, 'Times new roman', Times, serif;
font-size: 0.8em;
}

#page{
margin: 15px auto 15px auto;
padding: 0;
height: auto;
width: 760px;
border: solid 1px #2F2E2C;
background-color: #9C9C9A;
}

#header{
background-color: #2F2E2C;
color: #A75502;
height: 50px;
}

.header-titre{
font-size: 40px;
padding-left: 10px;
letter-spacing: 5px;
}

.header-barre{
font-size: 40px;
color: #5472AE;
font-weight: bold;
}

.header-slogan{
color: #5472AE;
font-weight: bold;
}

#corps{
padding-left: 5px;
}

#menu{
width: 150px;
border-right: 4px solid #5472AE;
margin-top: 10px;
margin-bottom: 10px;
float: left;
}

#menu ul{
list-style-type: none;
padding-left: 0px;
margin: 0;
padding: 0;
}

#menu li{
margin: 0;
padding: 0;
}

#menu li a{
text-decoration: none;
color: #A75502;
font-variant: small-caps;
font-size: x-large;
display: block;
background-image: url('fond.gif');
}

#menu a:hover{
background-color: #5472AE;
color: #2F2E2C;
}

#contenu{
margin-left: 160px;
margin-right: 5px;
}

h1{
margin-left: 50px;
margin-top: 0;
}

h3{
border-bottom: 1px solid #A75502;
border-left: 3px solid #A75502;
color: #5472AE;
font-size: large;
margin-bottom: 10px;
padding-left: 5px;
}

.date{
text-align: right;
font-style: italic;
}

h4{
margin-top: 5px;
margin-bottom: 5px;
}

p{
margin-top: 5px;
}

a{
color: Black;
}

.table-last{
width: 100%;
}

.td-last{
width: 33%;
text-align: center;
border-left: 1px solid #2F2E2C;
}

.input_obligatoire{
border-top: 1px solid #5472AE;
border-bottom: 1px solid #5472AE;
border-right: 1px solid #5472AE;
border-left: 3px solid #c43e3e;
}

.input_libre{
border-top: 1px solid #5472AE;
border-bottom: 1px solid #5472AE;
border-right: 1px solid #5472AE;
border-left: 3px solid #0c416a;
}

.input{
border-top: 1px solid #5472AE;
border-bottom: 1px solid #5472AE;
border-right: 1px solid #5472AE;
border-left: 1px solid #5472AE;
}

.input_envoie{
border-top: 1px solid #5472AE;
border-bottom: 1px solid #5472AE;
border-right: 1px solid #5472AE;
border-left: 1px solid #5472AE;
color: #A75502;
font-weight: bold;
font-variant: small-caps;
}

#footer{
background-color: #2F2E2C;
color: #A75502;
height: 35px;
text-align: center;
clear: both;
margin-top: 15px;
}

.footer-contenu{
font-weight: bold;
font-size: smaller;
}

.gras{
font-weight: bold;
}

.italique{
font-style: italic;
}

Hooli

9 mai 2007 à 19:35:44

C'est magnifique, ça fonctionne, tu es mon sauveur !

Je te remercie pour l'intérêt que tu as porté à mon problème

A bientôt.

Candygirl

10 mai 2007 à 9:42:05

Citation : Hooli

Candygirl : c'est une bonne idée à laquelle je n'avais pas pensé mais ça ne change rien

Si, ça changeait tout sur le code du menu que tu nous avais donné plus haut

(je viens de tester).

Si ça ne marche pas dans ta page c'est que tu as un autre problème de layout, en l'occurence sur le #corps. Rajoute ceci dans ton css (le hack pour donner le layout à IE6 sur #corps et le min-height pour la layout à IE7):

#corps{
padding-left: 5px;
min-height:1px;
}

/* \*/
* html #corps{
height:1%;
}
/* */

Et ton problème devrait avoir disparu.

Pour un design de taille fixe, à ta place, je mettrais le corps en float en lui attribuant le width correspondant (=résolution de ton problème de layout sans hack), de manière à éviter le bug des 3px sur IE6 (observable sur la différence entre ta barre latérale gauche de tes titres et le début du texte ou encore sur ta page "about", le début de tes 2 dernières lignes du premier paragraphe) et permettre de faire des clear dans ton contenu sans qu'il agisse sur ton menu.

Si tu gardes la solutions de Bilbou (perso je préfère la couleur à l'image) il faut juste être conscient que ton montage n'est pas solide et que tu risques de voir ressortir une fois ou l'autre les conséquences de ces problèmes latents.