Compatibilité CSS avec IE, FF, Safari, ...

finplein · 19 Août 2011

Bonjour à tous,

Je m'explique : je débute dans la conception de site avec des feuilles de style et il s'avère que ma feuille donne très bien sur mon safari mais une fois que je passe sur un autre ordi muni de FF ou IE, cela ne donne plus du tout la même chose...

Aussi bien au niveau de la largeur des blocs que des arrondis, ...

Pourriez-vous m'en dire plus?

En vous en remerciant d'avance !

Pour info, voici mon code CSS :

Code:

body {
margin : 0 15%;
padding : 0;
text-align : center;
font : 0.9em "eras", tahoma, helvetica, sans-serif;
background : #143358;
}
div#header {
width : 900px;
height : 150px;
text-align : justify;
}
h1#header {
height : 150px;
margin : 0;
background : white;
}
div#menu {
width : 900px;
height : 25px;
padding : 0;
margin : 0;
font : 1em "eras";
}
ul#menu {
height : 25px;
margin : 0;
padding : 0;
list-style-type : none;
background : #61d0f2;
border-radius : 10px;
}
ul#menu li {
padding : 0;
margin : 0;
width : 20%;
height : 25px;
display : block;
float : left;
text-align : center;
border-radius : 13px;
}
ul#menu li a {
padding : 0;
margin : 0;
width : 100%;
line-height : 25px;
font-size : 1em;
font-weight : bold;
color : black;
display : block;
text-decoration : none;
}
a.active {
background : white;
border-radius : 10px;
}
ul#menu li a:hover {
background : #88c557;
border-radius : 10px;
}
div#conteneur {
width : 900px;
height : auto;
padding : 0;
margin : 0;
}
div#contenu {
min-height : 200px;
margin : 0;
padding : 30px 60px;
width : 780px;
height : auto;
background : white;
position : relative;
border-radius : 10px;
}
div#contenu h2 {
margin : 0;
padding : 2px 25px;
line-height : 1.5em;
font-size : 1.3em;
color : black;
border-radius : 10px;
background : #88c557;
}
div#contenu h3 {
margin : 0;
padding : 2px 25px;
line-height : 1em;
font-size : 1.1em;
color : black;
border-radius : 10px;
background : #88c557;
}
div#contenu p {
padding: 0 25px;
text-align : justify;
line-height : 2em;
color : black;
}
#palinea {
text-align : justify;
line-height : 2em;
color : black;
text-indent : 4em;
}

jv2759 · 19 Août 2011

Pour les arrondis essais de regarder sur google, cela sera plus rapide que d'attendre que quelqu'un devine ce que ton css veux faire, car il faut avoir aussi le html et savoir exactement où cela pause problème.

finplein · 19 Août 2011

dans FF et IE par exemple, ils ne font rien avec mon "border-radius"

en gros, les blocs ont des "coins" arrondis mais marche pas sous IE

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >


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

   <link rel="stylesheet" type="text/css" href="style2.css" />

</head>


<body>

<div id="header">

   <h1 id="header">
      <a href="index.html" title="xxx">
      <img src="head.jpg" alt="xxx" />
      </a>
   </h1>

<div id="menu">
     <ul id="menu">
      <li><a href="index.html" class="active">Accueil</a></li>
      <li><a href="cv.html">Parcours</a></li>
      <li><a href="seance.html">Déroulement des séances</a></li>
      <li><a href="liens.html">Liens</a></li>
      <li><a href="contact.html">Contact</a></li>
   </ul></div>
<div id="conteneur">
   
<div id="contenu">
   <h3>xxx</h3>
      <p><b><U>      bla</u></b> : blabla.<br/>
         <b><U>bla</u></b> : blabla.<br/>
         <b><U>bla</u></b>: blabla<br/>
      <br/><br/><br/>
   </p>
</div></div>

</body>
</html>

voilà l'html

les largeurs des blocs ne sont pas les mêmes sur Safari, FF et IE
Les blocs ne sont arrondis que sur Safari
Mon "head.jpg" n'apparaît pas du tout sur IE

CARREZ · 19 Août 2011

border-radius c'est du CSS3, interprété uniquement par des navigateurs récents (FF 3.6, IE9, chrome, ...).

Pour plus de compatibilité il faut aussi ajouter -moz-border-radius (toutes versions de FF) et -webkit-border-radius
Pour les "vieux IE" à part des images de fond il n'y a pas de solution.

Concernant les largeurs des blocs je ne vois pas de raison dans ton css qui produirait des différences (?) ... Sur IE6 (parfois IE7), il suffit de déclarer un bloc inline pour qu'il calcule correctement sa largeur (bug dans l'addition des padding / margin / width)

spout · 19 Août 2011

Commence par corriger tes fautes w3c. Je ne vois pas de fermeture du <div id="header">

finplein · 22 Août 2011

merci pour ces réponses..