Problème de centrage du bloc sur IE

[Obiwan Kenoobie]

Bonjour,

Je rencontre un problème lors de l'affichage sur IE 5 et 6 du contenu de ma page en CSS. En effet, l'objectif est d'avoir le bloc centré, ce qui fonctionne parfaitement sur l'ensemble des autres navigateurs, mais qui apparemment n'est pas pris en compte par IE, qui affiche le bloc sur la gauche...

Quelqu'un pourrait-il me renseigner sur la manière de remédier à ce problème? (le but étant de pouvoir garnatir le même affichage "centré" sur tous les navigateurs principaux (IE, Firefox, Opéra, Safari)

D'avance merci pour vos réponses!

Voici le code actuellement utilisé :

CODE

* {margin: 0; padding: 0;}

body {

background: #000000 url(img/bg.jpg);

color: #000000;

font: normal 62.5% sans-serif;

padding: 2% 0;

}

a {color: #642;}

a:hover {color: #963;}

big {font-size: 1.1em;}

h1,h2,h3 {color: #442; padding: 8px 0 2px;}

h1 {font: normal 2.4em serif,sans-serif;}

h1 a {text-decoration: none;}

h1 a:hover {text-decoration: underline;}

h2 {font: normal 1.6em serif,sans-serif;}

h3 {font: bold 1.2em serif,sans-serif;}

blockquote {

background: url('img/quote.gif') no-repeat;

display: block;

font: normal 1.1em Georgia,serif;

padding-left: 14px

}

form,table {margin-bottom: 1.2em;}

img {border: none;}

label {display: block;}

li {line-height: 1.5em;}

p {padding: 2px 0 10px;}

small,.small {font: normal 0.9em sans-serif;}

ul {padding: 0 2em 1.2em;}

/* structure */

#wrapper {

background: #000000 url(img/wrapper.gif) no-repeat left bottom;

margin: 0 auto;

width: 762px;

}

#container {

background: #000000;

border-top: 6px solid #000000;

font-size: 1.3em;

line-height: 1.3em;

margin: 0 auto;

width: 750px;

}

/* header */

.title {

background: #000000 url(img/header-h1.jpg) repeat-x;

border-top: 0px solid #000000;

}

.title h1 {

color: #441;

font: normal 2.2em Georgia,"Trebuchet MS",sans-serif;

padding: 10px 0 10px 18px;

}

.header {

border-top: 0px solid #000000;

background: #000000 url(img/header.jpg) no-repeat left bottom;

height: 220px;

}

/* navigation */

.navigation {

background: #DED9D0 url(img/nav.gif) repeat-x; height: 41px;

border-top: 1px solid #996;

}

.navigation a {

background: #FFF url(img/nav.gif) repeat-x;

border-right: 1px solid #C9C6B3;

color: #553;

float: left;

font: bold 1em Tahoma,sans-serif;

padding: 0 14px;

line-height: 41px;

text-align: center;

text-decoration: none;

}

.navigation a:hover,.navigation a#active {background-position: left bottom; color: #331;}

/* main */

.main#two-columns {background: #FFF url(img/two-columns.gif) repeat-y;}

/* bottom */

.bottom {

background: #DCDAC9 url(img/bottom.gif) no-repeat left bottom;

border-top: 1px solid #AA8;

color: #444;

padding: 14px 20px;

}

.bottom .left,.bottom .right {width: 49%;}

/* footer */

.footer {

background: #000000;

color: #EED;

padding: 10px;

}

.footer .left {width: 66%;}

.footer .right {

width: 33%;

text-align: right;

}

.footer a {

color: #FFF;

text-decoration: none;

}

.footer a:hover {

color: #FFF;

text-decoration: underline;

}

/* gallery */

.gallery td {

vertical-align: top;

text-align: center;

}

.gallery em {display: block;}

/* misc */

.clear,.clearer {clear: both;}

.clearer {font-size: 0;}

.col2 .left {width: 64%;}

.col2 .right .content {background: #FFF;}

.col2 .right {width: 33%;}

.content {padding: 18px 20px;}

.left {float: left;}

.right {float: right;}

.right .content {padding: 18px 12px 12px;}

/* block list */

ul.block {

border-top: 1px dashed #BCBAAC;

margin: 2px 0;

padding: 0;

width: 90%;

}

.block li {

border-bottom: 1px dashed #BCBAAC;

list-style: none;

}

.block li a,.block li em {

color: #553;

display: block;

}

.block li em {

font-size: 0.9em;

font-style: normal;

}

.block li a {

padding: 1px 0%;

text-decoration: none;

width: 94%;

}

.block li a span {font-weight: bold;}

.block li a:hover {

background: #D2D0C0;

color: #553;

}

.right .block,.right .block li {border-color: #DCDACC;}

.right .block li a:hover {background: #F2F0EA;}

[manub72]

Bonjour,

pour résoudre ce problème effectivement récurrent, je recours à la solution suivante - je ne sais pas exactement quel bloc tu veux centrer, donc à toi d'adapter par rapport à ton code :

pour le conteneur du bloc : text-align: center;

puis, pour remettre les choses dans l'ordre à l'intérieur du bloc lui-même : text-align: left;

Je ne sais pas si c'est idéal (en particulier, si tu as d'autres choses dans ton conteneur, tout se retrouve centré, donc il faut remettre des blocs intermédiaires pour les éléments dont tu souhaites un autre comportement, mais ça me tire d'affaire dans la plupart des cas.