Webmaster Hub > fieldset et CSS : background-color

Version complète: sur le forum Webmaster Hub : fieldset et CSS : background-color

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

K-ZimiR

mardi 28 décembre 2004 à 16:17

Bonjour à tous.

Je suis en train de réaliser un formulaire et j'utilise pour ce faire les fieldset.
Je style mon fieldset de la façon suivante :

CODE

form fieldset {
     padding: 1em;
    background: #eef;
    border: 1px solid #4475ce;
    margin: 0 0 15px 15px;
    width: 450px;
    display: block;
}

form fieldset legend {
     padding: 4px;
    border: 1px solid #4475ce;
    background:#4475ce;
    color: #fff;
    margin-bottom: 10px;
}

form label {
     display:inline;
    width: 120px;
    float:left;
    margin: 3px 0 3px 0;
}

Le rendu sous Firefox est impec, mais sous internet explorer j'obtiens un laid dépassement de la couleur de fond :

Quelqu'un connait-il une solution ?

Merci.

K-ZimiR

lundi 3 janvier 2005 à 14:34

Bon, malheureusement je n'ai pas trouvé d'autre solution que de ne pas utiliser la balise <legend> dans le <fieldset>

Monique

lundi 3 janvier 2005 à 16:07

Bonjour,

C'est malheureusement une des mauvaises interprétations de IE

Et je n'ai pas encore trouvé de solution satisfaisante.

Attention, si tu n'utilises pas l'émément legende, ta page y perd en accessibilité

K-ZimiR

lundi 3 janvier 2005 à 16:20

CITATION(Monique @ lundi 03 janvier 2005, 16h07)

Attention, si tu n'utilises pas l'émément legende, ta page y perd en accessibilité

J'en ai bien conscience, mais ma direction ne tolérera pas que je mette des formulaires en ligne avec des aplats de couleurs qui dépassent !! c'est un coup à me faire flageller sur la place publique

Je dois malheureusement faire un compromis.

Monique

lundi 3 janvier 2005 à 17:25

Je viens de trouver une proposition de solution sur la liste des Pompeurs (le 30/12/2003 par NeoKoD) :

CITATION

En descendant pour IE le top du fieldset d'1em en position relative et
en relevant le top de la legende d'1em en relative :

CODE

fieldset {
position : relative;
top : 1em;
padding : 0 0.5em 1em 0.5em;
background-color : #CCC;
}
html>body fieldset {
padding-top : 1em;
top : 0;
}
legend {
position : relative;
top : -1em;
padding : 0.4em;
}

Je n'ai pas testé

K-ZimiR

lundi 3 janvier 2005 à 17:32

hé bien merci beaucoup Monique et merci à liste des Pompeurs

Je confirme que cette solution FONCTIONNE !!

[edit] pour cause d'ortograffe

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.