28173 sujets

CSS et mise en forme, CSS3

Menu ok... sauf sur ie :s

Bonjour à tous, je suis nouveau sur le forum...
J'ai réalisé un menu (en me basant sur divers sites) qui, oh joie fonctionne parfaitement... jusqu'à ce que je le test sur IE (6). Et là, horreur.
Après avoir chipotté pendant quelques heures sans succès, je suis finalement résolu à venir crier à l'aide ici même car, sincèrement, je ne sais vraiment plus quoi faire...
Si quelqu'un à une solution...

Le script se trouve sur http://divers.titib.com/menu/ mais je le met également ici: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Menu</title>
<style type="text/css">
body {
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	font-size: 0.8em;
}

.widget {
	margin:0 87px;
	padding:0;
	height:32px;
	float:right;
	background-color:#FFFFCC;
	background-image:url(images/widget.jpg);
	background-repeat:repeat-x;
	overflow:hidden;
}
.widget ul 
{
	margin: 0;
	padding:0; 
}
.widget li {
	background:none;
	display:inline;
	font-size:11px;
	float:left;
	text-transform:uppercase;
}
.widget li a {
	display: block;
	height:60px;
	padding-top:4px;
	text-decoration:none;
	color:#FFFFFF;
}
.widget li.widgetgauche a {
	background:url(images/widget2.jpg) top left transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetgauche a:hover {
	background:url(images/widget2b.jpg) top left transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetcentre a {
	background:url(images/widget2.jpg) -30px 0 transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetcentre a:hover {
	background:url(images/widget2b.jpg) -30px 0 transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetdroite a {
	background:url(images/widget2.jpg) top right transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetdroite a:hover {
	background:url(images/widget2b.jpg) top right transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}


</style>
</head>

<body>
	<ul class="widget">
		<li class="widgetgauche"><a href="#">Menu 1</a></li>
		<li class="widgetcentre"><a href="#">Menu 2</a></li>

		<li class="widgetcentre"><a href="#">Menu 3</a></li>
		<li class="widgetcentre"><a href="#">Menu 4</a></li>		
		<li class="widgetdroite"><a href="#">Menu 5</a></li>
	</ul>
	
	
</body>
</html>



Merci d'avance,

titib
Salut,

Essaye :
 ul 
{
	margin: 0;
	padding:0;
	list-style-type: none; 
}
.widget li {
	background:none;
	width: 100px;
	font-size:11px;
	float:left;
	text-transform:uppercase;
}
Ca fonctionne, mais j'avais déjà testé une solution similaire. Le problème est que tous les boutons ont la même largeur et que du coup, les textes longs sont renvoyés sur deux lignes, et les courts ont un grand vide (le texte ne sera évidemment pas Menu 1, 2,...).

Une une alternative?

edit: personne n'a d'idée :s
edit2: tjs rien? :s
Modifié par titib (17 Mar 2007 - 14:24)
Sujet clos
Aller à