28173 sujets

CSS et mise en forme, CSS3

Il y a quelque chose qui m'echappe[resolu]

bonjour,

volià mon but est de centrer un prix dans un bloc en utilisant le padding.
J'utilise le padding-top pour faire descendre mon prix.
jusque-là, pourquoi pas Smiley cligne
Le problème c'est que cete tehnique à faire grandir mon bloc sur IE!!!
il me semblait que sur IE, le paramètre height détermine la taille un fois pour toutes quelque soient les padding...
Soit j'ai raté un wagon, soit j'en ai raté 2 Smiley langue

merci d'avance pour votre aide.

Au fait voici mes codes :

XHTML


<div class="prix">
300
</div>


CSS

.prix
{
width: 50px;
height: 64px;
border: 1px solid #000000;
float:left;
text-align:center;
color:white;
font-weight: bold ;
background-color: :#868486 ;
margin-left:3px;
padding-top:30px;
}

Modifié par samb01 (18 Jan 2006 - 00:23)
Bonsoir,

Confusions diverses et variées... Smiley cligne
- si la boîte s'agrandit lorsqu'on applique le padding, c'est qu'IE6.0 est en mode de rendu strict, et qu'il n'applique justement pas le modèle de boîte Microsoft. Ce comportement est celui des navigateurs conformes à CSS2.x : dimension apparente = dimension spécifiée + padding + bordures.
- pour centrer verticalement à l'aide des padding: ne pas indiquer de valeur de height, justement. Laisser la hauteur se déterminer à partir de taille de la police de caractère et de la valeur donnée aux paddings verticaux.
Modifié par Laurent Denis (16 Jan 2006 - 22:00)
Ah bon!
tu es en train de me dire que IE 6 se comporte comme firefox si j'ai bien compris. Bizarre, je n'en ai pas l'impression...
Il va donc falloir que je telecharge IE 5 pour faire mes test alors?
Reprenons Smiley cligne :

Deux modèles de boîte:
- box model CSS2 : width: 64px et padding-top:30px => hauteur apparente de 94px
- box model Microsoft : width 64px et padding-top: 30px => hauteur apparente de 64px

deux modes de rendu possibles dans IE6.0
- IE6.0 en mode de rendu strict => box model CSS2, comportement identique à celui de FF, Opera, Safari
- IE6.0 en mode de rendu quirks => box model Microsoft, comportement identique à celui d'IE5.5 et IE5.0 Windows

- DTD incomplète, ou prologue XML, ou commentaire HTML avant la DTD => IE6.0 en mode de rendu quirks
- DTD complète, rien avant => IE6.0 en mode de rendu strict
l'ideal serait donc que je rende IE 6 en mode quirks.
Savez-vous où cela se paramètre?
je dois par contre t'avouer que DTD, je ne sais pas du tout ce que c'est. Smiley confused
mais pour ça je ferai une recherche sur Google.
En tous cas, merci pour toutes ces infos. Smiley ravi
Bonjour samb01.
samb01 a écrit :

je dois par contre t'avouer que DTD, je ne sais pas du tout ce que c'est.

DTD => DOCument TYPE Definition => DOCTYPE
samb01 a écrit :

l'ideal serait donc que je rende IE 6 en mode quirks.

Non non ! Surtout pas ! Pourquoi basculer IE dans le mode de rendu erronné de Microsoft ? IE6 gère très bien le modèle de boîte standard, suffit d'utiliser le commentaire conditionnel pour faire les correctifs pour les versions 5 d'IE. Ou encore, utiliser un « workaround » qui consiste à ne pas assigner à la fois un width ou un height en même temps qu'une marge, bordure ou padding. À la place, assigner la marge, bordure ou padding au conteneur.
samb01 a écrit :

Savez-vous où cela se paramètre?

Comme Laurent Denis l'a expliqué, IE6 passe en mode « quirk » dans les contextes suivant.

DTD incomplète :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

prologue XML :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

commentaire HTML avant la DTD :

<!-- Je suis un commentaire HTML avant la DTD -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Voilà.
Modifié par Stephan (17 Jan 2006 - 01:22)
Administrateur
Laurent Denis a écrit :
Confusions diverses et variées... Smiley cligne
- si la boîte s'agrandit lorsqu'on applique le padding, c'est qu'IE6.0 est en mode de rendu strict, et qu'il n'applique justement pas le modèle de boîte Microsoft.

Oups, ma phrase a été tronquée Smiley murf
Je voulais écrire : "ah tiens, un modèle de boite microsoft qui n'est pas utilisé ici, contrairement à l'usage fréquent" Smiley langue
Sujet clos
Aller à