Skip to main content Help Control Panel

Login   A+   A-

Community «   Le forum «   Soupçons de bogues «  

bug d'affichage dans la 7.12 [Solved]

boutons
A solution has been made available

Solution Manager: ThierryP

Issue description

Certains boutons sont disproportionnés et n'ont pas le look aqua et ce sur IE6 WinXP et Safari MAC OSX.5 (leopard).

Parfois, les boutons "aqua" apparraissent avec un fond différent du fond de la page (ex : fond de page blanc et fond de bouton bleuté, donc intégration bof bof)

Files

Bouton sous winXP IE6.jpg 8,328 bytes, 101 downloads
Edited by Macnana on Jan. 8
Zoom
Button drop.gif 3,227 bytes, 134 downloads
Edited by ThierryP on Jan. 3
Zoom

2 files · Zip all files

Comments

ThierryP
avatar
from Nice, Drap
Associate, 1136 posts

on Jan. 2

Bonsoir,

Tu as noté un bug ici ou sur un autre serveur ?

J'ai noté quelques erreurs avec Opéra, mais rien qui ne se répare pas en modifiant le css...

(tiens, le bouton Aperçu n'est pas pris en compte par le disgn aqua...)

SEO et webmastering VDP-Digital - Skins pour Yacs : Yordpress
Macnana
avatar
329 posts

inspired from ThierryP on Jan. 3

ThierryP :

Ici, sur IE6, j'ai un encadré bleu ciel autour des bouton aqua.

sur mon site en YordPress, les boutons sont énormes et type windows 98 sous safari (osx.5) et IE6 (Win XP)

Suis pas une base en CSS

ThierryP
avatar
from Nice, Drap
Associate, 1136 posts

on Jan. 3

Pour le cadre bleu autour du bouton avec IE6 c'est hélas normal, ce navigateur ne gérant pas les fichiers .png (PNG24) du coup, au lieu d'afficher la transparence, il affiche un contour bleuté bien inesthétique...

Une solution consiste à changer le fichier qui gère le bouton (button_drop.png) en gif... (voir fichier joint) Par contre, l'affichage ne sera parfait que sur fond blanc...

Pour Yordpress, la version 5.2 qui prend en charge les boutons aqua est en cours (commencé hier :p )

SEO et webmastering VDP-Digital - Skins pour Yacs : Yordpress

button-drop.gif
Bernard
avatar
from nearby-an-airport
Associate, 6581 posts

on Jan. 7

J'ai aussi Safari sous Mac OSX 10.5, et je n'ai pas vu de problème particulier avec les boutons "aqua". Tu aurais une page exemple à me mettre sous la dent ?
Macnana
avatar
329 posts

on Jan. 7

Bernard : bouton

 

je crois que c'est un soucis de css

j'ai le même genre d'affichage au boulot sur IE6 winXP pour certains boutons.

 

screenshot demain car pas de boulot aujourd'hui pour cause de grève de transport en commun  

ThierryP
avatar
from Nice, Drap
Associate, 1136 posts

on Jan. 7

Il faut que tu ajoute ces lignes dans ton css : 

#main_panel a.button { /* a link that mimic a form button --
    [button]url[/button], [button=label]url[/button] */  
    display: -moz-inline-box; /* mandatory for firefox 2 */
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 0;
    font-style: normal;
    text-decoration: none;
    color: #2e523b;
    line-height: 0;
    background: transparent url('images/button_drop.gif') 0 0 no-repeat;
    height: 30px;
    margin: 0 6px 0 0;
    padding: 0 10px 0 0;
    vertical-align: middle;
}

#main_panel a.button span {
    display: inline-block;
    cursor: pointer;
    border: none;
    font-family: "Arial" !important;
    font-size: 12px !important;
    font-style: normal;
    white-space: nowrap;
    letter-spacing: 0 !important;
    color: #222;
    line-height: 16px;
    background: transparent url('images/button_drop.gif') 100% 0 no-repeat;
    height: 30px;
    margin: 0 -16px 0 10px;
    padding: 8px 20px 0 10px;
    vertical-align: middle;
}


#main_panel span.button { /* a button in a form */
    display: -moz-inline-box; /* mandatory for firefox 2 */
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 0;
    font-style: normal;
    text-decoration: none;
    color: #2e523b;
    line-height: 0;
    background: transparent url('images/button_drop.gif') 0 0 no-repeat;
    height: 30px;
    margin: 0 6px 0 0;
    padding: 0 13px 0 0;
    vertical-align: middle;
}

#main_panel span.button button {
    display: -moz-inline-box;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-family: "Arial" !important;
    font-size: 14px !important;
    font-style: normal;
    white-space: nowrap;
    letter-spacing: 0 !important;
    color: #222;
    line-height: 2em; /*Higt value for Opera 9.0 compatibility*/
    background: transparent url('images/button_drop.gif') 100% 0 no-repeat;
    height: 30px;
    margin: 0 -16px 0 10px;
    padding: 0 20px 0 10px; 
    vertical-align: text-top;
}

#main_panel a.button:hover,
#main_panel span.button:hover {
    background-position:0 -60px;
    color:#fff;
    text-decoration:none;
}

#main_panel a.button:hover span,
#main_panel span.button:hover button {
    background-position:100% -60px;
    color:#fff;
}

#main_panel a.button:active span,
#main_panel span.button:focus button {
    color:#444;
}


En plus du fichier image pour le bouton aqua...

Ca devrait tourner comme sur des boutonettes,
non ?

SEO et webmastering VDP-Digital - Skins pour Yacs : Yordpress

6 comments ·  Add a comment

Rate this page
Posted by Macnana on Jan. 1, page edited by Christian on May 8, (popular)