Discussion :

[khany]

Bonjour !
Je pense qu'il y a beaucoup de questions sur la manière différente de FF ou IE de réagir ! J'en ai lu beaucoup dans ce forum mais, j'ai une petite spécificité de plus : j'aimerais bien un "overline" sur mes liens mais qui s'affiche quand je passe sur le lien. Sous FF : impeccable, sous IE8, le "overline" se met d'office partout directement .. zut !

J'ai aussi un souci d'alignement sous IE8 qui n'apparait pas sous FF.

Si quelqu'un peut tester sous IE7, IE6, ce serait gentil !

J'arrive preque au bon résultat grâce à mes recherches sur le NET et ici, mais, j'ai quand même besoin d'une aide de votre part, je suis encore assez débutante.

Alors, voici ce que la page test donne sous FF :

sous FF
Sous IE8 :

sous IE8


et le code CSS :

Code :

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

1
2
3
4
5
6
7
8
#nav {margin-top: 20px; background-color: #FDF6DC; height:100px; font-family: Comic Sans MS; font-weight: bold; font-size: medium; }
#nav, #nav ul {padding: 0; margin: 0; list-style: none;} 
#nav a {display: block; width: 10em;  text-decoration: none; color: #006600; padding: 2px} 
#nav li {float: left; width: 10em; text-decoration: none }
#nav li ul {position: absolute; width: 10em; left: -999em; background: #FCEBB8; text-decoration: none}
#nav li:hover {left: auto; color: #000099; text-decoration: overline}
#nav li:hover ul {left: auto; text-decoration: none}
#nav li:hover ul, #nav li.sfhover ul {left: auto; text-decoration: none}

Avec la couche javascript connue :

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
<script type="text/javascript">
sfHover = function() 
{     
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");     
		for (var i=0; i<sfEls.length; i++) 
		{         
			sfEls[i].onmouseover=function() 
			{             
				this.className+=" sfhover";         
			}
			sfEls[i].onmouseout=function() 
			{             
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		} 
}
	if (window.attachEvent) window.attachEvent("onload", sfHover); 
</script>

j'ai essayé avec des text-decoration: none partout pour avoir le même sous IE mais, nada !
Evidemment, c'est le rendu sous FF qui m'intéresse : alignement et "overline"

Oh, j'oubliais l'adresse de la page test :

ma page test

Merci de votre aide
Khany

[CCyrillus]

Bonjour,

il y a probablement un text-align:center; dans tes regle css qui agit sur le menu et decalle ainsi ta sous liste.

Je te propose de passer tes li de premier niveau en position:relative; et la liste de second niveau en left:0;

Code :

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

1
2
#nav li {float: left; width: 10em; text-decoration: none;position:relative; }
#nav li:hover ul {left: 0; text-decoration: none}

GC

[khany]

Le text-align="center" se trouve dans le code HTML de la table qui contient la liste.

Je vais tester ta solution mais si cela peut vous éclairer voici le HTML (tronqué sinon, trop long lol):

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
31
32
 
<table width="1190" style="background: #FDF6DC; border: thin ridge">
		<tr>
			<td width="100" style="text-align: center"><img width="85" height="84" src="images/logo_sims3.png"></td>
			<td width="990" style="text-align: center">	
		<ul id="nav">
		<li><a href="sims3.php">Accueil</a>
			<ul>
				<li><a href="sims2.php">Sims 2</a></li>
				<li><a href="sims3.php">Sims 3</a></li>
			</ul>
		</li>
		<!-- <li><img width="12" height="23" src="images/prisme-pt.png"></li> -->
		<li><a href="residentiel3.php">Immobilier</a>
			<ul>
				<li><a href="residentiel3.php">Résidentiel</a></li>
				<li><a href="communautaire3.php">Communautaire</a></li>
			</ul>
		</li>
 
.......
 
		<li><a href="textures.php">Divers</a>
			<ul>
				<li><a href="textures.php">Textures</a></li>					
				<li><a href="recolo.php">Recolorations</a></li>						 
			</ul>
		</li>
		</td>
			<td width="100" style="text-align: center"><img width="85" height="84" src="images/logo_sims3.png"></td>
		</tr>
	</table>

EDIT : impeccable pour l'alignement sous FF et IE8
Par contre, j'ai toujours les liens en "overline" tout le temps partout sous IE8 et là, je sèche !

[sebhm]

je te conseille de gérer le css du lien (et non pas sur le li)
en faisant un truc du genre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#nav li a:link {
	text-decoration : none;
} 
#nav li a:visited {
	text-decoration : none;
}
#nav li a:hover {
	text-decoration : overline;
}
#nav li a:active {
	text-decoration : none;
}

[khany]

Un grand merci, grâce à vous, les derniers détails sont résolus !

Merci