1. ✅ Apprenez une METHODE qui marche pour votre SEO ! Formation à distance avec Olivier Duffez et Fabien Facériès + aide pour prise en charge du financement
    Rejeter la notice

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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par finplein, 19 Août 2011.

  1. finplein
    finplein Nouveau WRInaute
    Inscrit:
    19 Août 2011
    Messages:
    3
    J'aime reçus:
    0
    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;
    }
    
    
     
  2. jv2759
    jv2759 WRInaute occasionnel
    Inscrit:
    21 Novembre 2008
    Messages:
    429
    J'aime reçus:
    0
    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.
     
  3. finplein
    finplein Nouveau WRInaute
    Inscrit:
    19 Août 2011
    Messages:
    3
    J'aime reçus:
    0
    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
     
  4. CARREZ
    CARREZ WRInaute discret
    Inscrit:
    12 Mai 2006
    Messages:
    73
    J'aime reçus:
    0
    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)
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 057
    J'aime reçus:
    294
    Commence par corriger tes fautes w3c. Je ne vois pas de fermeture du <div id="header">
     
  6. finplein
    finplein Nouveau WRInaute
    Inscrit:
    19 Août 2011
    Messages:
    3
    J'aime reçus:
    0
    merci pour ces réponses..
     
Chargement...
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