Compatibilité CSS avec IE, FF, Safari, ...
6 messages
• Page 1 sur 1
- finplein
- Nouveau WRInaute
- Messages: 3
- Inscription: 19 Aoû 2011
Compatibilité CSS avec IE, FF, Safari, ...
le Ven Aoû 19, 2011 8:00
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 :
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: Tout sélectionner
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
- WRInaute occasionnel
- Messages: 409
- Inscription: 21 Nov 2008
Re: Compatibilité CSS avec IE, FF, Safari, ...
le Ven Aoû 19, 2011 8:29
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
- Nouveau WRInaute
- Messages: 3
- Inscription: 19 Aoû 2011
Re: Compatibilité CSS avec IE, FF, Safari, ...
le Ven Aoû 19, 2011 8:57
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
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
en gros, les blocs ont des "coins" arrondis mais marche pas sous IE
- Code: Tout sélectionner
<!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
- Nouveau WRInaute
- Messages: 40
- Inscription: 12 Mai 2006
Re: Compatibilité CSS avec IE, FF, Safari, ...
le Ven Aoû 19, 2011 16:27
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)
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)
6 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
- Probléme de CSS sur firefox et safari
- Problème CSS : Firefox - Safari OK,Opéra - IE 7 KO
- css et compatibilité Netscape
- Problème de compatibilité Opera et CSS
- Safari 3.1
- Safari et cookies
- Flash et Safari
- problème d'affichage [ff linux ; safari]
- client=safari dans url gg
- AJAX, caractères spéciaux et Safari
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités
Contact
Confidentialité