Bug CSS

[Geoff95]

Salut,

J'ai un petit soucis avec mon thème, j'ai l'image de la "puce" () du menu catégorie qui n'apparait pas sur IE, mais apparait sur Chrome et sur Firefox. J'ai utilisé firebug sur mon navigateur Chrome, j'ai regardé le CSS et tout va bien (logique), j'ai fait de même sur IE, et là dans le CSS, je m'apperçois qu'une ligne n'est pas chargée (celle de l'image de la puce).

div#categories_block_left ul.tree li {
   border:none;
   padding-left:25px;
   margin-left:0px;
   font-weight:bold;
   font-size:13px;
   line-height:24px;
   margin-top:2px;
   background: url('../img/puce_ddlx.png')no-repeat 0px 0px!important;
   border-bottom : 1px solid #0669B2;
}

la ligne qui n'est pas chargée est la suivante:

background: url('../img/puce_ddlx.png')no-repeat 0px 0px!important;

Une idée pourquoi?

Edit:
Il semblerait que sur IE, le css qui défini l'apparence de la page "sitemap.php" (code ci-dessous) rentre en conflit avec celui du menu (ci-dessus). Une idée pourquoi?

div.tree_top {
   background:url('../img/sitemap-top.gif') no-repeat -1px -3px; 
   padding-left:24px;
   padding-bottom:5px;
   padding-top:3px;
}
ul.tree, ul.tree ul{ list-style-type:none; }

ul.tree li{
   padding-left:1.2em;
   border-left:1px gray dotted;
   background:url(../img/sitemap-horizontal.gif) no-repeat left 10px;
   margin-left:1em;
}

ul.tree a{ padding-left:0.2em; }
ul.tree a.selected{ font-weight:bold; }

ul.tree li.last{
   background:url(../img/sitemap-last.gif) no-repeat -12px -2px;
   border:none;
}

[hoolay]

Bonjour !

Peut être à cause du hack CSS "!important" qui permet justement de différencier IE des autres navigateurs?

Cordialement,

[Geoff95]

Salut,

J'y avais pensé, mais même en la retirant rien ne change la balise reste invisible pour IE

[hoolay]

ok, je me suis mal exprimé,

en fait, les propriétés déclarés ne sont appliqués qu'aux autres navigateurs que IE,
il faut donc rajouter la propriété déstinée à IE c'est à dire :

background: url('../img/puce_ddlx.png');
background: #fff url('../img/puce_ddlx.png')no-repeat 0px 0px!important;

(attention à bien mettre la ligne qui ne contient que url('../img/puce_ddlx.png') avant l'autre)

[Geoff95]

Merci, il y a du mieux, cependant sur IE, les puces sont toutes sur le même niveau, c'est à dire, que les puces des sous-catégories sont au même niveau que les puces des catégories (idem pour les puces de sous-sous catégories qui se retrouvent au même niveau que les puces des catégories, donc toutes les puces sont alignées à gauche)

je pense donc que ça correspondrait à ces deux règles:

div#categories_block_left ul.tree li ul li{
   padding-left:25px;
   background:none;
   font-size:11px;
   font-weight:normal;
}
div#categories_block_left ul.tree li ul li ul li{
   padding-left:15px;
   font-size:9px;
}

Mais avec firebug sous IE, tout semble correspondre.

À la différence peut être que sur IE, avec firebug, le menu m'est présenté de cette manière:

>

 
Alimentation
</pre>
<ul>

Distributeurs


Nourriture

</ul>
<br

et sur Chrome de cette manière:

>


Alimentation
</pre>
<ul>

Distributeurs


Nourriture

</ul>
<br

[hoolay]

là on arrive aux limites du template. ce que je ferais pour que cette fonctionnalité soit disponible sous IE, je mettrais l'image en tant que "puce" plutôt que en background.


-> list-style-image : url("../img/puce_ddlx.png");

[Geoff95]

Salut.

Bon il y a un petit mieux sous IE, mais ça se répercute sous Chrome et FireFox. Sous IE les puces prennent le bonne alignement, cependant, elle sont "un menu" trop à gauche et une demi-ligne trop hautes. Sous FF et Chrome, même constat, sauf que les puces sont dupliquées, il y a le menu correcte, et les puces non correctes.

[hoolay]

essayez de rajouter : la propriété
list-style-position:inside

et désactivez l'ancienne image du background

Mais sans voir le code... difficile de vous aider plus !

[Geoff95]

Oui, pardon, donc voilà le code:

div#categories_block_left ul.tree{ padding-left:0.5em; }
div#categories_block_left ul.dhtml{ display:none; }
div#categories_block_left ul.tree li{
   border:none;
   padding-left:25px;
   margin-left:0;
   font-weight:bold;
   font-size:13px;
   line-height:24px;
   margin-top:2px;
   list-style-image : url(”../img/puce_ddlx.png”);
   list-style-position:inside;
   border-bottom:1px solid #0669B2;
   margin-left: 0em;
}
div#categories_block_left ul.tree li ul li{
   padding-left:25px;
   background:none;
   font-size:11px;
   font-weight:normal;
}
div#categories_block_left ul.tree li ul li ul li{
   padding-left:15px;
   font-size:9px;
}

Avec ce nouveau code, les puces disparaissent aussi bien sur IE que sur FF/Chrome

[hoolay]

bidouillez un peu votre css, sans oublier d'utiliser le hack !important si nécéssaire.
Mais le plus simple est d'utiliser un thème fait pour ça...

[Geoff95]

Le thème a été téléchargé et acheté sur votre site web (d'après votre signature, vous travaillez chez DDLX), il était indiqué qu'il était compatible IE, FF, Chrome, Opera, Netscape etc. Donc c'est un thème "fait pour ça".

[hoolay]

et il l'est compatible.
Par contre rien ne dit que les puce sont censées êtres alignée comme vous le souhaitez.
Il n'y a pas de BUG, c'est vous qui souhaitez l'améliorer.
moi je voulais juste rendre service...

[hoolay]

Je suis allé sur votre site, je vois des ?? autour de l'url, problème d'encodage. J'ai aussi donné l'url au hasar, vérifiez bien que l'image puce_ddlx existe.

url("�../img/puce_ddlx.png�")

[Geoff95]

Je ne vous reproche absolument rien, donc désolé si vous avez mal pris mon précédent post.

Seulement, pour moi, afficher les puces d'une manière sur tous les navigateurs sauf un, et afficher les puce de la page "sitemap" sur l'autre navigateur, j'appel ça un bug.

Je n'ai rien touché au CSS avant les modifications que vous avez données. Ceci étant dit, comme vous l'avez dit, rien ne me permet d'affirmer que la manière dont les puces s'affichent sur tous les navigateurs soit la "bonne" manière, donc mon poste pourrait effectivement être considéré comme étant une tentative d'amélioration du template.

[Geoff95]

Si elle s'affiche sur les autres navigateur, elle devrait exister? De plus j'ai peut être oublié de préciser, que j'ai aussi été voir la démo du template avec IE sur votre site web, et le même "bug" apparait sur votre version, donc je pense pas que cela vienne du template que je possède.

[hoolay]

Bonjour,


créez une sauvegarde de votre global.css avant toute chose.
remplacez les classes du même nom par le code css qui suit
remplacez la puce par le fichier que j'ai joint au post

vers ligne 1102 ->

/*div.block ul { list-style: none; }*/

div.block ul.tree li {
padding-left:0;
list-style-image: list-style-image:url('../img/puce_ddlx.png');
}

div.block li {
padding-bottom: 15px;
list-style-position: inside;
}

et vers ligne 1425 ->

div#categories_block_left ul.tree li {
border:none;
font-weight:bold;
font-size:13px;
background: none;
}
div#categories_block_left ul.tree li ul li{
padding-left:15px;
background:none;
font-size:11px;
font-weight:normal;
}

Cordialement,

[Geoff95]

Salut,

Tout d'abord merci à vous de continuer à m'aider,

Voilà comment est désormais mon CSS:

-Pour le div.block

div.block h4 a { color: #fff; }
/*div.block ul { list-style: none; }*/
div.block ul.tree li { padding-left:0; list-style-image: list-style-image:url('../img/puce_ddlx.png');}
div.block a:hover { text-decoration: underline; }
#left_column div.block .block_content a.button_large, #right_column div.block .block_content a.button_large { margin:0 0 0 -3px; }
div.block .block_content {

   padding:0.5em 1em 10pt;
   color : #0669B2;
   background: #F4F8FC;
   border : 1px solid #71A9D3;
   min-height:20px;

}
div.block li { padding-bottom: 15px; list-style-position: inside; }

div.block a {
   color: #0669B2;
   text-decoration: none;
}

-pour le div#category

/* Block categories */
div#categories_block_left ul.tree{ padding-left:0.5em; }
div#categories_block_left ul.dhtml{ display:none; }
div#categories_block_left ul.tree li { border:none; font-weight:bold; font-size:13px; background: none;
}
div#categories_block_left ul.tree li ul li{ padding-left:15px; background:none; font-size:11px; font-weight:normal;
}

div#categories_block_left ul.tree li ul li ul li{
   padding-left:15px;
   font-size:9px;
}
div#categories_block_left ul.tree a{
   padding-left:0px;
   color:#0669B2;
}
div#categories_block_left ul.tree a:hover{
   text-decoration : none;
   color:#A7CB49;
}
div#categories_block_left ul.tree a.selected{
   color:#0669B2;
   font-weight: bold;
}
div#categories_block_left span.grower{
   display:block;
   float:left;
   background-position: 0px 3px;
   background-repeat: no-repeat;
   width:7px;
   height:15px;
   margin: 0 0 0 -10px!important;
   margin: 0 0 0 -6px;
   padding: 0;
}
div#categories_block_left span.OPEN { background-image: url('../img/icon/transparent.png'); }
div#categories_block_left span.CLOSE{ background-image: url('../img/icon/transparent.png'); }

Et voici ce que j'obtient avec vos nouveaux code, aussi bien sur IE que les autres navigateurs.
Les puces rondes qui apparaissent sur les block de nouveaux produits et de liens ne sont habituellement pas présentes.
Merci.

[Maury Girard]

Geoff95 & hoolay

Il serait plus judicieux que vous vous puissiez vous parler en MP ou sur un messenger
D'ailleurs ,hoolay il me semble que sur votre site, vous avez un module Live zilla pour apporter le support
de vos clients.
(http://shop.ddlx.org/livez/livezilla.php)

Ici cela concerne:
LES THEMES GRATUIT
Contributions : proposition de *thèmes gratuits* et questions les concernant.

Sachant que ce Template de DDLX est payant (dont celui ci )-->Il n'a rien à faire idans cette partie du forum

Je ne fais pas mon rabat-joie mais un minimum de bon sens, pour avoir plus d'homogénéité sur ce forum

[hoolay]

Bonjour,

Maury Girard, Votre remarque est tout à fait pertinente,
Geoff95, je vous invite à nous contacter.

Cordialement,