[Résolu] Margin négatif sous Internet Explorer

Bonjour,
voici mon problème :
sur cette page, chaque titre "<h3>" a un petit "nuage" sur son côté gauche.

J'ai été contraint d'utiliser une marge négative, car tout ceci est contenu dans la <div> grise, et il faut en sortir.

Le problème vient du fait qu'Internet Explorer me coupe tout ce qui est négatif, que ce soit du texte, ou, comme ici, une image de fond.

Voici également le code concerné :

div#contenu {
     margin: 0 20px;
     padding: 10px;
     height: auto !important;     /* Hack IE */
     height: 496px;               /* Hack IE */
     min-height: 496px;
     background-color: #afafaf;
}

h3 {
     margin-left: -31px;
     padding-left: 30px;
     padding-top: 5px;
     height: 19px;
     font-size: 12px;
     color: #fff;
     background-image: url(images/nuageIE.png);
     background-repeat: no-repeat;
     background-position: 0 0;
}

Merci d'avance!
Modifié par pierre6020 (20 Jul 2005 - 10:46)

Tu peux utiliser un positionnement relatif qui normalement va fonctionner nickel :

un exemple

h3{
position: relative;
left: -10px;
}

Edit :

Petit complément d'information: un positionnement relatif positionne l'élément par rapport au coin supérieur gauche de la position qu'il occupait lorsqu'il n'était pas positionné, sa position dans le flux donc.
Modifié par TriadPtale (20 Jul 2005 - 10:44)

Moins de trois minutes pour résoudre le problème, bravo, et un grand merci à toi, TriadPtale!

Mais un positionnement n'est-il pas relatif par défaut?

Edit : Bon, je vais relire ceci, j'ai pris la sale habitude de n'utiliser que des margin pour mes positionnements.
Modifié par pierre6020 (20 Jul 2005 - 10:49)

Salut

pierre6020 a écrit :

Mais un positionnement n'est-il pas relatif par défaut?

Non !
Il n'y a pas de positionnement par défaut, par défaut les éléments sont dans le flux de la page, c'est à dire dans l'ordre où ils sont dans le code source en influant les uns sur les autres en les faisant passer en dessous à chaque fois (pour les éléments de type block).

<edit>Grilled TriadPtale yek yek yek </edit>
Modifié par Olivier (20 Jul 2005 - 10:50)

De rien

Par défaut l'élément est dit "non positionné" et il prend sa place normale dans le flux (selon que ce soit un élément block ou inline). Il faut alors le positioner avec des marges par exemple.

Si on ne précise des valeurs de top , left, bottom ou right, l'élément devient implicitement positioné en absolu sans qu'on ait besoin de préciser position: absolute; . Il est alors positioné par rapport à la page (complète, la fenetre du navigateur donc) ou par rapport au premier élément parent lui-même positioné (un élément est dit positionée s'il est en absolu ou en relatif).

a écrit :
j'ai pris la sale habitude de n'utiliser que des margin pour mes positionnements.

Ce n'est pas du tout une mauvaise habitude, c'est même franchement souhaité.

Il vaut nettement mieux ça que l'erreur classique du débutant qui commencent le positionnement en css et qui met tout en absolu...

En gros pour le positionnement on fait dans l'ordre (de plus en plus de "complexité":

- pas de positionnement, placement dans le flux
- on ajuste les élémements avec des marges
- on fait flotter un/des éléments (+ marges)
- on positionne en relatif
- on positionne en absolu

Bon ce n'est pas une règle absolue bien sur

D'accord, je voulais dire par là qu'il faut que je prenne l'habitude de regarder du côté des autres positionnements quand un problème devient difficile à résoudre, un simple essai m'aurait permis de régler ce problème.

Merci pour tout!