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
css et compatibilité Netscape	Administration d'un site Web	11 Octobre 2004
Compatibilité Thunderbird 78.8.1 et charset 7 bits.	Le café de WebRankInfo	5 Avril 2021
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
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
Algorithme de compatibilité mobile	Débuter en référencement	27 Avril 2015
Avis sur compatibilite mobile et le référencement	Problèmes de référencement spécifiques à vos sites	15 Avril 2015
Outil de test compatibilité mobile	Débuter en référencement	26 Novembre 2014
probleme compatibilite site sur ipad et iphone	Développement d'un site Web ou d'une appli mobile	6 Avril 2014
Compatibilité des rich snippets avec la validation W3C	Débuter en référencement	25 Avril 2013
Incompatibilité Mail HTML/messageries	Développement d'un site Web ou d'une appli mobile	4 Avril 2013
compatibilité entre différents dreamweaver	Développement d'un site Web ou d'une appli mobile	27 Octobre 2012
<script> Whois et images/slider incompatibilité?	Développement d'un site Web ou d'une appli mobile	19 Juillet 2011
Probleme de compatibilité IE / Firefox	Développement d'un site Web ou d'une appli mobile	18 Janvier 2011