18041 sujets

Questions générales et questions de débutants

Problème affichage menu ul sous internet explorer

Voila je vous explique d'abords le problème.

upload/16717-2008-05-17.jpg
Voila se que j'obtien avec Internet explorer.

html

<!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" xml:lang="fr" lang="fr">
<head>
<title>adrénaline's site v4 beta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<div id="top"></div>
<ul>
<li><a href="index.php?page=home">Accueil</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Liens</a></li>

<li><a href="#">Infos</a></li>
</ul>
...


css

body
{
	margin: 0;
	padding: 0;
	text-align: center ;
	font-family: "Trebuchet MS", Arial;
	font-size: 80%;
	background-image:url("background.png") ;
	background-repeat: repeat-x ;
}
div#top
{
	width: 900px ;
	height: 119px ;
	margin: 0 auto;
	background-image:url("top.jpg") ;
}
div#bottom
{
	text-align: center;
	font-size: 12px;
}
ul
{

	margin: 0  auto;
	list-style-type: none;
	display:table;
}

ul li a
{
	height: 21px;
	width: 110px;
	float: left;
	color: #000000;
	text-decoration: none;
	text-align: center;
	padding-top: 3px;
	background: url('bouton.png');
	
} 

ul li a:hover
{
	display: block;
	color: #0066FF;
	text-decoration: none;
	background: url('bouton_hov.png');
}

div#contenu
{
	width: 880px ;

	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: left ;
	padding: 10px ;
	background: #FFFFFF ;
	border: 1px solid #000000 ;
}

div#news
{
	padding: 5px;
	border: 1px solid #00A0E0 ;
}
div#news #titrenews
{
	color: 40A0FF;
}


J'ai fait des recherche et j'ai pas vraiment trouvé se qui clochait dans mon code.
Est-ce que c'est moi qui est fait des erreur ou c'est un problème de navigateur ?
Et surtout quelle est la solution ?

Merci d'avance
Modifié par ludo154 (29 Aug 2008 - 03:04)
Administrateur
Bonjour bonjour et bienvenue,

ludo154 a écrit :

ul
{

	margin: 0  auto;
	list-style-type: none;
[b]	display:table;[/b]
}


J'ai fait des recherche et j'ai pas vraiment trouvé se qui clochait dans mon code.
Est-ce que c'est moi qui est fait des erreur ou c'est un problème de navigateur ?
Et surtout quelle est la solution ?

Merci d'avance

PS:
Voila le lien du site si sa peu servir
adrenaline68.free.fr

En gras l'origine du problème (voir ta CSS et ton texte): IE6 et 7 ignorent superbement cette instruction, à peu près autant que Fx2 ignore display: inline-block; Smiley rolleyes

Pour la solution, ça commence par 
li { display: inline; }
et si ça coince encore, tu peux faire un tour dans les tutos d'Alsacreations voir les menus Smiley cligne
Modifié par Felipe (17 May 2008 - 23:50)
Voila j'ai repris mon code depuis le départ en suivant ce tuto.
Voila mon résultat.

Et sa marche Smiley biggrin merci Alsacréation et Felipe.

Mais ... j'ai encore une petite question ...

Comment centré le menu ?
J'ai chercher mais soit le code est totalement différemment du mien soit il y a pas de réponse car le post a été mal fait.
Le plus proche que j'ai trouvé c'est ceci, mais je n'est pas réussi.

Est-ce que j'aurais du remettre mon code modifié ?
Modifié par ludo154 (29 Aug 2008 - 03:04)
Sujet clos
Aller à