Discussion :

[Yosko]

Bonjour à tous,

Je rencontre aujourd'hui une petite difficulté pour "skinner" des Panels.
Je sais qu'il existe plusieurs moyens de modifier leur apparence, mais aucun ne semble donner le résultat que je souhaites.

Mon but est de remplir ces 3 points :

1. Avoir des bordures différentes sur les différents côtés (du genre border-width: 0px 2px 1px 2px; ).
2. Séparer le code de la mise en forme (dans des fichiers CSS par exemple)
3. Que ce rendu fonctionne dans IE6 (hélas)

J'ai essayé ceci, qui fonctionne très bien dans Firefox, mais pas dans IE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    <asp:Panel ID="PanelTitle1" runat="server"
        CssClass="panelTitle">
        Contenu de mon Panel
    </asp:Panel>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.panelTitle {
    border-width: 0px 2px 1px 2px;
    border-style: solid;
    border-color: black;
}

IE semble bien prendre en compte le css (il applique les éventuelles marges et autres mises en formes que je lui demande), mais les bordures et background semblent ignorés ou overridés.

J'ai aussi essayé de regarder du côté des propriété du controle aspanel : non seulement je n'y ai pas trouvé la solution, mais en plus cela m'obligerait à mélanger code et mise en forme.

J'ai aussi jeté un oeil du côté des skins, toujours avec un résultat infructueux.

Auriez-vous une idée de la solution ?

[Yosko]

En fait, après avoir refait proprement mes tests, je me rend compte qu'aucune méthode servant à afficher des bordures ou background ne fonctionne sous IE6 (alors que toutes fonctionnes avec Firefox) :

• Propriétés du contrôle Panel (BorderWidth, BorderColor, BorderStyle)
• Les mêmes propriétés appliquées à un skin, lui même appliqué au Panel
• Une classe CSS appliquée au contrôle Panel
• La même classe CSS appliquée au skin

Je suis à cours d'idées, maintenant...
Une piste sur ce qui peut être la cause du problème ? (le premier qui répond IE6, je le mange tout cru, même s'il aura probablement raison...)

EDIT : je sais que la classe CSS est appliquée par IE, puisqu'il prend en compte les autres propriétés, comme la couleur du texte ou son alignement. C'est donc que quelque chose ayant une priorité plus forte remplace mes bordures et backgrounds...

[tortuegenie]

si tu mets la propriete style directement dans le panel, le probleme existe toujours ?

Et certainement IE6 le probleme, mais on peut ecrire un css special pour lui

[calagan99]

J'aurais tendance à te dire d'utiliser ce script pour IE6 puisque même Microsoft dit qu'il faut arrêter de l'utiliser
Cela dit, comme on n'a pas toujours le choix, le mieux est surement d'avoir une CSS spécifique en utilisant ce commentaire conditionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<!--[if IE 6]>
CSS spécifique IE 6
<![endif]-->

[Yosko]

Tout d'abord merci à vous pour ces réponses.

Je viens de trouver une solution à mon problème, que je ne comprend pas vraiment, mais bon : en encapsulant mes panels et autres dans une balise fieldset, le CSS s'est mis à fonctionner correctement même sous IE6. J'ai essayé de voir si un élément de mon CSS pouvait en être la cause, mais n'ai rien trouvé. Pourquoi un fieldset ? Je n'en sais rien...

@tortuegenie : oui j'avais essayé (j'avais oublié de le préciser, désolé), et le problème était le même.

@calagan99 : le problème est en fait un peu plus compliqué que ça. Que le CSS soit dans mon fichier CSS spécifique IE6, entre les balises <!--[if IE 6]> ou simplement indiqué comme mon fichier CSS classique, il est ignoré, ou plutôt remplacé par quelque chose qui semble avoir la priorité là dessus.

Pour le coup du "IE6 no more" : je suis bien d'accord avec toi, mais travaillant pour une grosse société à l'inertie importante, le passage vers un autre browser (IE8 en l'occurence) ne se fait pas très vite, et je suis bien obligé de trouver une solution pour IE6 du coup ^^'