28234 sujets

CSS et mise en forme, CSS3

Probleme design sous IE

coucou tout le monde Smiley smile
je suis en train de développer mon site
et j'ai un petit soucis , je n'avais pas vue mais sous IE6 et 7
ben il y a un petit problème !

voila a quoi il ressemble sous firefox et cromé Smiley smile
http://www.imagup.com/data/1289252145.html

et voila le petit problème sous IE6

http://www.imagup.com/data/1289252210.html

quelqu'un saurai t'il d'ou sa vien?


body
                 {
                 width: 760px;
		 margin: auto;
		 margin-top: 10px;
		 margin-bottom: 20px;
		 background-image:url('1.jpg');
		 }
		 
                 #principal 
		 {
	         width: 760px;
                 }

		 

		 #banniere
		 {
                 background-image: url("nitroS.png");
                 height:100px;
		 width:760px;
                 margin-bottom:10px;
		 background-repeat: no-repeat;
                  }
		 
		 #presentation_projet
		 {
		 float:left;
		 height:500px;
		 width:180px;
		 border:1px solid black;
		 padding:10px;
		 }
                 #central {
	         float: left;
	         width: 355px;
                 }
		 
		 #chat
		 {
		 height:256px;
		 float:left
		 width:350px;
		 border:1px solid green;
		 margin-left:5px;
		 margin-right:5px;
		 text-align:center;
		 }
		 
		 #news
		 {
		 height:256px;
		 float:left;
		 width:343px;
		 border:1px solid red;
		 margin-left:5px;
		 margin-right:5px;
		 margin-top:5px;
		 text-align:center;
		 }
		 
		 #menu_droite
		 {
	         float:left;
	         width: 180px;
	         height:500px;
	         border:1px solid black;
	         padding:10px;
		 margin-bottom:7px;
		 }
		 
		 #pied_de_page
		 {
		 clear:both;
		 border:1px solid gold;
		 text-align:center;
		 font-size: 12px;
		 }
		 
                 .traveau
		 {
		 height:100%;
		 width:100%;
		 }
		 
		 #menu_droite .menu_haut
		 {
		 float:left;
		 height:247px;
		 width:175px;
		 border:1px solid gold;
		 }
		 
		 #menu_droite .menu_bas 
		 {
		 float:left;
		 height:250px;
		 width:175px;
                 border:1px solid darkblue;
		 margin-top:5px;
		 }



<!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" >
   <head>
       <title> Nitro Security Team </title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
   <div id="banniere">
   <!-- ici se placera la banniere -->
   </div>

   <div id="principal">
     <div id="presentation_projet">
       <!-- presentation du projet-->
       presentation projet
       </div>
     
     <div id="central">
     <div id="chat"><!-- integration d'un minichat en php-->
           <?php include("http://www.siteduzero.com/uploads/fr/ftp/mateo21/php/minichat/minichat.php"); ?>

     </div>
		<div id="news">
      <!-- ici : reservé au new -->
	  <h6> 07/11/2010 </h6>
	  <p class='07112010'>
	  -installation d'un firewall <br />
	  -installation des vhost <br />
	  </p>
	  <h6> 06/11/2010 </h6>
	  <p class='06112010'>
	  -installation du nom de domaine <br />
	  -installation d'apache2 <br />
	  </p>

	  
	  </div>
	</div>
</div>
     
     <div id="menu_droite">
       <div class="menu_haut">
         <h3> parti du haut</h3>
         <ul>
           <li><a href='page1'>forum </a></li>
           <li><a href='page2'>lien2</a><li>
             <li><a href='page3'>lien3</a></li>
         </ul>
         </div>
       <div class="menu_bas">
	   <?php print "Adresse IP : ".$_SERVER['REMOTE_ADDR'] ?> <br />
<?php

$heure_actuelle = date('H:i:s');
echo "Il est actuellement". $heure_actuelle;

?>
        </div>
	  </div>

<div id='pied_de_page'>
  <p> design by vodkline to Nitrosecurity Team </p>
</div>

Modifié par vodkline (09 Nov 2010 - 20:44)
Salut vodkline,

Je pense qu'il faut que tu réduises la largeur d'un de tes div. La largeur totale de presentation_projet + central + menu_droite doit être supérieure aux 760px de ton div principal. Sinon, tu peux aussi augmenter la largeur du div principal.
salut !

a écrit :
sa passe sous firefox et cromé donc logiquement sa passe sous IE .
yaurai t'il pas un debug?


Ou pas Smiley biggrin

Ton site passe nickel sous IE8.
C'est un probleme de padding ou de margin (sauf erreur de ma part),interprété differement sous IE6 (a l'interieur des width au lieu de l'extérieur)
Dans ton cas, tu passes le padding de la div droite à 5px au lieu de 10px et ça passe !
C'est un problème lié au cumul de la popriété "float" et "margin" sous IE6, le "double margin float bug".

Il faut déclarer "display:inline;" à tous tes éléments floatés pour IE6, grâce à une feuille de style spécifique au moyen des commentaires conditionnels.
a écrit :
C'est un problème lié au cumul de la popriété "float" et "margin" sous IE6, le "double margin float bug".

Il faut déclarer "display:inline;" à tous tes éléments floatés pour IE6, grâce à une feuille de style spécifique au moyen des commentaires conditionnels.


a quelle(s) partie du code , je doit rajouté 
display:inline
pour le design css?
Modifié par vodkline (11 Nov 2010 - 14:32)
Sujet clos
Aller à