Texte du menu décalé vers le haut avec IE

Version imprimable

salut a tous

je suis en train de faire un template pour joomla et je bute sur un problème qui commence a m'agacer

le soucis viens du CSS, et n'étant pas expert je viens solliciter votre aide :

je vous met mon code CSS, c'est un theme que je modifie donc je met pas tout, mais je pense que le soucis viens de cette partie
Code:

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 #leftcolumn ul.menu { margin: 0px; padding:0px 0px 0px 0px; text-transform: uppercase; font-variant: small-caps; color: #FFFFFF; text-align: left; text-indent: 20px; line-height: 64px; font-size: 14px; } #leftcolumn ul.menu li { width: 180px; height:60px; background: #000000 url(../images/h3.jpg) top left no-repeat; margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px; } #leftcolumn ul.menu li:hover { width: 180px; height:60px; background: #000000 url(../images/h3_hover.jpg) top left no-repeat; margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px; text-decoration:none; }
et voila les resultats

pour firefox, c'est comme je veux :

http://img210.imageshack.us/img210/936/firefoxmp8.jpg

pour IE le texte est décallé vers le haut

http://img209.imageshack.us/img209/6426/ieso1.jpg

merci d'avance, et bonne année à tous

03/01/2009, 01h07
GihefBey

Bonjour,

Essaye en déplaçant le line-height de ul.menu { dans ul.menu li {

Tu fais le :hover sur les li.
Il n'y a pas de liens dans ton menu ?

Donne aussi le code HTML du menu.

++
Pour rester dans la logique CSS, pense et utilise plutôt

Code:

background : ... no-repeat left top;

left d'abord.

-

j'ai deplacé le line-height c'est toujours pareil

en fait c'est un template pour joomla et je ne sais pas ou trouver le html qui va pour ce module (noobitude quand tu nous tient)

je fais le rollover sur le li car c'est l'image qui change quand on passe le curseur, le texte reste identique. je sais pas si c'est le mieux mais ca fonctionne en tout cas.

voila un appercu du rollover sur biographie :
http://img155.imageshack.us/img155/3471/rollovertm8.jpg

je peux faire un code source, je sais pas si c'est vraiment ce que tu souhaites
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="module_menu"> <div> <div> <div> <ul class="menu"> <li id="current" class="active item1"><a href="http://127.0.0.1/"><span>Home</span></a></li> <li class="item2"><a href="/index.php?option=com_content&view=article&id=1&Itemid=2"><span>Biographie</span></a></li> <li class="item3"><a href="http://*******.com" target="_blank"><span>Official Website</span></a></li> </ul> </div> </div> </div> </div>

03/01/2009, 18h26
12monkeys

Bonsoir

Citation:

Envoyé par psycoma

je ne sais pas ou trouver le html qui va pour ce module (noobitude quand tu nous tient)

Tu affiches simplement ta page dans un navigateur, tu affiches le code source (clic droit et Code source de la page ou afficher la source...), tu trouves la partie concernée, et un copié collé ici et hop c'est fait...

Le code que tu présente et le bon code ? Je doute... et puis pourquoi alors autant de divs ?

La version de Joomla dont je dispose utilise systématiquement des tableaux (ce que ne fait pas joomla.org).
Le menu est constitué de <td>.
Si tu les utilises, un simple vertical-align devrait suffire.

Sinon, essaye
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 #leftcolumn ul.menu li { width: 180px; height: 60px; background: #000 url(../images/h3.jpg) no-repeat left top; margin: 0; padding: 0; } #leftcolumn ul.menu li a { display: block; width: 180px; height: 60px; line-height: 60px; } #leftcolumn ul.menu li a:hover { background: #000 url(../images/h3_hover.jpg) no-repeat left top; text-decoration: none; }
Mais, est-ce que IE n'a pas un soucis avec line-height ?

-

04/01/2009, 03h50
psycoma

Citation:

Envoyé par 12monkeys

Bonsoir

Tu affiches simplement ta page dans un navigateur, tu affiches le code source (clic droit et Code source de la page ou afficher la source...), tu trouves la partie concernée, et un copié collé ici et hop c'est fait...

Le code que tu présente et le bon code ? Je doute... et puis pourquoi alors autant de divs ?

le code est le bon

et pour les <div> désolé mais ce n'est pas moi qui aie développé ce module pour joomla ^^

j'ai essayé le code c'est toujours pareil. et ca bug meme sous Firefox maintenant. ca vient peut etre d'ailleurs ... mais y'a tellement de trucs dans le CSS je m'en sors pas =_='
04/01/2009, 11h47
GihefBey

Mets tout ça en ligne.
Donne-nous l'adresse.
Au cas où...

-
04/01/2009, 12h33
12monkeys

Ok

Alors comment faire pour déboguer : tu te crée 1 fichier .html sur ton ordi (sans passer par joomla je veux dire) tu y colle le code html d'une des pages ainsi que le code css (dans le même fichier ou dans un autre, peu importe).

Tu simplifie ton code html (genre la structure et le menu), et tu mets les différentes parties du css entre commentaire au fur et à mesure pour voir ce qui pose problème, ça te permet de délimiter le code problématique. D'ailleurs tu peut aussi montrer ce code ici, ce sera plus simple pour nous de voir...

Sinon fais comme le demande GihefBey, ça peut aussi aider.

D'ailleurs je pense qu'il a mis le doigt sur le problème : le line-height. Essaye voir de mettre un css spécifique à IE où tu remplacera le line-height par des margin (attention il faudra éventuellement aussi revoir le height, à voir)...

Dernière idée : transfère le line-height sur le li au lieu de le mettre sur le a (dans l'exemple de GihefBey).
04/01/2009, 15h18
psycoma

Citation:

Envoyé par 12monkeys

Ok

Alors comment faire pour déboguer : tu te crée 1 fichier .html sur ton ordi (sans passer par joomla je veux dire) tu y colle le code html d'une des pages ainsi que le code css (dans le même fichier ou dans un autre, peu importe).

je travaille comme ca avec dreamwaver, j'utilise le code source de l'index de joomla ca evite d'avoir les modules incomplets
j'ai deja essayé de faire le CSS pas a pas, mais comme dit plus haut y'a plus de 30 trucs qui concernent mon menu (de pres ou de loin)

je vais refaire le tout pas a pas en suivant vos conseils
merci

je pire c'est que j'avais reussi et j'ai tout perdu dans un format =_='

bon ben j'ai effacé et refais et ca fonctionne \o/

voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#leftcolumn ul.menu {
	margin: 0 auto;
	padding: 0; 
	list-style: none;
	width: 164px;
}
 
#leftcolumn ul.menu li {
	margin: 0;
	padding-top: 25px;
	padding-left:20px;
	background:url(../images/h3.jpg) left top no-repeat;
	height:60px;
	width:180px;
	font-variant:small-caps;
	text-transform:uppercase;
}
#leftcolumn ul.menu li:hover {
background:url(../images/h3_hover.jpg) left top no-repeat;
}

merci a tous :yaisse2: