[HTML/CSS] - Problème d'affichage margin-top: -10px; sous IE [RESOLU]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/CSS] - Problème d'affichage margin-top: -10px; sous IE [RESOLU]

bl@p_psx

Admin G15-france

Voilà, j'ai un petit problème d'affichage sur le site que je suis en train de faire ...

Voilà le topos :

j'ai une news, dans un div et dans ce div, j'utilise une balise H2 pour le titre de la news ( conseiller ici d'un point de vue semantique ) et H3 pour le pied de page.
Jusque là, tout vas bien.

ca donne ca :

Code :

<div class="news">
<h2>Titre news</h2>
<p>
texte de la news
</p>
<h3>pied de news</h3>
</div>

avec , niveau css :

Code :

.news {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0 20px 0 20px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
background-color:#F5FDFF;
margin-left: 150px;
margin-right: 150px;
margin-top: 15px;
margin-bottom: 30px;
}
h2 {
font-size: 0.8em;
width:150px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
padding: 5px 5px 5px 5px;
background-color: #ECD8EA;
font-weight: bold;
margin-top: -10px;
text-align: center;
}
h3 {
font-size: 9px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
padding: 5px 5px 5px 5px;
background-color: #DDF5C7;
margin-bottom: -10px;
font-weight: normal;
}

le probleme, c'est que les "box" H2 et H3 sont cencées être "decalées" vers le haut ou le bas de 10px ( margin-top: -10px et margin-bottom: -10px ).

Ca fonctionne nickel sous FF

mais pas sous IE

est-ce possible de corriger ca ou je doit m'en contenter ??

merci d'avance !

@+

ma page de test : http://step.moultiplayers.net/test.php

Message édité par bl@p_psx le 19-07-2005 à 11:28:53

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

Publicité

FlorentG

Peut-être qu'avec du positionnement relatif, cela marcherait mieux ?

bl@p_psx

Admin G15-france

effectivement, j'y avais meme pas penser ^^

c'est impecable !

par contre, c'est normal qu'IE ne "comprenne" pas les margin negatifs ?

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

FlorentG

Il les comprends, mais il agrandit le conteneur. Sûrement à cause du height qui se comporte comme min-height...

bl@p_psx

Admin G15-france

autre truc bizare, si j'enleve completement les margin-top et margin-bottom de H2 et H3, c'est FF qui par en sucette ..., alors qu'en les laissant à 0 ca fonctionne

Code :

h2 {
position:relative;
top:-10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
width:150px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
padding: 5px 5px 5px 5px;
background-color: #ECD8EA;
font-weight: bold;
margin-top:0;
text-align: center;
}
h3 {
position:relative;
top:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
border: solid 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
padding: 5px 5px 5px 5px;
background-color: #DDF5C7;
margin-bottom:0;
font-weight: normal;
}

merci bien pour l'idée ! j'avais completement zapper

Message édité par bl@p_psx le 19-07-2005 à 11:25:13

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

bl@p_psx

Admin G15-france

t'aurais pas une idée pour centrer le site sous IE
( ca fonctionne en mettant un align: center dans le bosy, mais il faudrais que je reprenne tout mes autres style à cause de l'heritage ) ...

Si ya rien d'autre à faire, je serais bien obligé remarque ...

@+

ps: j'ai tester margin: 0 auto; ca donne rien

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

FlorentG

Si, margin: 0 auto fonctionne. Oublie pas le DOCTYPE, et de virer la déclaration xml

bl@p_psx

Admin G15-france

? le doctype est mis et ok ? non ? et virer la declaration xml ?

je t'avoue que je capte pas bien là ....

edit: je vient de comprendre ... je connaisais pas cette astuce ... ( virer la declaration xml )

merci encore ^^

Message édité par bl@p_psx le 19-07-2005 à 12:49:50

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML/CSS] - Problème d'affichage margin-top: -10px; sous IE [RESOLU]

Sujets relatifs
empecher un retour à la ligne après un <a> [Resolu]	[RESOLU]document.getElementById().innerHTML = <table>
[Résolu] Vbs+excel :(	[VBA] probleme de condition
[RESOLU]affichage bonne identifiant dans tableau	probleme de parser!
probleme de privilége avec PHPMyAdmin	Probleme dans requete sql
[Résolu] contenu de textbox
Plus de sujets relatifs à : [HTML/CSS] - Problème d'affichage margin-top: -10px; sous IE [RESOLU]

Page générée en 0.050 secondes