Problème margin:auto sur ie (Impossible de centrer) (Créer un compte)

  • Statut : non résolu
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • #495228
    Pegase88
    Membre
    Initié WordPress
    25 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 3.1.2
    – Version de PHP/MySQL : 5.3.5 / 5.5.8
    – Thème utilisé : Mon thème
    – Nom de l’hebergeur : Local

    Problème(s) rencontré(s) :

    Je suis entrain de crée un thème WordPress. Il s’agit de mon second thème que je vais créer. La première fois tout c’était bien passé. Mais pour ce thème je rencontre un gros problème. Le site fonctionne sur tout les navigateurs sauf sur Internet Explorer (toutes les versions). En effet, ie refuse de prendre en compte le « margin:auto » que j’utilise pour centrer ce que je veux. Tout le design est décalé à gauche. L’affichage est une vrai catastrophe. Je ne comprend vraiment pas ce qui se passe car je suis partit sur les bases de mon ancien thème qui fonctionne très bien.

    Voici mon header.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">

    <title><?php bloginfo('name') ?><?php if ( is_404() ) : ?> » <?php _e('Not Found') ?><?php elseif ( is_home() ) : ?> » <?php bloginfo('description') ?><?php else : ?><?php wp_title() ?><?php endif ?></title>

    <meta http-equiv="Content-Type" content="<?php bloginfo('htib_type'); ?>; charset=<?php bloginfo('charset'); ?> » />
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?> » />
    <!-- leave this for stats -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?> » type= »text/css » media= »screen » />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?> » />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?> » />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?> » />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?> » /><?php wp_head(); ?>

    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php wp_head(); ?>


    </head>
    <body>
    <a name="top"></a>

    <div id="top_menu_content" class="ombre_bas">
    <div id="top_menu">
    <?php wp_nav_menu( array( 'container_id' => ‘nav_menu’, ‘theme_location’ => ‘primary’,’fallback_cb’=> ‘fallbackmenu1’ ) ); ?>
    <div class="clear"></div>
    </div><!-- top_menu -->
    <div class="cadenas"><?php wp_register(' ', ' '); ?><li><?php wp_loginout(); ?></li>

    Et le pire, c’est que cela atteint même l’administration de WordPress. Quand je vais dans le tableau de bord, tout s’affiche n’importe comment sur ie.

    Quelqu’un à t’il déjà rencontré ce problème?

    Merci de vos réponses

    wasicu
    Membre
    Maître WordPress
    2752 contributions

    Salut cheval volant 88
    Le code de ton header ne peut pas nous être utile. (Encore que je puisse voir deux fois wp_head() dans le code, , une fois après le link rel pingback une seconde fois après les comments_popup, ca aide peut etre pas ?) Au mieux ce serait un lien vers le site. Au pire c’est de se renseigner sur le comportement particulier d’IE qui aime bien avoir des blocks et puis éventuellement de vider cache et historique souvent en période de test. Pour répondre enfin à ta question par une question : Qui n’a jamais eu de problèmes avec IE ?

    #771015
    shamateur
    Membre
    Padawan WordPress
    82 contributions

    Montre nous ton fichier CSS, quand tu dis que ça le fait sur toutes les versions d’IE, c’est à partir de la combien ? IE6 ?

    #771016
    Pegase88
    Membre
    Initié WordPress
    25 contributions

    Sur ie7, 8 et 9. ‘Jai pas testé sur la 6.

    Mons css:

    /*
    Theme Name: PortfolioK
    Theme URI: http://toto.free.fr/
    Description: Theme specialement pour un Portfolio.
    Version: 1
    Author: toto
    */

    *{
    margin:0;
    padding:0;
    text-decoration:none;
    border:none;
    }

    a, img, h1, h2, h3, h4, h5{
    color:black;
    }

    body{
    background-color:#848484;
    background-image:url(‘images/pattern.png’);
    }

    #top_menu_content{background-color:#2E2E2E; border-bottom:1px solid #545454; margin-top:-25px;}
    #top_menu{
    width:900px;
    margin:auto;
    padding:10px;
    color:white;
    }

    #top_menu ul{
    list-style: none;
    }

    #top_menu li{
    float:left;
    margin:0 15px;
    }

    #top_menu a{
    color:#D6C8BA;
    padding:2px 8px;
    display:block;

    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: all 600ms linear;
    -moz-transition: all 600ms linear;
    transition: all 600ms linear;
    }

    #top_menu a:hover{
    color:black;
    background-color:#D6C8BA;
    }

    .cadenas{
    position:absolute;
    right:20px;
    top:12px;
    }

    .cadenas a{
    color:white;
    }
    .cadenas li, .cadenas ul{
    list-style: none;
    }

    #page_content{width:900px; margin:0 auto;}
    #page{
    margin:20px 10px;
    }


    #header_content{margin:0 auto;}
    #header{
    background-color:#2E2E2E;
    color:white;
    }

    #header h1{
    margin:0 0 0 20px;
    padding:20px 0 0 0;
    }

    #header h1 a{
    color:#848484;
    }

    #header p{
    margin:0 0 0 20px;
    padding:5px 0 8px 0;
    }

    #reseaux{
    float:right;
    margin:-70px 40px 0 0;
    }

    #menu_content{margin:auto;}
    #menu{
    background-color:#2E2E2E;
    margin:10px 0 12px 0;
    padding:10px;
    color:white;
    }

    #menu ul{
    list-style: none;
    }

    #menu li{
    float:left;
    margin-left:20px;
    }

    #menu a{
    color:white;
    padding:2px 8px;
    display:block;

    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: all 600ms linear;
    -moz-transition: all 600ms linear;
    transition: all 600ms linear;
    }

    #menu a:hover{
    background-color:#848484;
    }

    #post_content{}
    #post_content_2{width:900px; margin:0 auto;}
    .post{
    background-color:white;
    padding:10px;
    margin:0 10px 20px 10px;
    width:260px;
    height:330px;
    float:left;
    color:#3D2323;
    }

    .super_post{
    background-color:white;
    padding:10px;
    margin:10px 0 0 0;
    color:#3D2323;
    }

    .post .miniature{
    background-color: #474545;
    display: block;
    margin:5px auto;
    padding:4px;
    }

    .super_post .super_miniature{
    background-color: #474545;
    float: left;
    margin:0 8px 5px 0;
    padding:4px;
    }

    .post_erreur{
    background-color:white;
    padding:10px;
    margin:10px;
    color:#3D2323;
    }

    .post .the_excerpt{
    text-align:justify;
    font-size:13px;
    }

    .single_post{
    float:left;
    width:640px;
    background-color:white;
    padding:10px;
    margin:0 0 10px 0;
    color:#3D2323;
    }

    .single_post h1, .single_post h2, .single_post h3{
    float:left;
    color:#3D2323;
    }

    .single_post .date{
    font-style:italic;
    float:right;
    margin:8px 8px 0 0;
    font-size:13px;
    border-bottom:1px solid black;
    }

    .single_post img{
    display:block;
    margin:15px auto;

    -webkit-box-shadow: 0px 0px 5px #000000;
    -moz-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
    }

    .postmetadata {
    margin-top:10px;
    }

    .postmetadata .edit{
    padding:6px 8px;
    background-color:#474545;
    float:left;
    }

    .postmetadata .edit a{
    color:white;
    }

    .postmetadata .category a{
    padding:6px 8px;
    margin-left:5px;
    background-color:#2B0606;
    float:right;
    color:white;

    -moz-border-radius: 8px;
    border-radius: 8px;
    }

    #sidebar_content{
    float:left;
    width:210px;
    padding:0 0 0 10px;
    }

    #sidebar_content ul{
    list-style: none;
    }

    .sidebar{
    background-color:#2B0606;
    margin:0 0 10px 0;
    padding:10px;
    color:white;
    border:1px solid white;
    }

    .sidebar h1,.sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5{
    color:white;
    font-size:17px;
    margin-bottom:5px;
    }

    .sidebar a{
    color:#848484;
    padding:2px 0 2px 8px;
    display:block;

    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: all 600ms linear;
    -moz-transition: all 600ms linear;
    transition: all 600ms linear;
    }

    .sidebar a:hover{
    background-color:white;
    color:black;
    }

    .sidebar input, .sidebar input{
    margin-bottom:2px;
    }

    .sidebar table{
    margin: 0 auto;
    color:white;
    }

    .navigation{
    padding:0 10px;
    margin-bottom:20px;
    }

    .nav_gauche{
    float:left;
    font-size: 13px;
    background-color:white;
    padding:5px 10px;
    }

    .nav_droite{
    float:right;
    font-size: 13px;
    background-color:white;
    padding:5px 10px;
    }

    #footer_content{background-color:#2E2E2E; padding:30px; border-top:1px solid #545454;}
    #footer{
    width:900px;
    margin:auto;
    }

    #footer *{
    color:#848484;
    text-align:center;
    margin:auto;
    }

    #footer .block{
    float:left;
    width:200px;
    margin:5px;
    }

    #footer h1, #footer h2, #footer h3, #footer h4, #footer h5{
    color:white;
    background-color:#848484;
    padding:2px 8px;
    margin-bottom:5px;

    -moz-border-radius: 3px;
    border-radius: 3px;
    }

    #footer input, #footer select{
    display:block;
    width:200px;
    }



    #searchform input{
    border:1px solid #848484;
    height:30px;

    -moz-border-radius: 5px;
    border-radius: 5px;

    opacity:0.7;
    filter : alpha(opacity=70);

    -webkit-box-shadow: 1px 1px 5px #1f1d1f;
    -moz-box-shadow: 1px 1px 5px #1f1d1f;
    box-shadow: 1px 1px 5px #1f1d1f;
    }

    #searchform .bouton_chercher{
    color:#D1D1D1;
    padding:0 8px;

    background: #3c2222; /* Old browsers */
    background: -moz-linear-gradient(top, #3c2222 0%, #91736a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c2222), color-stop(100%,#91736a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3c2222 0%,#91736a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3c2222 0%,#91736a 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #3c2222 0%,#91736a 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3C2222′, endColorstr=’#91736A’,GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #3c2222 0%,#91736a 100%); /* W3C */
    }

    #searchform .bouton_chercher:hover{
    color:white;

    background: #633838; /* Old browsers */
    background: -moz-linear-gradient(top, #633838 0%, #bc8d8b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#633838), color-stop(100%,#bc8d8b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #633838 0%,#bc8d8b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #633838 0%,#bc8d8b 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #633838 0%,#bc8d8b 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#633838′, endColorstr=’#BC8D8B’,GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #633838 0%,#bc8d8b 100%); /* W3C */
    }









    .clear{
    clear:both;
    }

    .espace, .space{
    height:10px;
    }

    .rond, .radius{
    -moz-border-radius: 8px;
    border-radius: 8px;
    }

    .ombre, .shadow{
    -webkit-box-shadow: 1px 1px 5px #1f1d1f;
    -moz-box-shadow: 1px 1px 5px #1f1d1f;
    box-shadow: 1px 1px 5px #1f1d1f;
    }

    .ombre_bas, .shadow_bottom{
    -webkit-box-shadow: 0px 5px 2px #1f1d1f;
    -moz-box-shadow: 0px 5px 2px #1f1d1f;
    box-shadow: 0px 5px 2px #1f1d1f;
    }

    .ombre_haut, .shadow_top{
    -webkit-box-shadow: 0px -5px 2px #1f1d1f;
    -moz-box-shadow: 0px -5px 2px #1f1d1f;
    box-shadow: 0px -5px 2px #1f1d1f;
    }

    .ombre_texte, .text_shadow{
    text-shadow: 1px 1px 2px #383838;
    filter: dropshadow(color=#383838, offx=1, offy=1);
    }

    .opacity{
    opacity:0.7;
    filter : alpha(opacity=70);
    }

    .transition{
    -webkit-transition: all 800ms linear;
    -moz-transition: all 800ms linear;
    transition: all 800ms linear;
    }

    .none{
    margin:0 !important;
    padding:0 !important;
    display:inline !important;

    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    }

    .center{
    text-align:center !important;
    margin:auto !important;
    }

    #771017
    wasicu
    Membre
    Maître WordPress
    2752 contributions
    #771018
    shamateur
    Membre
    Padawan WordPress
    82 contributions

    Je viens de recopier ton css et j’ai repris la structure de ton header, et je n’ai pas constaté de problème de centrage sous IE (IE6 à 9). Je pense que le problème ne se situe pas au niveau de ton CSS, mais du paramétrage ou la configuration de ton IE étant donné que tu as ce problème y compris dans la partie admin… Est-ce que tu as la possibilité de mettre le thème en ligne quelque part ? Car malheureusement je ne vais pas pouvoir t’aider beaucoup plus sinon 😕

    #771019
    Pegase88
    Membre
    Initié WordPress
    25 contributions

    Wasicu et Shamateur, je vous remercie pour vos réponses. Les recherches que j’ai faite grâce à vos réponses mon permis de trouvez la solution.
    Il s’agissait d’un problème d’encodage. Mes pages étaient encodées en UTF-8. J’ai donc avec Notepad++ ré-encodé toutes mes pages en UTF-8 sans Bom, et la tout fonctionne nickel. L’affichage est le même sur tout les navigateurs;

    Merci encore.

    #771020
    shamateur
    Membre
    Padawan WordPress
    82 contributions

    De rien, c’est bon à savoir !

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