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..

Similar Threads - Compatibilité CSS Safari	Forum	Date
CSS et compatibilité IE	Développement d'un site Web ou d'une appli mobile	10 Avril 2015
HTML5 & CSS3 readiness / Tableau de compatibilité HTML5 & CSS3	Le café de WebRankInfo	19 Avril 2010
Formulaire html5 : compatibilité navigateurs	Développement d'un site Web ou d'une appli mobile	1 Mars 2020
Compatibilité Javascript pour IE.	Demandes d'avis et de conseils sur vos sites	21 Avril 2019
RGPD : compatibilité avec script de conversion GG adwords	Droit du web (juridique, fiscalité...)	23 Mai 2018
Optimisations SEO avant migration et compatibilité mobile ?	Débuter en référencement	16 Avril 2018
Compatibilité mobiles - ordis de bureaux	Demandes d'avis et de conseils sur vos sites	5 Juillet 2017
placeholder dans formulaire et compatibilité	Développement d'un site Web ou d'une appli mobile	17 Octobre 2016
Test de compatibilité mobile + PageSpeed [outil officiel Google]	Google : l'entreprise, les sites web, les services	6 Juin 2016
Ce site utilise des cookies et compatibilité mobile	Demandes d'avis et de conseils sur vos sites	12 Mai 2015