Une petit bordure noire qui ne disparait pas avec IE6

Bonjour,

je suis actuellement en train de travailler sur ce site : http://sylvaincharroy.fr/z64h/

Petit à petit, j'obtiens des différents navigateurs tout ce que je veux... sauf de IE6 qui joue encore un peu les rebelles !

Tout d'abord, voici le lien vers la feuille de style : http://sylvaincharroy.fr/z64h/style.css

Voici mon problème : sous le menu horizontal (jeu, medias etc.) IE6 m'affiche une ligne noire continue de 1pixel.

Je pense qu'elle est due à cette déclaration qui est mal interprétée

div#contenu{
    [b]border-top: transparent solid 1px;[/b]
    background: url(design/menu.jpg) repeat-y left top;
    margin-bottom : 10px;
}

Le problème, c'est que sans cette ligne, j'ai un décalage sous firefox de IE entre le menu horizontal et le reste de ma page (un espace blanc d'environ 5px)

Quelqu'un aurait-il une solution pour me permettre de palier à ce problème ? Merci d'avance !
Modifié par SylvainVV (19 Apr 2008 - 17:20)

Bonjour,

si tu superposes les captures d'écran de Fx2 et IE6, tu pourras constater que verticalement, il y a un décalage à partir du fil d'Ariane et en fait à partir de ce trait noir.
Pour en avoir le coeur net, passe en mode débogage l'instruction background ligne 295 de style.css

ul#menu li#jeux a {
background: hotpink url(design/bg_menu_jeu.jpg) repeat scroll 0pt -40px;
}

Ou tu peux même, si c'est pas net, remplacer background par background-color et mesurer la hauteur.

Ce décalage est en général provoqué par une marge dans un des éléments qui précéde (souvent une marge par défaut d'un paragraphe ou d'un titre). IE6 et Fx2 n'en ont pas le même rendu. Ici, en ayant regardé avec Firebug sous Fx, je dirais qu'il s'agit du <p> de #zone_membre qui a encore sa marge basse par défaut de 0.8em. Remplace margin-top: 0; par margin:0; et ça devrait être bon.
Je n'ai pas testé sous IE6 vu que je n'ai pas accès à ton FTP , juste avec Firebug, donc si ce n'est pas ça il faudra regarder plus en détail. Les background-color: couleurquiflashe; aident beaucoup pour cela

EDIT:
attention, je n'ai pas parfaitement aligné les 2 captures en haut, il y a un décalage d'1 px (ou 2 px? y a un trait gris à droite sorti de je ne sais où)
Modifié par Felipe (19 Apr 2008 - 18:18)

Bonsoir

Apparemment ça viendrait de là (pour la ligne noire) :

div#contenu{
border-top: transparent solid 1px;
background: url(design/menu.jpg) repeat-y left top;
margin-bottom : 10px;
}
Modifié par pastazere (19 Apr 2008 - 19:43)

Salut,

Je pense qu'il suffit de supprimer ton border-top: transparent solid 1px; et de rajouter un margin-top: 0; à p#nav_horizontale

Modifié par ghost (20 Apr 2008 - 04:19)

Bonjour à tous et merci pour vos réponses et plus particulièrement à Felipe qui c'est bien cassé la tête pour m'aider.

J'ai suivis vos différents conseils, et désormais l'affichage est identique sur chaque navigateur. Merci beaucoup.

Apparemment, la route est encore longue pour comprendre toutes les subtilités du CSS et des navigateurs.

Encore merci =)

Bonjour,

IE6 et subtilité, ça fait 2 IE6 et CSS, ça fait ... euh non rien, on est pas vendredÿ

Tu considères que ce sujet est [Résolu] ?