28221 sujets

CSS et mise en forme, CSS3

[Abandon] Problème menu vertical sous ie6 (CSS + mini JS)

Bonjour à tous,

Sur base d'info de Jep, Elmoustico et d'autres (les meilleurs Smiley cligne ), j'ai commencé un petit menu vertical.
Après un tour sur "Recherche", je n'ai pas trouvé réponse au problème décrit ci-après Smiley decu
J'ai un petit problème qui n'apparait que sous IE6 (ok IE5 mais je n'ai pas la possibilité de tester sous un autre navigateur au boulot).

Sous IE6 (XP SP2) au survol, le sous menu s'affiche bien (correction margin-top/* */:/**/-21px; pour IE6) mais les autres options du menu principal descendent d'un "cran" (malgré une bidouille height/* */:/**/0px; pour LI)

Si quelqu'un pouvait m'expliquer d'où ça vient et comment faire pour rendre cela identique dans ces deux navigateurs de .... (restons poli Smiley cligne ).

D'avance merci à tous !

Voici le code (j'ai mis tout ensemble pour l'instant) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<title>Test Page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
		html, body {
		background:#6c6c6c url("fond.jpg") no-repeat top left;
		color:#ffc;
		font-size:12px;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		height:100%;
		margin:0;
		overflow:hidden;
		padding:0;
		}
		img {
		border:none;
		}
		ul {
		border-top:1px solid #f90;
		border-right:2px solid #f90;
		border-bottom:2px solid #f90;
		border-left:1px solid #f90;
		height/* */:/**/0px;
		list-style:disc;
		margin:0;
		padding:0;
		}
		li {
		color:#f00;
		height/* */:/**/0px;
		margin:5px 0 5px 5px;
		margin/* */:/**/5px 0 5px 25px;
		padding:0;
		}
		#menu {
		background:#5a5a5a;
		left:10px;
		padding:20px 0 15px 0;
		position:absolute;
		top:120px;
		width:130px;
		}
		#menu a {
		background:#5a5a5a;
		border-top:1px solid #ffc;
		border-right:2px solid #484848;
		border-bottom:2px solid #484848;
		border-left:1px solid #ffc;
		color:#ffc;
		display/* */:/**/block;
		padding:2px 5px;
		text-decoration:none;
		width:90%;
		width/* */:/**/80%;
		}
		#menu a:hover, #menu a:focus {
		background:#484848;
		border-top:2px solid #484848;
		border-right:1px solid #ffc;
		border-bottom:1px solid #ffc;
		border-left:2px solid #484848;
		color:#ffb;
		text-decoration:none;
		}
		#menu li ul {
		background:#5a5a5a;
		display:none;
		left:120px;
		margin-top:-1px;
		margin-top/* */:/**/-21px;
		position:absolute;
		width:160px;
		}
		#menu li:hover>ul {
		display:block;
		}
		#titre {
		height:130px;
		margin:10px 100px 10px 0;
		width:100%;
		}
		#contenu {
		background:#6c6c6c;
		border-top:1px solid #f90;
		border-right:2px solid #f90;
		border-bottom:2px solid #f90;
		border-left:1px solid #f90;
		margin-left:150px;
		margin-top:150px;
		height:450px;
		overflow:auto;
		width:670px;
		}
	</style>
	<script type="text/javascript">
		function hover(obj){
			if(document.all){
				UL = obj.getElementsByTagName('ul');
				if(UL.length > 0){
					sousMenu = UL[0].style;
					if(sousMenu .display == 'none' || sousMenu.display == ''){
						sousMenu.display = 'block';
					}else{
						sousMenu.display = 'none';
					}
				}
			}
		}
		
		function setHover(){
			LI = document.getElementById('menu').getElementsByTagName('li');
			nLI = LI.length;
			for(i=0; i < nLI; i++){
				LI[i].onmouseover = function(){hover(this);}
				LI[i].onmouseout = function(){hover(this);}
			}
		}
	</script>
</head>

<body onload="setHover()">
<div id="titre">
	<h1>Titre test :</h1>
</div>
<ul id="menu">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">La troupe&nbsp;&nbsp;<img src="flechejaune.gif" width="4" height="7" alt="" /></a>
		<ul>
			<li><a href="#">Note d'intention</a></li>
			<li><a href="#">Historique</a></li>
			<li><a href="#">Trombinoscope</a></li>
		</ul>
	</li>
	<li><a href="#">Spectacles&nbsp;&nbsp;<img src="flechejaune.gif" width="4" height="7" alt="" /></a>
		<ul>
			<li><a href="#">C'est à voir</a></li>
			<li><a href="#">Païkan</a></li>
			<li><a href="#">Sapés Sapins</a></li>
			<li><a href="#">Valises</a></li><br />
			&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;<br />
			<li><a href="#"><b>Calendrier</b></a></li>
			<li><a href="#">Tarifs</a></li>
			<li><a href="#">Presse</a></li>
		</ul>
	</li>
	<li><a href="#">Stages</a></li>
	<li><a href="#">Contacts&nbsp;&nbsp;<img src="flechejaune.gif" width="4" height="7" alt="" /></a>
		<ul>
			<li><a href="#">Cie du Nez Rouge</a></li>
			<li><a href="#">WebMaster</a></li>
		</ul>
	</li>
	<li><a href="#">Info site&nbsp;&nbsp;<img src="flechejaune.gif" width="4" height="7" alt="" /></a>
		<ul>
			<li><a href="#">Access keys</a></li>
			<li><a href="#">Info site</a></li>
		</ul>
	</li>
	<li><a href="#">Liens&nbsp;&nbsp;<img src="flechejaune.gif" width="4" height="7" alt="" /></a>
		<ul>
			<li><a href="#">Liens amis</a></li>
			<li><a href="#">Références</a></li>
		</ul>
	</li>
</ul>

<div id="contenu">
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempus ligula eu velit. Aliquam 
	varius wisi eget est. Etiam enim purus, convallis id, porta nec, tempor at, leo. Aliquam mollis 
	felis in nulla. Praesent euismod, lorem ac feugiat mollis, nunc purus egestas erat, sed suscipit 
	sem leo sed enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In consequat mauris id 
	arcu. Nam at erat. Morbi vulputate adipiscing ligula. Quisque elit velit, sollicitudin ut, eleifend 
	ultrices, interdum sed, lectus. Donec augue.
	</p>
	<p>
	At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum 
	deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non 
	provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum 
	fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta 
	nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, 
	omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis 
	debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non 
	recusandae. Itaque earum rerum hic tenetur.
	</p>
	<p>
	Nulla facilisi. Mauris eros magna, pulvinar vitae, semper at, auctor vitae, augue. Nam consectetuer 
	dolor ac quam. Mauris massa urna, pellentesque ullamcorper, consequat sed, porta et, ligula. 
	Pellentesque dapibus. Integer ut magna non neque eleifend egestas. 
	</p>
	<p>
	Praesent euismod, lorem ac feugiat mollis, nunc purus egestas erat, sed suscipit 
	sem leo sed enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In consequat mauris id 
	arcu. Nam at erat. Morbi vulputate adipiscing ligula. Quisque elit velit, sollicitudin ut, eleifend 
	ultrices, interdum sed, lectus. Donec augue.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempus ligula eu velit. Aliquam 
	varius wisi eget est. Etiam enim purus, convallis id, porta nec, tempor at, leo. Aliquam mollis 
	felis in nulla. Praesent euismod, lorem ac feugiat mollis, nunc purus egestas erat, sed suscipit 
	sem leo sed enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In consequat mauris id 
	arcu. Nam at erat. Morbi vulputate adipiscing ligula. Quisque elit velit, sollicitudin ut, eleifend 
	ultrices, interdum sed, lectus. Donec augue.
	</p>
	<p>
	At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum 
	deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non 
	provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum 
	fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta 
	nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, 
	omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis 
	debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non 
	recusandae. Itaque earum rerum hic tenetur.
	</p>
	<p>
	Nulla facilisi. Mauris eros magna, pulvinar vitae, semper at, auctor vitae, augue. Nam consectetuer 
	dolor ac quam. Mauris massa urna, pellentesque ullamcorper, consequat sed, porta et, ligula. 
	Pellentesque dapibus. Integer ut magna non neque eleifend egestas. 
	</p>
	<p>
	Praesent euismod, lorem ac feugiat mollis, nunc purus egestas erat, sed suscipit 
	sem leo sed enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In consequat mauris id 
	arcu. Nam at erat. Morbi vulputate adipiscing ligula. Quisque elit velit, sollicitudin ut, eleifend 
	ultrices, interdum sed, lectus. Donec augue.
	</p>
</div>

</body>
</html>
[/i][/i]

Nobody knows the trouble I’ve seen ?
Modifié le 16 Dec 2004 - 12:48
Disons que vu la tartine de code que tu nous offre, c'est pas évident. Un petite exemple en ligne serait grandement apprécié, crois-je.

Merci pour nous Smiley lol

@+ HoPHP
Désolé mais je ne peux rien mettre en ligne depuis mon boulot Smiley ohwell
J'ai donc proposé le "tout" espérant un copier/coller pour un test en local Smiley cligne
Modifié le 15 Dec 2004 - 11:52
J'ai trouvé une (mauvaise ?) solution Smiley biggol
1) ajout de la balise :
<?xml version="1.0" encoding="iso-8859-1"?>

Ce qui fait basculer IE6 comme IE5 pour le problème des boîtes Microstrophe Smiley ohwell
2) suppression de tous les hacks concernant le problème des boîtes.
3) j'ai gardé un hack pour le problème d'alignement à gauche de LI différent sous IE5 et IE6:
li {
color:#f00;
margin:5px 0 5px 5px;
margin/* */:/**/5px 0 5px 25px;
padding:0;
}


Reste maintenant à vérifier (et sûrement corriger) ce que ça donne pour Firefox/Netscape.
Encore du boulot pour ce soir Smiley langue .

Je ne clôture pas encore avec un petit [Résolu] : j'attend de pouvoir tester sous Firefox ce soir.

@+
Bon ben comme prévu, ça foire pour le reste.

Je revois ma copie, je clôture par abandon et je cherche à partir de zéro. Smiley lol

A bientôt.
Sujet clos
Aller à