Thème Intense 10 ok sous IE mais pas ok sous firefox. Qui maitrise?

  • Statut : non résolu
9 sujets de 1 à 9 (sur un total de 9)
  • Auteur
    Messages
  • #451065
    Jay
    Membre
    Initié WordPress
    41 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 2.1.2
    – Thème utilisé : Intense 10
    – Adresse du site : http://www.chicheux.ch

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

    Comme énnoncé dans le titre, mon site s’affiche nickel sous IE mais foire sous firefox. La background blanc ne couvre pas tous les articles afin d’en permettre la lecture. Exemple ici: Exemple bug

    Voici également mon fichier css, au cas où une balise foireuse serait immédiatement repérée par un oeil averti.

    body { 
    margin : 0;
    padding : 0;
    background : #333 url(img/bodybg.png) repeat-x fixed top center;
    text-align : center;
    font : 11px Verdana, Arial, Helvetica, sans-serif;
    } 
    #rap { 
    width : 700px;
    margin : auto;
    padding-bottom : 20px;
    } 
    h1, h2, h3, h4, h5, h6 { 
    font-family : Georgia, Verdana, Arial, Helvetica, sans-serif;
    font-weight : lighter;
    margin : 0;
    padding : 0;
    color : #333;
    } 
    h1 { 
    font-size : 28px;
    } 
    h2, h3 { 
    font-size : 20px;
    color : #0a294f;
    margin : 8px 0;
    } 
    h4 { 
    font-size : 18px;
    color : #911322;
    } 
    h5 { 
    font-size : 16px;
    color : #af3d0a;
    } 
    h6 { 
    font-size : 11px;
    font-weight : bold;
    color : #333;
    } 
    del { 
    color : #999;
    } 
    acronym { 
    border : none;
    background : url(img/dottedborder_dark.gif) repeat-x bottom center;
    padding-bottom : 1px;
    cursor : help;
    } 
    hr { 
    width : 100%;
    border : 0;
    margin : 5px 0 !important;
    margin : 2px 0 5px 0;
    height : 1px;
    color : #777;
    background-color : #777;
    } 
    a { 
    color : #af2639;
    text-decoration : none;
    } 
    a:hover { 
    text-decoration : underline;
    } 
    p { 
    line-height : 20px;
    margin : 5px 0 15px 0;
    } 
    .noborder { 
    border : 0;
    } 
    #main ul { 
    margin : 0;
    padding : 0 10px 5px 15px;
    list-style-type : none;
    } 
    #main ol { 
    margin : 0;
    padding : 0 20px;
    } 
    #main ul li { 
    padding-bottom : 7px;
    background : transparent url(img/arrow.gif) no-repeat 0 5px;
    padding-left : 10px;
    } 
    #main ol li { 
    padding-bottom : 7px;
    } 
    #main ul li ul { 
    margin : 8px 0 -7px 0;
    } 
    #main .pre { 
    font : 11px “Courier New”, Courier, sans-serif;
    color : #af454a;
    } 
    img { 
    border : none;
    } 
    .floatleft { 
    float : left;
    } 
    .floatright { 
    float : right;
    } 
    .w50 { 
    width : 50%;
    } 
    .floatleft p { 
    padding : 0 10px 0 0;
    } 
    .floatright p { 
    padding : 0 0 0 10px;
    } 
    img.floatleft { 
    margin : 15px 15px 5px 0;
    } 
    img.floatright { 
    margin : 15px 0 5px 15px;
    } 
    img { 
    padding : 4px 10px 10px 4px;
    } 
    a img { 
    background : none;
    border : none;
    background : url(img/shadow.gif) no-repeat right bottom;
    padding : 4px 10px 10px 4px;
    border-top : 1px solid #eee;
    border-left : 1px solid #eee;
    } 
    .tl { 
    background : #333 url(img/corners/tl.gif) no-repeat top left;
    } 
    .tr { 
    background : transparent url(img/corners/tr.gif) no-repeat top right;
    } 
    .br { 
    background : transparent url(img/corners/br.gif) no-repeat bottom right;
    } 
    .bl { 
    background : transparent url(img/corners/bl.gif) no-repeat bottom left;
    } 
    .ltl { 
    background : #efefef url(img/corners/l_tl.gif) no-repeat top left;
    } 
    .ltr { 
    background : transparent url(img/corners/l_tr.gif) no-repeat top right;
    } 
    .lbr { 
    background : transparent url(img/corners/l_br.gif) no-repeat bottom right;
    } 
    .lbl { 
    background : transparent url(img/corners/l_bl.gif) no-repeat bottom left;
    } 
    blockquote { 
    min-height : 35px;
    width : 100%;
    display : block;
    margin : 10px auto;
    background : transparent url(img/blockquote/quote.gif) no-repeat 10px 10px;
    } 
    * html blockquote { 
    min-height : 35px;
    height : auto !important;
    height : 35px;
    } 
    blockquote p { 
    margin : 0;
    line-height : 17px;
    padding : 10px 10px 10px 50px;
    } 
    blockquote span { 
    color : #999;
    font-size : 9px;
    padding-top : 5px;
    display : block;
    } 
    blockquote span a { 
    color : #555;
    text-decoration : none;
    } 
    blockquote span a:hover { 
    text-decoration : underline;
    } 
    blockquote.go { 
    background : transparent url(img/blockquote/go.gif) no-repeat 10px 50%;
    } 
    blockquote.stop { 
    background : transparent url(img/blockquote/stop.gif) no-repeat 11px 50%;
    } 
    blockquote.exclamation { 
    background : transparent url(img/blockquote/exclamation.gif) no-repeat 23px 50%;
    } 
    code { 
    display : block;
    width : 92%;
    margin : 0 auto 15px auto;
    line-height : 17px;
    } 
    code .red { 
    color : #af454a;
    } 
    fieldset { 
    border : none;
    } 
    form select, form input, form textarea { 
    font : 1em Verdana, Arial, Helvetica, sans-serif;
    } 
    form input:focus, form textarea:focus, form select:focus { 
    border : 1px solid #666;
    } 
    form select { 
    padding : 2px;
    } 
    form input { 
    padding : 2px;
    } 
    form label { 
    color : #666;
    } 
    form textarea { 
    padding : 1px;
    line-height : 16px;
    width : 90%;
    height : 20em;
    } 
    form p { 
    margin : 10px 0;
    } 
    #top { 
    background : url(img/contentbg.gif) repeat-y top center;
    } 
    #bottom { 
    background : url(img/container_b.gif) no-repeat bottom center;
    height : 9px;
    } 
    * html #bottom { 
    margin-top : -4px;
    } 
    #header { 
    font : 30px Georgia, Verdana, Arial, Helvetica, sans-serif;
    width : 680px;
    height : 175px;
    margin : auto;
    text-align : left;
    } 
    .header1 { 
    background : url(img/headers/h1.jpg) no-repeat top center;
    } 
    .header2 { 
    background : url(img/headers/h2.jpg) no-repeat top center;
    } 
    .header3 { 
    background : url(img/headers/h3.jpg) no-repeat top center;
    } 
    .header4 { 
    background : url(img/headers/h4.jpg) no-repeat top center;
    } 
    #title { 
    margin-top : 130px;
    margin-left : 13px;
    position : absolute;
    color : #fff;
    background-color : transparent;
    cursor : default;
    } 
    #header h1 a { 
    color : #f0f0f0;
    } 
    .nav { 
    height : 40px;
    background-color : #333;
    color : #fff;
    width : 680px;
    margin : auto;
    text-align : left;
    font-size : 11px;
    cursor : default;
    } 
    .nav2 { 
    height : 40px;
    } 
    #slogan { 
    position : absolute;
    margin : 11px 0 0 15px;
    font-size : 1.1em;
    font-style : italic;
    } 
    #navdiv { 
    text-align : right;
    } 
    #navlist { 
    font-size : 120%;
    list-style-type : none;
    margin : 0;
    padding : 10px 8px 2px 0;
    font-family : Trebuchet MS, Arial, Serif;
    } 
    #navlist li { 
    display : inline;
    } 
    #navlist li a { 
    color : #999;
    font-weight : bold;
    text-decoration : none;
    height : 40px;
    padding : 10px 6px;
    } 
    #navlist li a:hover, #navlist li a:active, #navlist li.current_page_item a { 
    color : #fff;
    } 
    #main { 
    min-height : 400px;
    width : 680px;
    margin : auto;
    color : #333;
    text-align : left;
    } 
    * html #main { 
    min-height : 400px;
    height : auto !important;
    height : 400px;
    } 
    #content { 
    width : 440px;
    float : left;
    padding : 10px 10px 20px 10px;
    } 
    * html #content { 
    padding-top : 20px;
    } 
    #content .post { 
    margin : 0 0 3em 0;
    } 
    #content .cat { 
    margin : 0;
    padding : 0;
    color : #999;
    } 
    #content .post-info { 
    color : #777;
    text-align : right;
    background : url(img/dottedborder.gif) repeat-x top 0%;
    } 
    #content .post-info em { 
    font-style : normal;
    float : left;
    margin : 0 5px 0 0;
    } 
    em.user { 
    padding-left : 12px;
    background : url(img/user.png) no-repeat left center;
    } 
    em.date { 
    padding-left : 15px;
    background : url(img/date.gif) no-repeat left center;
    } 
    #main .post-comments { 
    background : url(img/comments.gif) no-repeat left center;
    padding-left : 12px;
    } 
    #sidebar { 
    width : 190px;
    float : right;
    padding : 20px 10px 20px 20px;
    } 
    * html #sidebar { 
    padding-top : 30px;
    } 
    #sidebar ul { 
    list-style : none;
    } 
    #sidebar .sideitem { 
    margin-bottom : 25px;
    background : none;
    } 
    #sidebar .sideitem h2 { 
    font : 12px Georgia, Arial, Helvetica, sans-serif;
    font-size : 18px;
    color : #333;
    width : 100%;
    background : #fff url(img/dottedborder.gif) repeat-x bottom center;
    padding-bottom : 3px;
    margin-bottom : 13px;
    } 
    #sidebar .sideitem p { 
    margin : 0;
    padding : 0 5px;
    } 
    #sidebar .sideitem ul { 
    margin-left : -4px;
    } 
    .footer { 
    height : 50px;
    width : 680px;
    margin : auto;
    color : #fff;
    text-align : left;
    clear : both;
    background : #000;
    } 
    .footer div { 
    height : 50px;
    } 
    .footer .feed { 
    background : url(img/icon_feed.gif) no-repeat left center;
    padding-left : 15px;
    } 
    #copyright { 
    text-align : left;
    float : left;
    padding : 8px;
    margin-top : -10px;
    } 
    #designcredit { 
    float : right;
    padding : 8px;
    margin-top : -6px;
    color : #649290;
    } 
    .footer a:link, .footer a:visited { 
    color : #649290;
    border-bottom : 1px dashed;
    } 
    .footer a:hover, .footer a:active { 
    color : #fff;
    text-decoration : none;
    } 
    #comments, #respond { 
    margin : 2em 0 0 5px;
    } 
    #commentform { 
    margin : 10px 0;
    padding : 10px;
    background : #fcf0fc;
    border-top : 1px solid #ddd;
    border-bottom : 1px solid #ddd;
    } 
    .commentnum { 
    font-size : 200%;
    } 
    #main .commentlist { 
    margin : 0;
    padding : 0;
    border-top : 1px solid #ddd;
    } 
    .commentlist li { 
    list-style : none;
    margin : 0;
    padding : 1em;
    border-bottom : 1px solid #ddd;
    } 
    .commentlist li.alt { 
    background : #fcf9fc;
    } 
    .commentlist li.highlighted { 
    border : 1px solid #bdb76b;
    } 
    .commentlist li .cmtinfo { 
    font-size : 1em;
    } 
    .commentlist li cite { 
    font-style : normal;
    font-weight : bold;
    } 
    .commentlist li .cmtinfo em { 
    float : right;
    margin : 0;
    padding : 0;
    font-style : normal;
    font-size : 0.9em;
    color : #999;
    } 
    #comments { 
    border-bottom : none;
    } 
    input.textbox { 
    background : #fff url(img/shadow_top.gif) repeat-x top 0%;
    border : 1px solid #ccc;
    margin : 2px 0;
    width : 150px;
    } 
    textarea { 
    background : #fff url(img/shadow_top.gif) repeat-x top 0%;
    border : 1px solid #ccc;
    } 
    .textbox:focus, textarea:focus { 
    background : #fff url(img/shadow_top.gif) repeat-x top 0%;
    } 
    .nocomments { 
    font-size : 0.9em;
    color : #999;
    } 
    #content, #sidebar, #footer, .widget { 
    overflow : hidden;
    }

    Est-ce que les infos qui parlent de la longueurs du background blanc peuvent se trouver ailleurs?

    Merci d’avance!

    #595245
    benkenobi
    Gestionnaire du forum
    Maître WordPress
    4080 contributions

    Je pense que la réponse à la question se trouve ici.

    #595246
    Jay
    Membre
    Initié WordPress
    41 contributions

    Euh… si seulement… mais oû? Je vois bien des erreurs de code dans les articles mais pas de trace de background ou alors je l’ai déjà loupé 2 fois. J’y retourne.

    En ciblant bien je pense que la balise cssincomplète aux yeux de firefox est ici:

    body { 
    margin : 0;
    padding : 0;
    background : #333 url(img/bodybg.png) repeat-x fixed top center;
    text-align : center;
    font : 11px Verdana, Arial, Helvetica, sans-serif;
    }

    #595247
    ModoFX
    Membre
    Chevalier WordPress
    363 contributions

    Bonjour,

    Modifies cela dans ta feuille de style :

    […]
    #top {
    background-image:url(img/contentbg.gif);
    background-repeat:repeat-y;
    height:auto;
    overflow:hidden;
    }
    […]

    PS : Penses à corriger les erreurs trouvées par le W3C (voir lien de BenKenobi) !

    Cordialement,

    #595248
    Jay
    Membre
    Initié WordPress
    41 contributions

    Fix tu es un Dieu!
    Car effectivement ça fonctionne!

    Par contre aurais-tu juste l’amabilité de m’expliquer comment cela est-possible?
    cela semble être la balise “overflow:hidden”? A quoi sert-elle?

    #595249
    ModoFX
    Membre
    Chevalier WordPress
    363 contributions

    Re,

    Jay wrote:
    Fix tu es un Dieu! […]

    Euh… j’aimerai tellement qu’on me le dise plus souvent ! :D

    La propriété overflow permet d’afficher ou non une scrollbar, les différentes valeurs sont :

    – visible, rend visible tout ce qui dépasse.
    – hidden, cache tout ce qui dépasse.
    – scroll, met une barre de défilement horizontale.
    – auto, met une barre de défilement horizontale si besoin.
    – inherit, hérite de son parent (css2).

    Le fait de mettre height:100%; ne suffit pas ! En effet, cette propriété varie en fonction de la taille de l’écran… et le 100% va s’apllique dans toute la hauteur de la fenêtre mais si la page continue (plus grande que la taille de la fenêtre) il va y avoir un vide (plus de couleur).

    Avec la propriété overflow:hidden; cela permet de dire (en gros) de remplir le div même et surtout si la page est plus grande que la fenêtre.

    C’est assez difficile à explique, et peu de site utilise cette méthode (ou l’explique) afin de régler le même type de problème que tu as pu rencontrer. En tout les cas, moi je l’utilise et ça marche très bien !

    Cordialement,

    #595250
    Jay
    Membre
    Initié WordPress
    41 contributions

    Grands merci pour tes explications et pour la rapidité de ta réponse. Chicheux.ch va pouvoir être visité par les firefoyiens!

    Si quelqu’un peut passer le sujet en “résolu” qu’il n’hésite pas. 😉

    #595251
    ModoFX
    Membre
    Chevalier WordPress
    363 contributions

    Re,

    Hier, j’ai ressorti un livre sur le CSS car je trouvai que mon explication n’était pas forcément claire… voici ce que dit le livre sur la propriété overflow :

    FiX (MicroApplication – CSS (p.212)) wrote:
    La propriété overflow gère le comportement du texte par rapport à la boîte qui le contient. Le comportement par défaut est visible : le texte déborde de la boîte si celle-ci est trop petite. Avec la valeur hidden, le texte reste contenu dans les limites de la boîte, mais aucun ascenseur (scrollbar) ne permet de voir ce qui est caché. Avec scroll, le texte est contenu dans les limites de la boîte et est associé à une scrollbar quelle que soit la taille du texte contenu. Auto provoque l’apparition de l’ascenseur seulement si la taille du texte le demande.

    Cordialement,

    #595252
    Jay
    Membre
    Initié WordPress
    41 contributions

    classe! 🙂

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