28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un chevauchement sous Internet Explorer alors qu'il n'y a aucun souci sous Firefox. Je pense que ce n'est pas très dur à résoudre mais j'avoue nager encore pas mal avec les propriétés CSS.

L'adresse de la page :
http://www.serviteursdejesusetdemarie.org/actu/rubrique.php3?id_rubrique=24
On voit le bloc de milieu qui glisse sous les blocs de droite alors qu'ils sont respectivement dans 2 colonnes de tableau différentes. (oui, je sais, c'est pas terrible, j'en suis encore à me convertir des tableaux aux div)

Le code CSS correspondant au grand bloc du milieu :

#contenu {margin: 0px 0px 0px 0px; padding:0px 14px 0px 14px;}

#haut {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
#haut-hg {margin:0px; padding:0px;}
#haut-hd {margin:0px; padding:0px;}
#haut-bg {margin:0px; padding:0px;}
#haut-hd {margin:0px; padding:0px;}
#haut-contenu {margin:0px; padding:8px 8px 6px 8px;}
img.logo-rubrique {margin:0px 20px 0px 0px;}
#haut-contenu h2 {color:#fff; font-family: Georgia, Times New Roman, Times, serif;}
#haut-contenu h2 a {color:#fff; font-family: Georgia, Times New Roman, Times, serif;}
.titre-rub-en-cours {font-size:1.5em; font-family: Georgia, Times New Roman, Times, serif;}
#rub-texte {font-size:0.75em; color:#fff; font-weight:bold; font-family: Arial, Helvetica, sans-serif;}
#rub-texte a {color:#fff;}
#rub-url {font-size:0.9em; color:#fff; font-weight:bold; font-family: Arial, Helvetica, sans-serif;}
#rub-url a {color:#fff;}

#bas {margin:0px; padding:0px; border-style:solid; border-width:2px; border-top-width:0px;}
#separateur-bas {width:2px; margin:0px; padding:0px; border:none;}
.chaque-cellule {margin: 0px; padding: 10px 20px 10px 20px; border:none;}


Le code CSS des blocs de droite :

#messagenl {font-size:0.8em; color:#cb5513; background-color:#f7f4ed; border:none; margin:1px; padding:0px;}
#newsletter {text-align:center; margin:0px; padding:1px; background-color:#cb5513;}
#newslettercontenu {text-align:left; margin:0px; padding-top:2px; padding-right:4px; padding-bottom:4px; padding-left:4px; background-color:#f7f4ed;}
#newslettercontenu form {margin:0px; padding:2px; text-align:right;}
#newslettercontenu #formnl input {font-size:0.59em; color:#907D61; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; background-color:#f7f4ed; border:1px solid #cb5513; margin:1px 0px 1px 0px; padding:1px;}
#newslettercontenu #formnl select {font-size:0.59em; color:#907D61; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; background-color:#f7f4ed; border:1px solid #cb5513; margin:2px 0px 1px 0px; padding:1px;}
#newslettercontenu #formnl input.valider {color:#cb5513; font-family:Verdana, Arial, Helvetica, sans-serif; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding:0px; border:none; background-color:#f7f4ed; font-weight: bold;}
#newslettercontenu #formnl input:hover.valider {color:#F19A1B; cursor:pointer;}


#prier {text-align:center; margin:5px 0px 0px 0px; padding:1px; background-color:#cb5513;}
#date {font-size:0.65em; color:#fff; font-weight:normal; text-align:center; margin:0px 0px 1px 0px; padding:0px;}
#priercontenu {text-align:left; margin:0px; padding-top:2px; padding-right:4px; padding-bottom:4px; padding-left:4px; background-color:#f7f4ed;}
#priercontenu h4 {font-size:0.65em; color:#907d61; font-family: Arial, Helvetica, sans-serif; margin: 2px 1px 3px 1px; padding: 0px 2px 2px 2px; font-weight:bold;}
#priercontenu h4 a {color:#cb5513; text-decoration:none; font-family: Arial, Helvetica, sans-serif;}
#priercontenu h4 a:hover {color:#f19a1b;}
a.audio {background-image: url(/actu/squelettes/autres/images/haut-parleur.gif); background-repeat: no-repeat; background-position: left; padding-left: 9px;}
a:hover.audio {background-image: url(/actu/squelettes/autres/images/haut-parleur-over.gif); background-repeat: no-repeat; background-position: left; padding-left: 9px;}
a.intention {background-image: url(/actu/squelettes/autres/images/fleche-intention.gif); background-repeat: no-repeat; background-position: left; padding-left: 10px;}
a:hover.intention {background-image: url(/actu/squelettes/autres/images/fleche-intention-over.gif); background-repeat: no-repeat; background-position: left; padding-left: 10px;}


#boutique {text-align:center; margin:5px 0px 0px 0px; padding:1px; background-color:#cb5513;}
#boutiquecontenu {text-align:center; margin:0px; padding-top:2px; padding-right:4px; padding-bottom:4px; padding-left:4px; background-color:#f7f4ed;}