5568 sujets

Sémantique web et HTML

Problème de css avec les div

Bonjour

Bon voilà mon image se décale sous firefox alors que pas sous internet explorer.
Je pense que le problème est du au causes des div .

Je ne sais pas comment résoudre.

Voici une image de Ie et surtout de ce que je veux comme rendu :
http://www.monsterup.com/upload/1213882270.jpg

Or firefox me met un truck comme ça :
http://www.monsterup.com/upload/1213882320.jpg

Voilà le code css :

body {
    background: black;
}

#menu
{
 width: 876px;
 height: 500px;
 background-image: url("pages_videos/img/fond.jpg")	;
 background-repeat: no-repeat; 
 margin-left: 50px;
 margin-top: 20px;   
}

#menu li
{
 list-style-type: none;
 list-style-position: inside;
 margin-left: 150px;
 margin-top: 40px;
}

#centre
{
 height: 100px;
 width: 100px;
 margin-left: 260px;
 margin-top: 250px;
}

.item
{
 position: absolute;
}

a {
 text-decoration: none;
 font-family: comic sans ms;
 color: orange;
 font-size: 20px;
 background-color: black;
}

a:visited {
 text-decoration: none;
 font-family: comic sans ms;
 font-size: 20px;
 color: orange;
}

a:hover {
 text-decoration: underline;
 font-family: comic sans ms;
 font-size: 25px;
}


et voici le code html :
<!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" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Sommaire </title>
		<link href="style.css" rel="stylesheet" type="text/css" media="screen, print, handheld" />
		<script type="text/javascript" src="menu.js"></script>

    </head>    
	<body onload="menu(7);">
		<div id="menu">
			<div id="centre" >
			</div>
			<ul onmouseover="stopanim();" onmouseout="replayanim();">
			    <li id="item7"><a href="pages_videos/7.html" target="_self">goooooooooooooogle </a></li>
				<li id="item3"><a href="pages_videos/3.html" target="_self">goooooooooooooogle</a></li>
				<li id="item4"><a href="pages_videos/4.html" target="_self">goooooooooooooogle</a></li>
				<li id="item1"><a href="pages_videos/1.html" target="_self">goooooooooooooogle</a></li>
				<li id="item2"><a href="pages_videos/2.html" target="_self">goooooooooooooogle</a></li>
				<li id="item5"><a href="pages_videos/5.html" target="_self">goooooooooooooogle</a></li>
				<li id="item6"><a href="pages_videos/6.html" target="_self">goooooooooooooogle</a></li>
			</ul>
		</div> <!-- menu-->
	<noscript>
			<h1 style="color: red; text-align: center;">
				Le javascript doit être activé pour optimiser la lecture des vidéos.<br />Merci.<br />
			</h1>
	</noscript>
		<br />
		<font style="color:white; font-size: 11px; font-decoration: bold;" >
			Pages optimisées pour un affichage en 1024px par 768px.
		</font>
	</body>
</html>


Comment faire pour obtenir le même rendu que internet explorer?

Le div centre sert à indiquer le centre du cercle.
En faite les <li> tournent.
Pour plus d'info : http://www.siteduzero.com/tuto-3-30287-1-creer-un-menu-circulaire.html
Merci pour votre aide
Sujet clos
Aller à