[Résolu] CSS-Problème d’affichage suivant le navigateur utilisé. (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #447449
    Ajira
    Participant
    Initié WordPress
    18 contributions

    Bonjour,
    Comme souvent depuis deux jours, j’ai de nouveau un problème … 😋
    Je pensais avoir enfin fini les modifications du thème par defaut afin qu’il corresponde au mieux à mes exigences, mais à se moment là je decide de voir ce qu’il en est sous Internet Explorer. Et là c’est le drame ! Ma belle petite barre de navigation n’est pas du tout où elle le devrait !

    Je vous montre un peu le code de mon header.php (seulement la partie qui vous interesse 😉)

    <style type="text/css" media="screen">

    body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); }
    <?php if ((! $withcomments) && (! is_single())) { ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; }
    <?php } else { ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    <?php } ?>
    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
    #footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}

    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 229px; width: 758px; }
    #headerimg { margin: 7px 9px 0; height: 229px; width: 740px; }

    /* Ici commence le CSS pour la barre de navigation */

    #navcontainer ul
    {
    padding-left: 0px;
    margin-left: 10px;
    background-color: #016FE8;
    color: White;
    float: left;
    width: 719px;
    font-family: arial, helvetica, sans-serif;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    padding: 0.2em 1em;
    background-color: #016FE8;
    color: White;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
    }

    #navcontainer ul li a:hover
    {
    background-color: #ffffff;
    color: #016FE8;
    }
    </style>

    <?php wp_head(); ?>
    </head>
    <body>
    <div id="page">
    <div id="header">
    <div id="headerimg">
    <br />
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Site</a></li>
    <li><a href="http://localhost/blog/">Blog</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
    </ul>


    ¤ Sous Firefox
    blogfire8pv.jpg
    ¤ Sous Internet Explorer
    blogie6gk.jpg

    J’ai pensé à mettre margin-top et margin-right mais je ne trouvais pas le bon équilibre entre les deux navigateurs …
    Si vous avez une idée, merci de bien vouloir m’éclairer :D

    #572923
    AmO
    Participant
    Maître WordPress
    4447 contributions

    l’idée ^^

    c’est de mettre les bons margin-top et right pour firefox
    et ensuite tu rajoutes _margin-top et _margin-right qui ne sera pris en compte que par IE

    #572924
    Ajira
    Participant
    Initié WordPress
    18 contributions

    Merci bien AmO, je ne connaissais pas cette technique bien pratique ! Tout marche parfaitement désormais !

    #navcontainer ul
    {
    padding-left: 0px;
    margin-left: 10px;
    _margin-right: 11px;
    _margin-top: 17px;
    background-color: #016FE8;
    color: White;
    float: left;
    width: 719px;
    font-family: arial, helvetica, sans-serif;
    }

    Voilà la partie de code modifié pour ceux que ca interesserait 😉

    #572925
    codfingers
    Participant
    Maître WordPress
    541 contributions

    Il fallait la connaître cette astuce !

    #572926
    AmO
    Participant
    Maître WordPress
    4447 contributions

    Le hic de cette technique… ce que ton CSS n’est plus validé par le W3C ^^

    Perso je m’en fou mais bon 😉

    #572927
    FY
    Participant
    Initié WordPress
    18 contributions

    pas mal pas mal… merci pour l’astuce, ça servira à d’autres 🙂

    #572928
    Ajira
    Participant
    Initié WordPress
    18 contributions
    AmO wrote:
    Le hic de cette technique… ce que ton CSS n’est plus validé par le W3C ^^

    Perso je m’en fou mais bon 😉

    Arf, donc pas approuvé par les puristes 😋 Enfin moi persos je m’en fou complétement, la plupart de mes visiteurs sont des non-initiés à la programmation … 😆
    Sinon pour en revenir à nos moutons, en ce qui concerne header.php tout va bien par contre footer.php a été décalé 😐 (toujours sous IE). Comme quoi il ne fallait pas crier victoire trop tôt :'( Et comme une image parle toujours mieux que des mots :

    problemenavigateurfooter6ly.jpg

    Une autre idée ? 😋

    #572929
    codfingers
    Participant
    Maître WordPress
    541 contributions

    Lorsque j’entends IE, je me marre.. Vivement que ce navigateur soit abandonné et remplacé par Firefox, l’essayer c’est l’adopter… même la prochaine version IE ne gèrera pas lez CSS2 c’est dire !

    #572930
    AmO
    Participant
    Maître WordPress
    4447 contributions
    codfingers wrote:
    Lorsque j’entends IE, je me marre.. Vivement que ce navigateur soit abandonné et remplacé par Firefox, l’essayer c’est l’adopter… même la prochaine version IE ne gèrera pas lez CSS2 c’est dire !

    Tes sources ?
    Faut pas croire tout ce qu’on peut lire sur le web ^^

    IE7 ne gèrera pas l’ensemble des propriété CSS2 ^^ mais tout n’est pas forcément utile, ensuite il auront tjs leur propriété à eux enfin bref…

    avec un margin-left à ton footer ca fonctionne pas ?

    #572931
    Ajira
    Participant
    Initié WordPress
    18 contributions

    Bon finalement, AmO y était presque, à force de mettre des _margin-left sans voir de résultats arriver, j’ai pensé à mettre un ptit _padding-left: 22px; et hop tout est rentré dans l’ordre 🙂 Merci de m’avoir aidé 😉
    Pour le moment j’ai l’impression que tout est rentré dans l’ordre 😋

    #572922
    z720
    Membre
    Maître WordPress
    578 contributions

    A noter quand même que les « astuces » IE en CSS ne fonctionneront plus dans la plupart des cas avec IE7.

    Il n’y a qu’une seul bonne solution : créer une feuille de style spécific à IE et l’appeler avec les commentaires conditionnels :

    <!--[if IE]>-->

    Cette feuille de style permet d' »écraser » les valeurs des propriétés mal gérées uniquement pour IE.
    (pour un autre navigateur ce code est un commentaire ignoré)

    #572921
    Ajira
    Participant
    Initié WordPress
    18 contributions

    Hum, encore quelque chose dont j’igniorais l’existence … Cette méthode est elle validé par W3C ? Avec cette technique est ce qu’il me faut reprendre l’intégralité de la feuille de style conforme ou je peux me contenter du strict minimum (juste ce qui ne va pas sous IE) ?
    Si j’ai bien compris je crée une feuille de style « ie-specific-file.css » avec seulement « les valeurs des propriétés mal gérées par IE » que je place dans le dossier de mon thème c’est à dire /wp-content/themes/default/. Ensuite je met dans le header.php de mon theme :

    <link rel="stylesheet" href=" » type= »text/css » media= »screen » />
    <!--[if IE]>-->

    Ma démarche est elle bonne ?

    #572920
    z720
    Membre
    Maître WordPress
    578 contributions

    C’est valide puique ce n’est qu’un commentaire.

    Il ne faut reprendre que les propriétés dont tu veux changer la valeur dans IE. (c’est le principe de cascade)

    <link rel="stylesheet" href=" » type= »text/css » media= »screen » />
    <!--[if IE]>-->
    <link rel="stylesheet" href="/ie-specific-file.css » />

    Comme cela c’est plus propre, le fichier ie-specific-file.css sera palcé dans le dossier de ton thème.

    #572919
    Ajira
    Participant
    Initié WordPress
    18 contributions

    Cela ne fonctionne pas, du moins j’ai bien suivis les étapes cependant je n’ai pas l’impression que mon ie-specific-file.css soit prit en compte par IE puisque je me retrouve avec le même problème que lors de mon premier message :rolleyes:
    Voici le code de ie-specific-file.css :

    #sidebar {
    margin-left: 527px;
    }
    #footer {
    padding-left: 22px;
    }
    #navcontainer ul {
    margin-right: 11px;
    margin-top: 17px;
    }

    J’ai enlevé au préalable tout les _margin et _padding de mon style.css.
    Où est l’erreur ? (J’ai la version 6 de IE)

    #572932
    z720
    Membre
    Maître WordPress
    578 contributions

    C’est peut être parce que je me suis trompé dans mon code :

    <link rel="stylesheet" href=" » type= »text/css » media= »screen » />
    <!--[if IE]>-->
    <link rel="stylesheet" href="/ie-specific-file.css » />

15 sujets de 1 à 15 (sur un total de 16)
  • Vous devez être connecté pour répondre à ce sujet.