28173 sujets

CSS et mise en forme, CSS3

Menu css avec IE: un petit problème lors du hover [résolu]

Bonjour à vous,
Tout d'abord, félicitations pour le forum et bravo à tous qui aident ceux qui ont des questions...

Je suis entrain de créer un site, cdc2.netrock.ca et j'ai un petit bog dont j'ignore la solution avec le menu horizontal avec Internet explorer...
Lorsqu'on glisse notre souris sur un onglet pour y défiler le contenu, tout va bien, mais c'est lorsqu'on navigue dans le contenu que ca se gate un peu: Il y a un genre de "tilt" lors du hover...; comme si le menu s'actualiserait (Voir le site pour comprendre, désolé de l'explication peu claire)
Ex: Collège > Page 1
Page 2
Page 3
Le bug est lors du hover sur les pages disponibles dans la catégorie

Le menu est fait en listes:
Feuille de style pour ie affichée ci-dessous, donc ne pas s'étonner de voir des choses bizard!:

	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		background: #F6F6F6 url(hmrightbg.gif) repeat-x;
		line-height: 23px;
		float: left;
		width: 100%;
		font-weight: bold;
	}
	
	#nav a {
		display: block;
		width: 9.5em;
		color: #808080;
		background: inherit;
		text-decoration: none;
	
	}
	#nav a:hover {
		color: #FFFFFF;
		background: #3A6EA5;
	}
	
	#nav li { /* all list items */
		float: left;
		width: 9.5em; /* width needed or else Opera goes nuts */
		text-align:center;

	}
	
	#nav li ul { /* second-level lists */
		position: absolute;
		background: #F3F3F3;
		width: 9.5em;
		left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
		text-align:left;
		margin:0;
	}
	
	#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
		margin-left:-4.7em;	
	}

Feuille de style complete pour ie: http://cdc2.netrock.ca/images/style-ie.css
Feuille de style normale: style.css


Des suggestions pour m'aider???

Merci beaucoup!

P.S.: Le site n'est pas valide w3c à cause du Flash et certains autres trucs mais somme toute il fonctionne #1 sur les navigateurs normaux tels mozilla et meme opera!
Modifié par karlavecunk (16 Apr 2006 - 18:41)
IE supporte les :hover uniquement sur les liens et rien d'autre par contre il existe un hack pour fonctionne très bien. Si je me rappel bien le nom le plus utiliser est "csshover.htc"

Il faut ensuite l'integrer dans ta feuille de style de cette façon

	body {
		behavior:url("csshover.htc");
	}


Par contre je n'ai pas de lien particulier et le nom du fichier, même si il est assez répendu ne te garantie pas que deux fichier avec le même nom sur internet ai un code strictement identique, mais au moins tu sais où chercher Smiley langue
Salut, ce code devrait rendre ta page valide au niveau du Flash,


<object type="application/x-shockwave-flash" data="nuages.swf" width="343" height="82" >
<param name="movie" value="nuages.swf" />
<param name="align" value="right" />
<param name="quality" value="high" />
<p>Le plugin Flash de Macromedia est nécessaire.</p>
</object>

aussi,
- un 'li' non fermé après le menu 'Contact'
- un 'a href' en majuscule
- le target n'est pas valide en XHTML Strict .
- et 2-3 autres petites choses (pas de border aux images...)

ensuite pour ton bug, je me demande si le left:-999em; n'est pas a mettre en cause. le bug subsite t'il avec display none ?


percherie : Ce qui est étonant dans ce code c'est que ca marche 'presque ' Smiley smile et sans hack Smiley eek
Modifié par cedricici (16 Apr 2006 - 09:59)
Merci bien pour vos conseils, en particulier cedricici;
Hélas cela n'a pas réglé mon bug mais pour le reste, ce fut tres utile!

Le left -999em permet aux "sous-menus" de ne pas être vus tant qu'on ne passe pas notre souris sur le texte pour afficher le sous-menu
Néanmoins, j'ai tenté certaines choses en modifiant ou supprimant cette variable mais malheureusement ça ne marche pas plus... Ca ne semble pas être la source du probleme... snif snif

Encore merci!
Sujet clos
Aller à