Problème avec IE

Question

Anthony_

28 May 2013 à 14:47

Bonjour tout le monde,
Je suis débutant en développement web et la je suis bien perdu Smiley decu

Après une modification de mon css la veille, je constate aujoud'hui que mon template ne tourne plus correctement sous IE alors que sur tous les autres navigateurs rien de changé.
IE ne reconnait plus "border-radius" et les marges ont changées (le menu navigation à bouger de 20px par rapport aux autres navigateurs et les marges entre mes div ont disparues sous IE)

Je n'arrive pas à mettre d'image donc je vous met le code.

mon Template:


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8"/>
    <!--<link href="includes/reset.css" rel="stylesheet" type="text/css" media="screen" />-->
    <link href="includes/style.css" rel="stylesheet" type="text/css" media="screen" />
    <title></title>
  </head>
  <body>
    <!-- CONTAINER DU SITE -->
    <div id="container">
      <!-- L'ENTETE -->
      <div id="logo"></div>
      <div id="nav-h">
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Présentation</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Espace client</a></li>
      </ul>
      </div><!--end navigation horizontal-->
     
     <div id="menuIcon">
     <table><tr><th colspan="3">Le conseiller financier dont vous avez besoin !</th></tr>
     <tr><td><img src="img/logoCompta.png" /></td><td><img src="img/logoFiscal.png" /></td><td><img src="img/conseilLogo.png" /></td></tr>
     </table>
     </div>
     
     <div></div>
     <div id="content"><!-- Contenu page -->
     <div id="blocContenu1">
     <h2><span class="firstWord">Bienvenue</span> sur le site MRD Finance.</h2>
     <p><strong>Dans le climat économique actuel et afin de faire face aux nombreux changements de législation</strong>, il est important de se faire assister et conseiller par un expert-comptable compétent et fiable.<br /><br />
     <strong>MRD Finance réunit toute une série de services et répond aux besoins des personnes et des entreprises sur le plan comptable et fiscal</strong>, et ce dans le respect des dispositions légales.<br /><br />
     <strong>MRD Finance vous accompagne dans la création de votre entreprise et assure un suivi permanent durant toute son existence.</strong>
     <br /><br /><span class="firstWord"><strong class="contact">Contactez-nous afin de fixer un rendez-vous !</strong></span></p>
     </div>
     <div id="blocContenu2">
     <h2><span class="firstWord">News</span></h2>
     <p><strong>01/05/2013&nbsp  </strong><img src="img/sepaNews.png" /> &nbspOuverture du bureau à Denée.</p>
     </div>
     
     </div><!--end container-->
     <!-- Footer -->
    
     <div id="footer">
      <table class="tablePrincipal" ><tr><td colspan="5"><br /></td></tr><tr>
      <td rowspan="5" style="text-align: left; padding-right: 35px;"><img src="img/logoFooter2.png" title="logo" /></td>
      <td rowspan="5" style="color: white; padding-right: 35px; font-size: 0.8em;"><strong>David Mercier</strong><br />
      Expert-comptable<br />
      Conseil fiscal<br /><br /> 
      Rue de Maharenne 36<br />
      BE 5537 Denée<br /><br />
      <table><tr><td>GSM: </td><td>+32(0)472 80 62 72</td></tr>
      <tr><td>Tél: </td><td>+32(0)71 32 18 49</td></tr>
      <tr><td>Fax: </td><td>+32(0)71 31 26 93</td></tr>
      </table></td>
      <td class="barreFooter" rowspan="5"></td>
      <td class="centPx"><a href="#">Accueil</a></td><td class="barreFooter" rowspan="5"></td><td class="centPx"><a href="#">Services</a></td><td class="barreFooter" rowspan="5"></td><td class="centPx"></td></tr>
       <tr><td class="centPx"><a href="#">Présentation</a></td><td class="centPx"><a href="#">Comptabilité</a></td><td ></td></tr>
      <tr><td class="centPx"><a href="#">News</a></td><td class="centPx"><a href="#">Conseils financiers</a></td><td class="centPx"></td></tr>
      <tr><td class="centPx"><a href="#">Contact</a></td><td class="centPx"><a href="#">Fiscalité</a></td><td class="centPx"><a href="#">Plan du site</a></td></tr>
      <tr><td class="centPx"><a href="#">Espace client</a></td><td class="centPx"></td><td class="centPx"><a href="#">&copy 2013 - MRD Finance</a></td></tr>
      </table>
      <!---- end menu Footer -->
     </div>
      
     </div>
      <div id="footer2"></div>
    
    
  </body>
</html>

mon css:


html, body{padding:0px; margin:0px;}
body{
     background-color: #F2F2F2;
     background:url('../img/logoExtension.png') repeat-x -499px 45px;
     font-family:"Arial","sans-serif","Garamond";
}
/* /////////////// DIV CONTENEUR /////////////// */
#container{
margin: 0px auto 0px auto;
min-height: 750px;
max-width: 1000px;
min-width:1000px;
}
/* /////////////// EN-TETE ///////////////////// */
#logo {
    /*top : 0px;*/
    min-width: 240px;
    height: 170px;
    background: url("../img/logoDavid.png") no-repeat 0 0px;
    }
#nav-h{
position: absolute;
top:47px;
margin-left: 300px;
min-width: 700px;
}
#nav-h ul{
text-align: center;
}
#nav-h ul li{
display:inline;
height: 100px;
text-align: center;
}
#nav-h a {
          font-size:1.2em;
          padding-bottom: 10px;
          padding-top: 10px;
          padding-left: 10px;
          padding-right: 10px;
          text-decoration: none;
          text-align: center;
          color: #191919;
         }
#nav-h ul li a:hover {
    padding-bottom: 10px;
          padding-top: 10px;
          background-color:#191919;
          border-radius:5px; 
          color: white;
         }
#menuIcon{
width: 100%;
min-height: 250px;
}
#menuIcon table{
margin-left: auto;
margin-right: auto;
}
#menuIcon table th{
font-size:1.2em;
padding-bottom: 20px;
}
#menuIcon table td:first-child{
padding-right: 50px;
}
#menuIcon table td:first-child+td{
padding-right: 50px;
}
/***********Contenu page*******************/
#content{
     width:100%;
     min-height:250px;
     }
#blocContenu1{
width: 450px;
padding-right:25px;
padding-left: 25px;
float: left;
}
#blocContenu2{
width:450px;
padding-left: 25px;
padding-right: 25px;
float: right;
}
.contact{font-size: 1.2em;}
.firstWord {color:#66CC00;}
/* /////////////// PIED DE PAGE /////////////// */
#footer {
  position: relative;
  z-index: 2;
  min-height: 200px;
  min-width: 1000px;
  width: 100%;
  overflow: hidden;
}
 .tablePrincipal {
     border-collapse:collapse;
     margin-left: auto;
     margin-right: auto;
     padding-top: 20px;
 }
 .centPx{
     font-size: 0.8em;
     width:150px;
     padding-left: 15px;
 }
  .barreFooter{
  background-color: #66CC00;
  min-width:1px;
  max-width:1px;
  }
  #footer ul {
  list-style-type: none;
  }
  #footer a {
  color: #fff;
  text-decoration: none;
  }
  #footer a:hover {
  text-decoration: underline;
  }
  #footer2 {
  position: relative;
  min-height: 200px;
  min-width: 1000px;
  /*bottom: +200px;*/
  margin-top: -200px; /* Pour Firefox, il faut mettre margin et non seulement top sinon FF se réfaire au parent et déplace de 200px donc double la surface du div*/
  z-index: 1;
  background:url('../img/extensionLogo2.png') repeat-x;
}

Si quelqu'un peut me dire pourquoi IE ne répond plus correctement, merci

Anthony_

28 May 2013 à 16:02

pour la diférence de marge, j'ai trouvé une solution (reset sur html, body, div, ul, li,a )
mais pour le border-radius IE ne réagit toujours pas

Zelalsan

28 May 2013 à 18:40

salut,
tu aurais peut être dû préciser la version de IE qui te pose problème. La propriété border-radius n'est reconnue qu'à partir de IE9, donc pas grande chance que ça le fasse. Il existe cependant un .htc qui te permet d'émuler ça, c'est CSS3Pie. Cela dit ça alourdi un peu plus les choses pour rien.

Sujet clos

CSS et mise en forme, CSS3

Problème avec IE