28173 sujets

CSS et mise en forme, CSS3

Menu et sous-menu css avec remplacement des puces

Bonjour à tous.

Voila j'ai un problème avec mon menu et sous-menu css sous IE (encore lui…). Sur Firefox et Safari tout fonctionne, mais IE décale à la fois mon menu vers la droite (pourtant il n'y a pas de marge gauche) et mes carrés (à la place des puces) se collent au texte et ne se placent pas sur la ligne de base des textes (au pied du texte) mais en vrac au dessus.

Si quelqu'un a une idée ? Merci de votre aide.
le lien pour se faire une idée :
http://gwendall.mavic.free.fr/menu_css/test_menu.html

La source html :

	<body>
			<div id="boitemenu1">
			<ul id="menu">
				<li><a href="#">Histoire / Entreprise</a></li>
				<li>Nos Produits</li>
				<ul id="sousmenu">
					<li><a href="#">Cidres</a></li>

					<li><a href="#">Pommeau</a></li>
					<li><a href="#">Eaux de vie</a></li>
					<li><a href="#">Autres sp&eacute;cialit&eacute;s</a></li>
				</ul>
				<li><a href="#">BOUTIQUE EN LIGNE</a></li>
				<li><a href="#">Visites virtuelles</a></li>

				<li><a href="#">Contact</a></li>
				<li><a href="#">Plan d'acc&egrave;s</a></li>
				<li class="filetbas"><a href="#">Livre d'or</a></li>
			</ul>
			</div>
	</body>


le css :
	body {
		margin:0;
		padding:0;
		text-align:left;
		font:80% Verdana, Trebuchet MS, sans-serif;
		background-color: #410908;
		color:white;
		}
	
	#boitemenu1 {
	width: 200px;
	margin: 0;
	padding: 0;
		}
	
	ul#menu {
		margin-top: 5px;
		padding: 0px;
		font-size: 11px;
		font-family:Arial;
		text-indent: 10px;
		list-style-image: url(carre.gif);
		list-style-position: inside;
		}
	#menu li {
		margin-top: 5px;
		margin-bottom: 5px;
		padding-top: 5px;
		border-top: #DA0604 dotted 1px;
		}
	#menu li.filetbas {
		margin-top: 5px;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-bottom: 5px;

		border-top: #DA0604 dotted 1px;
		border-bottom: #DA0604 dotted 1px;
		}
	
	ul#sousmenu {
		margin-left: 15px;
		padding: 0px;
		font-size: 11px;
		font-family:Arial;
		list-style-image: url(rond.gif);
		list-style-position: inside;
		}
	#sousmenu li {
		margin: 0;
		padding: 0;
		border-top:0px;
		}




	#menu a {
		color: white;
		padding:0;
		text-decoration:none;
		letter-spacing: 1px;
		 }
	#menu a:hover {
		color: #ffffff;
		text-decoration: underline;
		}


Merci.

Gwendall
C'est moi où il y a un item de la FAQ (connue sur le bout de doigts par tous les utilisateurs de ce forum, n'est-ce pas ?) qui dit très précisément : Comment corriger un espace à gauche d'une liste différent entre IE, Firefox et Opera ?
Est-ce que cela peut être utile ?

Pour le mauvais positionnement des marqueurs, il y a bien ce bug-ci mais ça n'a pas l'air de correspondre tout à fait.
Si ça ne change rien, il faudra peut-être passer par des images de fond pour dessiner les puces.
Sujet clos
Aller à