28172 sujets

CSS et mise en forme, CSS3

Problème IE6 : menu s'affiche en inline et pas en block

Salut à tous,

Sur mon site web (en Spip), j'ai un menu à gauche qui est constitué de plusieurs liens. J'aimerais que ces liens s'affichent les uns en dessous des autres.

Mon menu est constitué d'un div ".navigationa" dans lequel se trouve des liens ".navigationa a". Pour que ces liens s'affichent les uns en dessous des autres, et non pas les uns derrières les autres, j'ai donné à ma balise css ".navigationa a" la proprieté display:block;

Sous FF, ca s'affiche correctement mais sous IE6, mes liens s'affichent en inline c'est à dire les uns derrières les autre. J'ai bien une solution qui est de mettre chaque lien dans un div mais si je pouvais éviter et comprendre pq ca bug, je préfèrerais.

Voici un lien vers une page du site (le menu en question est le menu vertical à gauche au dessus du champ "recherche") :

http://www.comitedevigilance.be/spip.php?rubrique2

Code css pour le menu :

.navigationa {
/*hack_début*/display: inline;/*permet de contourner un bug présent dans IE6 qui double la taille de margin-left à gauche d'un float. Voir  http://www.positioniseverything.net/explorer/doubled-margin.html  hack_fin*/
position:relative;
float:left;
width:200px;
height:390px;
margin-left:105px;
background-color:#fff;
background:0px 0px no-repeat url(fond_menu_gauche.gif);
/*background:no-repeat url(images_optimisees/navigation.jpg);*/
}

.navigationa a {
border:1px solid black;
display:block;
color:#976693;
text-align:right;
padding:6px;
padding-right:10px;
margin-bottom:20px;
background:/*#976693*/#EEE5ED;
}


Code html (et code Spip)

<div class="navigationa">
<B_sous_rub>
<BOUCLE_sous_rub(RUBRIQUES){id_parent} {par num titre, titre}>
<a href="#URL_RUBRIQUE" [ class="(#EXPOSE)"]>[(#TITRE|supprimer_numero|couper{30})]</a>
</BOUCLE_sous_rub>
</B_sous_rub>
<B_art>
<BOUCLE_art(ARTICLES){id_rubrique} {par num titre, titre}>
<a href="#URL_ARTICLE" [ class="(#EXPOSE)"]>[(#TITRE|supprimer_numero|couper{30})]</a>
</BOUCLE_art>
</B_art>
<div class="descriptif">
[(#FORMULAIRE_RECHERCHE)]
</div>
</div>


Comme vous le voyez, dans mes css, j'ai du mettre un display:inline sur le menu "navigationa" afin de contourner un bug IE6 mais apparemment le problème ne vient pas de la puisqu'en supprimant ce display: inline et en le remplaçant par un display:block, ca ne change rien.

L'un de vous peut il m'aider ?
Un grand merci
O.
Hello Heyoan,

En fait, je ne souhaite pas particulièrement créer une liste. Et je ne suis pas sur que mon code soit mauvais comme il est là. Il ne fonctionne pas sous IE6 mais ce navigateur n'est pas franchement une référence.

Donc, si je pouvais continuer à travailler avec un div conteneur et des a, ca arrangerait. C possible ca non ?
Onyrodine a écrit :
Il ne fonctionne pas sous IE6 mais ce navigateur n'est pas franchement une référence.


Vu le nombre d'utilisateurs qui utilisent encore IE6 (contre ou de leur gré), ça reste une "référence".

D'après les stats de Xiti Monitor pour Nobembre 2008, il y a encore 23% d'utilisateurs de IE6, c'est loin d'être négligeable quand même.
Yasashii a écrit :

Vu le nombre d'utilisateurs qui utilisent encore IE6 (contre ou de leur gré), ça reste une "référence".
Je pense qu'Onyrodine voulait parler de la difficulté qu'a IE6 à offrir un rendu correct même quand on fait tout bien comme il faut (bugs divers et autres manques d'implémentation). Smiley cligne

@Onyrodine > pour préciser ma réponse précédente : un élément UL (ou OL) n'accepte comme élément descendant direct qu'un élément LI or tu as dans ton code <ul id="nav"><ul>

Chaque navigateur face à un code incorrect tente de corriger le tir selon ses propres règles (fermeture de l'élément précédent, ajout d'un élément, etc...) et du coup le rendu est forcément hasardeux.

La règle de base est donc de toujours valider son code avant de chercher ailleurs une solution à un problème.. Smiley smile
Ok, je comprend la logique. Malheureusement, ce bug concerne le menu horizontal et je ne l'ai pas crée moi même. J'y ai ajouté pas mal de modifs ea faisant bien gaffe à pas tout niquer mais la hiérarchie des ul étaient tel quel et je crois que ca va être chaud-patate pour le corriger.

Plutot que de tout modifier, je vais peut être essayer de supprimer le menu HORIZONTAL dans un premier temps, et voir si le bug d'affichage du menu VERTICAL persiste. Qd dites vous ? Smiley smile
Onyrodine a écrit :

Qd dites vous ? Smiley smile
Qu'à priori il suffit de remplacer
<ul id="nav"><ul>
par
<ul id="nav">

et plus loin
</ul></ul>
par
</ul>
J'ai corrigé et ca passe Smiley smile Merci. Cela dit, comme ca a fait bouger ma mise en page, je reviednrai un brin en arrière pour faire ca proprement.

Maintenant que mon code est presque valide (il me reste un "Missing xmlns attribute for element html"), avez vous une idée concerant le menu de gauche ?
Pour le xmlns il suffit de remplacer 
<html dir="ltr" lang="fr">
par
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">

Pour ce qui est de ton problème dans IE6 je n'ai pas trouvé le pourquoi du comment mais certaines déclarations ne sont pas prises en compte.

En rajoutant directement dans le code juste avant </head> :
<style type="text/css">
.navigationa a {
display:block;
color:#976693;
text-align:right;
padding:6px;
padding-right:10px;
margin-bottom:20px;
background:/*#976693*/#EEE5ED;
}

.navigationa a.on {
font-weight:normal;
border-bottom:1px solid #EEE5ED;
background:none;
}
</style>
tout semble rentrer dans l'ordre. Smiley hmm
Ah, c'est étrange ca. J'avais déjà eu ce problème dans d'autres page. Peut être est ce lié au gestionnaire de contenu Spip. Tu sais d'ou ca peut venir ? En tout cas merci pour ton aide précieuse Heyoan.
Onyrodine a écrit :

Tu sais d'ou ca peut venir ?

Heyoan a écrit :

Smiley hmm

Onyrodine a écrit :

Peut être est ce lié au gestionnaire de contenu Spip.
Cela m'a effleuré l'esprit mais comme je ne l'ai jamais utilisé... Smiley hmm (<- le retour)
Sujet clos
Aller à