28220 sujets

CSS et mise en forme, CSS3

[résolu] Petit décalage entre IE et firefox

Comme dis dans le titre j'ai un probleme de mise en page avec internet explorer. (avec firefox ca marche nickel).

Vous pouvez jetez un coup d'oiel a mon problem avec ie ici

J'ai mis expres un fond rouge afin que ca soit plus visible.

mon code de la page principal:


<? session_start();?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<? include ('styles/menu.css');?>
<? include ('styles/style1.css');?>

<title>Accueil - Manganimes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</head>

<body>
<div class="page">
	<div class="top">
		<? include ('MENU/menu.php');?>
	</div>
	<div class="left">
	
	</div>
	<div class="center">
		<div class="cadrecentralehaut">
		
		</div>
		<div class="cadrecentralemilieu">
		
		</div>
		<div class="cadrecentralebas">
		
		</div>
	</div>
	<div class="right">
	
	</div>
</div>


</body>
</html>


le menu :


<div style="display: none">
<img src="http://manganime.0.free.fr/imagesite/accueilon.jpg" alt="...">
<img src="http://manganime.0.free.fr/imagesite/planningon.jpg" alt="...">
<img src="http://manganime.0.free.fr/imagesite/articleson.jpg" alt="...">
<img src="http://manganime.0.free.fr/imagesite/critiqueson.jpg" alt="...">
<img src="http://manganime.0.free.fr/imagesite/membreson.jpg" alt="...">
<img src="http://manganime.0.free.fr/imagesite/forumon.jpg" alt="...">
<img src="http://manganime.0.free.fr/imagesite/lienson.jpg" alt="...">
</div> 
<div id="banniere"></div>
<ul id="menu">
   <li id="accueil"><a href="#"></a></li>
   <li id="planning"><a href="#"></a></li>
   <li id="critiques"><a href="#"></a></li>
   <li id="articles"><a href="#"></a></li>
   <li id="membres"><a href="#"></a></li>
   <li id="forum"><a href="#"></a></li>
   <li id="liens"><a href="#"></a></li>
</ul>
<hr class="separe">


et les deux feuilles de style:


<style type="text/css" title=style1" media="all">
body
{
background-image: url(/imagesite/fond.jpg);
background-color:#FFFFFF;
color: #FFFFFF;
}
/*Classe page*/
.page{
width: 798px;
margin: 0 auto;
margin-top: 5px;
height:1000px;
padding: 0;
background-image: url(/imagesite/backpage.jpg);
border-style: solid;
border-color:#000000;
border-width: 1px;
}
/*haut de la page (banniere et menu) */
.top
{
	width: 100%;
	height: 172px;
	margin: 0;
	padding: 0;
	background-color:#FF0000;
	
}

/*collone gauche*/
.left
{
	margin:0;
	margin-top: 3px;
	width: 157px;
	height: 500px;
	background-color:#07071B;
	float:left;
}
/*page centrale*/
.center
{
	margin:0;
	margin-top: 3px;
	margin-left: 3px;
	width: 478px;
	height: 500px;
	background-color:#07071B;
	float:left;
}
.cadrecentralehaut
{
	background-image: url(http://manganime.0.free.fr/imagesite/Newstop.jpg);
	width: auto;
	height: 150px;
}
.cadrecentralemilieu
{
	background-image: url(http://manganime.0.free.fr/imagesite/newsmiddle.jpg);
	width: auto;
	height: 500px;
}
.cadrecentralebas
{
	background-image: url(http://manganime.0.free.fr/imagesite/newsbottom.jpg);
	width: auto;
	height: 78px;
}

/*page de droite*/
.right
{
	margin:0;
	margin-top: 3px;
	margin-left: 3px;
	width: 157px;
	height: 500px;
	background-color:#07071B;
	float:left;
}
hr.separe {
   clear: both; /* annule le float du contenu qui se trouve au dessus du hr */
   visibility: hidden;
   }
</style>




<style type="text/css">

#banniere {
   height: 147px;
   width: 798px;
   background: url(/imagesite/bannier.jpg) no-repeat;
}
li {
   float: left;
  
}
li a {
   height: 25px;
   width: 114px;
   display: block;
}
ul {   
   list-style-type: none;
   margin: 0;
   padding: 0;
}

li#accueil a {
   background: url(/imagesite/accueil.jpg) no-repeat;
}
li#accueil a:hover {
   background: url(/imagesite/accueilon.jpg) no-repeat; /* effet de rollover pour le bouton accueil à renouveler avec le reste des boutons */
}
li#planning a {
   background: url(/imagesite/planning.jpg) no-repeat;
}
li#planning a:hover {
   background: url(/imagesite/planningon.jpg) no-repeat; /* effet de rollover pour le bouton accueil à renouveler avec le reste des boutons */
}
li#critiques a {
   background: url(/imagesite/critiques.jpg) no-repeat;
}
li#critiques a:hover {
   background: url(/imagesite/critiqueson.jpg) no-repeat; /* effet de rollover pour le bouton accueil à renouveler avec le reste des boutons */
}
li#articles a {
   background: url(/imagesite/articles.jpg) no-repeat;
}
li#articles a:hover {
   background: url(/imagesite/articleson.jpg) no-repeat; /* effet de rollover pour le bouton accueil à renouveler avec le reste des boutons */
}
li#membres a {
   background: url(/imagesite/membres.jpg) no-repeat;
}
li#membres a:hover {
   background: url(/imagesite/membreson.jpg) no-repeat; /* effet de rollover pour le bouton accueil à renouveler avec le reste des boutons */
}
li#forum a {
   background: url(/imagesite/forum.jpg) no-repeat;
}
li#forum a:hover {
   background: url(/imagesite/forumon.jpg) no-repeat; /* effet de rollover pour le bouton accueil à renouveler avec le reste des boutons */
}

li#liens a {
   background: url(/imagesite/liens.jpg) no-repeat;
}
li#liens a:hover {
   background: url(/imagesite/lienson.jpg) no-repeat;
}

hr.separe {
   clear: both; /* annule le float du contenu qui se trouve au dessus du hr */
   visibility: hidden;
}
</style>


Je suis désolez de vous envoyer tout le code, mais je n'arrive vraiment pas a voir d'ou vient se décalge sur ie.
Modifié par death83 (14 Aug 2005 - 11:12)
Sujet clos
Aller à