18073 sujets

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

IE/Firefox problème de mise en page

Bonjour a tous,
Voila mon problème je doit realiser la refonte d'un site en gardant la meme identité visuelle (le visu doit rester le même) mais le code doit etre valide w3c en xhtml 1.0.
Le problème et que je n'arrive pas a caler la "petite barre" qui relie la bannière au menu (qui se trouve a gauche). Sous ie la premiere image du menu est rognée en haut !.
Voici les screenshots du resultat:

ie:
upload/6527-ie.jpg

firefox:

upload/6527-ff.jpg

Voici mon code:

<!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>Duplication, pressage, gravage, gravure cd, cd audio et dvd, transfert video, authoring, telecinema</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head><body>

<div id="conteneur">
  <div id="header1">
	<object type="application/x-shockwave-flash" data="images/anim%20flash%2004.swf" width="900" 	height="68">
	<param name="movie" value="images/anim%20flash%2004.swf" />
	<img src="banner.gif" width="900" height="68" alt="banner" />
	</object>
  </div>		
	<div id="header2">
	  <a href="page-h01-pro-anti.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img35','','images/menu-h-roll_01.gif',1)"><img id="Img35" class="img" src="images/menu-h_01.gif" alt="Graver CD" width="198" height="28" /></a>
			<a href="page-h02-con_spe.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img36','','images/menu-h-roll_02.gif',1)"><img id="Img36" class="img" src="images/menu-h_02.gif" alt="Copie CD" width="183" height="28" /></a>
			<a href="page-h03-sacem.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img37','','images/menu-h-roll_03.gif',1)"><img id="Img37" class="img" src="images/menu-h_03.gif" alt="Gravure DVD" width="102" height="28" /></a>
			 <a href="page-h04-info_dvd.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img38','','images/menu-h-roll_04.gif',1)"><img id="Img38" class="img" src="images/menu-h_04.gif" alt="Pressage DVD" width="81" height="28" /></a>
			 <a href="page-h05-contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img39','','images/menu-h-roll_05.gif',1)"><img id="Img39" class="img" src="images/menu-h_05.gif" alt="Copy CD" width="89" height="28" /></a>
			 <a href="page-h06-condi_vente.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img40','','images/menu-h-roll_06.gif',1)"><img id="Img40" class="img" src="images/menu-h_06.gif" alt="Pressage CD" width="247" height="28" /></a>	
  </div>
	 		
	  <div id="menu">
	  		<ul>
			<li><img class="img" src="images/menu-g_01.gif" width="216" height="76" alt="CD"/></li>
			<li><img class="img" src="images/menu-g-roll_02.gif" width="216" height="19" alt="Gravure"/></li>
			<li><a href="page02-CD02.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img711','','images/menu-g-roll_03.gif',1)"><img class="img" src="images/menu-g_03.gif"  width="216" height="19" alt="DVD" id="Img711"/></a></li>
			<li><img class="img" src="images/menu-g_04.gif" width="216" height="30" alt="DVD"/></li>
			<li><a href="page03-dvd01.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img721','','images/menu-g-roll_05.gif',1)"><img class="img" src="images/menu-g_05.gif"  width="216" height="19" alt="copie cd" id="Img721"/></a></li>
			<li><a href="page04-dvd02.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img731','','images/menu-g-roll_06.gif',1)"><img class="img" src="images/menu-g_06.gif"  width="216" height="19" alt="Pressage DVD"id="Img731"/></a></li>
			<li><a href="page05-imp.htm"><img class="img" src="images/menu-g_07.gif" alt="Cd" width="216" height="34" /></a></li>
			<li><img class="img" src="images/menu-g_08.gif" width="216" height="34" alt="Pressage CD"/></li>
			<li><a href="page06-telecinema.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img741','','images/menu-g-roll_09.gif',1)"><img class="img" src="images/menu-g_09.gif"  width="216" height="19"  alt="CD/DVD" id="Img741"/></a></li>
			<li><a href="page07-transfertvideo.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img751','','images/menu-g-roll_10.gif',1)"><img class="img" src="images/menu-g_10.gif"  width="216" height="18" alt="cd" id="Img751"/></a></li>
			<li><a href="page08-encodage.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img761','','images/menu-g-roll_11.gif',1)"><img class="img" src="images/menu-g_11.gif"  width="216" height="18"  alt="dvd" id="Img761"/></a></li>
			<li><a href="page09-authoring.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Img771','','images/menu-g-roll_12.gif',1)"><img class="img" src="images/menu-g_12.gif" width="216" height="19" alt="Gravage" id="Img771"/></a></li>
			<li><img class="img" src="images/menu-g_13.gif" width="216" height="49" alt="pressage"/></li>
		</ul>	
	  </div>
	  <div id="header3"><img src="images/centre01-pp01b.gif" width="750" height="12" alt=""/></div>
	  
	  <div id="centre">
  	</div>

	  
	  <div id="pied"> <p>
      <a href="http://validator.w3.org/check?uri=referer"><img  
        src="images/w3.png"
        alt="Valid XHTML 1.0 Strict" height="31" width="88"/></a>
  </p></div>
</div>
	  

</body></html>


Voici le css:
/* CSS Document */
*{margin:0;padding:0;}
img{border:0px;}

/*Les id pour les div*/

body {font-family:Verdana, Arial, Helvetica, sans-serif;margin: 0;padding: 0;}
#header1 {position : absolute;width: 900px;height:68px;top:0px;left:68px;}
#header2{position : absolute;height:28px;width:900px;top:68px;left:68px;}
#header2 img{margin:0 -6px 0 0;padding:0;}
#header3{position:absolute;top:94px;left:213px;z-index:15;}


#conteneur {width: 100%;}
#centre{position:absolute;left: 300px;top:100px;z-index:5}
#centre span {font-size: 10pt;font-weight: bold;color: #000000;}
#centre td{font-family:Arial, Helvetica, sans-serif;font-size:10px;}
#menu {position:absolute;top:96px;left:41px;z-index:10;}
#menu img, #menu ul, #menu li,#menu a{list-style-type: none;}
#menu img{margin-top:-3px;}
#pied {position:absolute;left:300px;top:0;}


.menugauche {list-style-type: none;margin: 0;padding:0;}


/*Tableau et contenu*/
.tabbg{background-color:#EAEBEF;}
.tab{width:636px;text-align:center;}
.tab td{border:0;padding:0;margin:0}
.tdtit{height:40px;}
.tdtit2{height:30px;}
.ontab1{margin-left: 20px;top:94px;}
.ontab2{margin-left: 50px;top:94px;}

/*Les images */
#Img35{name:Img35}#Img36{name:Img36}#Img37{name:Img37}#Img38{name:Img38}#Img39{name:Img39}#Img40{name:Img40}
#Img711{name:Img711}#Img721{name:Img721 }#Img731{name:Img731}#Img741{name:Img741}#Img751{name:Img751}#Img761{name:Img761}#Img771{name:Img771}


</style>


J'espere de l'aide avec impatience!
Voila beh merci d'avance a tous les codeurs haut de gamme !

PS:Si quelqu'un peux me dire pourquoi IE rogne il ma premiere image du menu sur le haut!!

Smiley ohwell
Modifié par noukic (29 May 2006 - 15:03)
Sujet clos
Aller à