[CSS] - Différence entre FF et IE : Liste

Dev
1

Salut la Zone,

Je suis actuellement en train de finaliser le template de mon blog sous WP et je constate une différence d’affichage entre FF et IE.

Classique…

Cependant, mon code me paraît tout à fait correct et je ne comprends pas pourquoi la sidebar s’affiche parfaitement sur FF mais présente des bugs au niveau des

et des

  • sous IE.

    Un peu d’aide serait la bienvenue !

    –> http://egonomia.free.fr/

    • 2

    [quote=“Forgaria, post:1, topic: 47068”]Salut la Zone,

    Je suis actuellement en train de finaliser le template de mon blog sous WP et je constate une différence d’affichage entre FF et IE.

    Classique…

    Cependant, mon code me paraît tout à fait correct et je ne comprends pas pourquoi la sidebar s’affiche parfaitement sur FF mais présente des bugs au niveau des

    et des

  • sous IE.

    Un peu d’aide serait la bienvenue !

    –> http://egonomia.free.fr/[/quote]

    C’est là que je réalise qu’il manque la style sheet…

    La voici :

    [quote]/*
    Theme Name: Kwinks
    Theme URI: http://egonomia.free.fr/
    Description: Egonomia’s first original theme.
    Version: 1.0
    Author: Jeremi IOGNA
    /
    body {
    background:#0B0B0B;
    color:#B2B2B2;
    font-family:“Lucida Sans Unicode”, “Trebuchet MS”, “Helvetica”, “Arial”, sans-serif;
    font-size:62.5%; /     Resets 1em to 10px */
    margin:0px;
    padding:0px;
    text-align:center;
    }

    #top {
    background:#FF0000;
    height:5px;
    margin:0px auto;
    padding:0px;
    width:640px;
    }

    #page {
    display:table;
    height:100%;
    margin:40px auto 0px auto;
    padding:0px;
    text-align:left;
    width:640px;
    }

    #logo {
    float:left;
    margin:0px 0px 40px 0px;
    padding:0px;
    }

    a img {
    border:none;
    }

    .menu {
    color:white;
    float:right;
    font-family:“Lucida Sans”, “Trebuchet MS”, “Helvetica”, “Arial”, sans-serif;
    font-size:0.9em;
    font-weight:bold;
    margin:18px 5px 0px 0px;
    padding:0px;
    }

    a {
    color:white;
    text-decoration:none;
    }

    #search_form {
    background:#121212;
    border:1px solid #181818;
    color:#B2B2B2;
    float:right;
    font-family:“Lucida Sans”, “Trebuchet MS”, “Helvetica”, “Arial”, sans-serif;
    font-size:0.9em;
    font-weight:bold;
    margin:12px 0px 0px 10px;
    padding:5px;
    text-align:right;
    width:188px;
    }

    #primary {
    float:left;
    margin:0px 40px 0px 0px;
    padding:0px;
    width:400px;
    }

    h1 {
    color:white;
    font-size:1.2em;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    }

    .post_meta {
    font-size:1.1em;
    }

    .post_text {
    font-size:1.1em;
    line-height:1.8em;
    margin:20px 0px 0px 0px;
    padding:0px;
    }

    p {
    margin:10px 0px 0px 0px;
    padding:0px;
    }

    img.post_text {
    margin:0px 0px 10px 0px;
    padding:0px;
    }

    .post_footer {
    background:#121212;
    border-top:1px solid #181818;
    border-bottom:1px solid #181818;
    font-size:1.1em;
    margin:10px 0px 40px 0px;
    padding:5px;
    }

    .post_footer a {
    color:#B2B2B2;
    }

    #up_nav {
    margin:0px 0px 20px 0px;
    padding:0px;
    }

    h3#comments {
    color:#FF0000;
    font-size:1.1em;
    margin:20px 0px 20px 0px;
    padding:0px;
    text-transform:uppercase;
    }

    ol.commentlist {
    list-style:none;
    margin:0px;
    padding:0px;
    }

    .commentlist li {
    font-size:1em;
    line-height:1.6em;
    list-style:none;
    margin:0px 0px 10px 0px;
    padding:0px 0px 10px 0px;
    }

    h3#respond {
    background:#121212;
    border-top:1px solid #181818;
    border-bottom:1px solid #181818;
    color:white;
    font-size:1.1em;
    font-weight:normal;
    margin:20px 0px 20px 0px;
    padding:5px;
    }

    .comment_input {
    margin:0px 0px 10px 0px;
    }

    input {
    background:#121212;
    border:1px solid #181818;
    color:#B2B2B2;
    font-family:“Lucida Sans”, “Trebuchet MS”, “Helvetica”, “Arial”, sans-serif;
    font-size:0.9em;
    font-weight:bold;
    margin:0px;
    padding:5px;
    width:188px;
    }

    .label {
    font-family:“Lucida Sans”, “Trebuchet MS”, “Helvetica”, “Arial”, sans-serif;
    font-size:0.9em;
    font-weight:bold;
    margin:0px 0px 0px 10px;
    padding:0px;
    }

    textarea#comment {
    background:#121212;
    border:1px solid #181818;
    color:#B2B2B2;
    font-family:“Lucida Sans”, “Trebuchet MS”, “Helvetica”, “Arial”, sans-serif;
    font-size:0.9em;
    font-weight:bold;
    margin:10px 0px 0px 0px;
    padding:5px;
    width:388px;
    }

    input#submit {
    color:white;
    font-size:1.1em;
    font-weight:normal;
    margin:10px 0px 0px 0px;
    padding:5px;
    width:400px;
    }

    #down_nav a {
    color:#B2B2B2;
    font-size:1.1em;
    }

    #sidebar {
    float:right;
    margin:0px;
    padding:0px;
    text-align:left;
    width:200px;
    }

    h2 {
    background:#121212;
    border-top:1px solid #181818;
    border-bottom:1px solid #181818;
    color:white;
    font-size:1em;
    margin:0px;
    padding:5px 5px 5px 10px;
    text-transform:uppercase;
    }

    ul {
    margin:0px 0px 20px 0px;
    padding:0px;
    }

    li {
    border-bottom:1px solid #181818;
    font-size:1em;
    list-style:url(http://egonomia.free.fr/wp-content/themes/Kwinks/images/sidebar_bullet.jpg) inside;
    margin:0px;
    padding:3px 0px 3px 10px;
    }

    #who {
    border:none;
    font-size:1em;
    line-height:1.6em;
    list-style:none;
    padding:10px 10px 0px 10px;
    }

    #syndication_margin {
    margin:0px 0px 5px 0px;
    }

    #syndication {
    border:none;
    font-size:1em;
    list-style:none;
    padding:5px 10px 0px 10px;
    }

    #recent-comments {
    border:none;
    list-style:none;
    margin:0px;
    padding:0px;
    }

    h2.widgettitle {
    list-style:none;
    }

    .recentcomments {
    list-style:none;
    }

    #categories-1 {
    border:none;
    list-style:none;
    margin:0px;
    padding:0px;
    }

    #archives {
    border:none;
    list-style:none;
    margin:0px;
    padding:0px;
    }

    #links {
    border:none;
    list-style:none;
    margin:0px;
    padding:0px;
    }

    .spacer {
    clear:both;
    }

    #footer {
    border-top:1px solid #181818;
    margin:40px 0px 20px 0px;
    padding:20px 0px 0px 0px;
    text-align:center;
    }[/quote]

    • 3

    puis-je suggérer 3 images : ce que tu veux, et ce que tu as (ff et ie) ?
    parceque perso j’ai pas ie.

    4

    [quote=“fser, post:3, topic: 47068”]puis-je suggérer 3 images : ce que tu veux, et ce que tu as (ff et ie) ?
    parceque perso j’ai pas ie.[/quote]

    Mais certainement !

    FF (modèle) :

    IE (bug) :

    5

    Je vois deux problèmes différents, le positionnement de la bullet (un bug de list-style …? je remplacerai par ‹ background ›) et un probleme de selecteur (qui affiche la bullet alors qu’il devrait pas). Je tenterai donc un :

    [code]li{
    list-style-type:none;
    background: transparent url(http://egonomia.free.fr/wp-content/themes/Kwinks/images/sidebar_bullet.jpg) center left no-repeat;
    (…)
    }

    li#recent-comments{
    background:none;
    }[/code]

    Mais le coup de changer le list-style en background ça implique peut etre beaucoup d’autres changements (genre rajouter des background:none).
    Mes 25 roupies :slight_smile:

    6

    [quote=“Stripthis, post:5, topic: 47068”]Je vois deux problèmes différents, le positionnement de la bullet (un bug de list-style …? je remplacerai par ‘background’) et un probleme de selecteur (qui affiche la bullet alors qu’il devrait pas). Je tenterai donc un :

    [code]li{
    list-style-type:none;
    background: transparent url(http://egonomia.free.fr/wp-content/themes/Kwinks/images/sidebar_bullet.jpg) center left no-repeat;
    (…)
    }

    li#recent-comments{
    background:none;
    }[/code]

    Mais le coup de changer le list-style en background ça implique peut etre beaucoup d’autres changements (genre rajouter des background:none).
    Mes 25 roupies :)[/quote]

    Bonne idée.

    Je voulais absolument passer par des bullets classiques mais il semblerait que le hack background soit la seule solution…

    Je vous tiens au courant.

    7

    En fait moi je serais passé par un list-style-image, qui m’a l’air beaucoup plus polyvalent.

    8

    Re,

    Après avoir refarfouillé dans mon code (et optimisé la partie sidebar qui était assez peu élégante niveau code), j’ai quasiment résolu le problème.

    Il reste un tout petit soucis cependant. Sous IE, le titre des blocs contenant des widgets est décalé vers la droite au lieu d’être correctement aligné comme sous FF.

    [code]#sidebar {
    float:right;
    margin:0px;
    padding:0px;
    text-align:left;
    width:200px;
    }

    #sidebar h2 {
    background:#121212;
    border-top:1px solid #181818;
    border-bottom:1px solid #181818;
    color:white;
    font-size:1em;
    margin:0px;
    padding:5px 5px 5px 10px;
    text-transform:uppercase;
    }

    #sidebar ul {
    margin:0px 0px 20px 0px;
    padding:0px;
    }

    #sidebar li {
    list-style:none;
    }

    #who {
    background:none;
    border:none;
    font-size:1em;
    line-height:1.6em;
    padding:10px 10px 0px 10px;
    }

    #syndication_top {
    background:none;
    border:none;
    font-size:1em;
    margin:5px 0px 0px 0px;
    padding:5px 10px 0px 10px;
    }

    #syndication {
    background:none;
    border:none;
    font-size:1em;
    padding:5px 10px 0px 10px;
    }

    .widget ul li {
    border-bottom:1px solid #181818;
    font-size:1em;
    list-style-type:none;
    background:transparent url(http://egonomia.free.fr/wp-content/themes/Kwinks/images/sidebar_bullet.jpg) top left no-repeat;
    margin:0px;
    padding:3px 0px 3px 27px;
    }

    #recent-comments ul li {
    list-style:none;
    padding:3px 0px 3px 10px;
    }[/code]

    Des idées ?

    Merci !

    PS : Pour mémoire, ça se passe ici --> http://egonomia.free.fr/

    9

    Tu peux essayer avec des zoom:1 sur les éléments qui pose problème dans IE6, pour les passer en hasLayout.

    Tu devrais valider ton html, tu as des li qui ne sont pas dans un ul dans #sidebar

    10

    [quote=“cedric, post:9, topic: 47068”]Tu peux essayer avec des zoom:1 sur les éléments qui pose problème dans IE6, pour les passer en hasLayout.

    Tu devrais valider ton html, tu as des li qui ne sont pas dans un ul dans #sidebar

    [/quote]

    Merci pour l’article, je ne connaissais pas !

    Ca me semble toutefois bien compliqué pour recaler une dizaines de pixels…

    Quand au

  • qui ne sont pas dans des
      , c’est tout simplement les widgets de WP qui sont mal foutus. J’ai également tiqué la première fois mais il faut dire que c’est tellement pratique… Et que je compte proposer ce template à la communauté.

      Si tu vois d’autres erreurs, n’hésite pas ! Je suis preneur de toute critique !

      PS : Tu utilises quoi comme log pour coder ? Ca m’a l’air pas mal pratique…

    • 11

    C’est Firebug, une extension pour Firefox.