Inhalt zentrieren - IE will nicht!

[Sani]

Hallo!

Ich habe eine Webseite mit Typo3 und CSS aufgebaut. Der Inhalt soll zentriert im Browserfenster stehen, ein Hintergrundbild ist fixiert:

http://p31682.typo3server.info/2.0.html

Im Firefox geht das ohne Probleme, aber im IE wird der Inhalt immer lingsbündig ausgerichtet. Stelle ich die Breite des Inhaltes (.pageWrapper) auf
width: auto; zentriert der IE auch. Aber ich benötige eine feste Breite!

Kennt jemand eine Trick?

Hier mal meine CSS:

/* -----------------------------------------------------------
     Allgemeines
----------------------------------------------------------- */

body {
 background: #CFE4C3 url('../images/back.jpg');background-repeat:no-repeat;
 background-position:top;
 background-attachment:fixed; padding:0px;
 margin: 0;
 padding: 0;
 font-size: 11px;
 font-family: Verdana, sans-serif;
}

a:link,
a:visited {
 font-weight: normal;
 text-decoration: none;
 color: #163477;
}

.pageWrapper {
 margin: 0 auto;
 width: 730px;
 min-width: 620px;
}

#main {
 border-right: #FFF 2px solid;
 border-left: #FFF 2px solid;
 /* IE Hack. Set this to right colour for now */
 background: #E5EDF1;
}

div#bodyWrap {
 background: url('../images/back_top.jpg') repeat-x;
}

div#bodyWrap {
 width: auto;
 min-width: 770px;
 height: 432px;
}

.subBarInner p {
 margin: 0px 0px 0px 0px;
 padding: 0;
}

/* -----------------------------------------------------------
     Headlines
----------------------------------------------------------- */
h1 {
 font-size: 14px;
 color: #164677;
 padding-top: 15px;
 padding-bottom: 4px;
 margin-left: 15px;
 border-bottom: 1px solid #B8E9C1;
}

h2 {
 font: bold 1.0em "verdana",sans-serif;
 color: #555555;
}

h4 {
 font: bold 13px "verdana",sans-serif;
 color: #555555;
}

h3 {
 font: normal 1.0em "verdana",sans-serif;
 color: #52C5F0;
}

/* -----------------------------------------------------------
     Controllers
----------------------------------------------------------- */

.clear {
 clear: both;
}

.hide, #oldBrowserNotice,
.ieSixCharDupBug {
 display: none;
}

/* -----------------------------------------------------------
     Page Header(s) and Footer
----------------------------------------------------------- */

#header {
 height: 146px;
 margin-right: -2px; /* Box model adjustment */
}

#header #logo {
 width: 223px;
 float: left;
 background: url('../images/logo.gif') no-repeat #FFF;
 margin: 0 -3px;
 height: 146px;
 position: absolute;
 z-index: 100;
}

#header #logo h1 {
 display: none;
}

#heading .head {
 height: 78px;
 background: url('../images/header.jpg') no-repeat right top #FFF;
 border-right: 1px solid #fff;
 position: relative;
 margin-right: -2px;
}

* html #heading .head {
  margin-right: -4px; /* Extra 2px due to IE Box model */
}

#heading .top  {
 color: #FFF;
 margin: 10px 10px 0 0;
 width: 560px;
 margin-left:200px;
 text-align: right;
 height: 22px;
}
#heading .sub {
 color: #FFF;
 margin: 10px 10px 0 0;
 margin-left:5px;
 width: 560px;
 text-align: right;
 height: 22px;
}

#heading a:link,
#heading a:visited {
 font-size: 10px;
 font-weight: bold;
 color: #1A3892;
 margin-left: 32px;
 padding: 9px 4px 11px 4px;
}

#heading a:hover {
 color: #ffffff;
 background: #1A3892;
 padding: 9px 4px 11px 4px;
}

#heading .sub {
 clear: right;
}

#heading .sub a:link,
#heading .sub a:visited {
 font-size: 11px;
 font-weight: normal;
 color: #ffffff;
 margin-left: 32px;
 padding: 7px 4px 12px 4px;
}

#heading .sub a:hover {
  font-color: #1A3892;

}

#footer {
 position: relative; /* IE fix */
 padding: 4px 24px;
 color: #249;
 background: #C6DBDB;
}

#sprache {

}

/* --------------------- Menues -------------------- */

.top .menu2 {
 float:left;
}

#menu1 a {
font-size: 11px;
font-family: Verdana, sans-serif;
font-color:#000000;
text-decoration:none;
}

.menu2 a {
color:#000000;
text-decoration:none;
}

.menu3 a {
color:#000000;
padding-left: 28px;
text-decoration:none;
}

/* -----------------------------------------------------------
      Layout Controls
----------------------------------------------------------- */

/* --------------------- Common to both -------------------- */

#mainInner,
div.subBarInner {

z-index: 2;
 width: 100%;
 border-right: #FFF 1px solid;

}

#mainOuter div.left,
#mainOuter div.right,
#mainOuter div.content,

div.subBarInner div.content,
div.subBarInner div.right,
div.subTitleInner div.content,
div.subTitleInner div.right {
 /* For Sub elements of #mainOuter AND div.subBarInner */
 float: left;
 position: relative;
 z-index: 10;
 overflow: visible; /* fix for IE italics bug */
}

/* -----------------------------------------------------------
     Hauptinahlte oben
----------------------------------------------------------- */

div.subBarOuter,
div.subTitleOuter {
 z-index: 1;
 border-style: solid;
 border-color: #ffffff;
 border-width: 0;
}

div.subBarInner div.right,
div.subTitleInner div.right {
 float: right;

}

div.subBarInner div.content {

}

div.subTitleInner div.content {
 margin: 0 0; /* Ensure floating */
 width: 100%;
}

/* -----------------------------------------------------------
     Hauptinahlte
----------------------------------------------------------- */

#mainOuter {
 z-index: 1;
 border-left: 16em #E6EEF0 solid;

}

#mainInner {
 border-left: 1px solid #FFF;
 background: #ffffff;
}

#mainOuter .content {
 margin: 0 -1px; /* Ensure floating */
 width: 100%;
}

#mainOuter .right {
 /* Not used for now */
 float: right;    /* Possiblity for NN4 layout */
 width: 15em;
 margin: 0 -15em 0 1px; /* Column position */
}

#mainOuter .left {
 width: 16em;
 margin: 0 1px 0 -16em; /* Column position */
}

/* -----------------------------------------------------------
     Menü Produkte
----------------------------------------------------------- */

div.gap {
 border-top: 2px solid #FFF;
 background: #CDE;
 position: relative;
}

html>body .mozclear {
 border-bottom: 0px solid white; /* help mozilla recognize empty  clearing element */
 margin-bottom: -1px;                  /* compensate for 1px space used by border */
}

/* -----------------------------------------------------------
      Fix BugIE :-|
----------------------------------------------------------- */

* html #mainInner, * html div.subBarInner, * html div.subTitleInner {
 position: relative; /* fix a render bug in IE under certain conditions */
}

* html div.gap {
 margin-right: -4px;
}

* html #mainOuter {
 border-right: 4px #0B70CE solid;
}

/* -----------------------------------------------------------
  Ausrichtung Produktbutton
----------------------------------------------------------- */

.leftInside,
.titleSide,
#mainInner .left div.button1,
#mainInner .left div.button2 {
 margin-left: -2px;
 margin-right: 2px;
}

/* -----------------------------------------------------------
  Format Content  Hauptbild
----------------------------------------------------------- */

div.subBarInner {
 background: #ffffff  ;

}

div.subBarOuter,
div.subTitleOuter {
 border-right-width: 20em;

}

/* -----------------------------------------------------------
  Format Mittelbar
----------------------------------------------------------- */

.titleSide,
.titleMain {
 padding: 8px 16px 4px 16px;
 border-bottom: 1px solid #FFF;
 letter-spacing: 0.1em;
 height: 16px;
}

/* -----------------------------------------------------------
  Background Produktnavi
----------------------------------------------------------- */

.titleSide {
 background: #1A3892 repeat-y left url('../images/title1.gif');
 color: #ffffff;
 margin-bottom: 12px;
 font-size: 12px;
 padding-left: 32px;
}

/* -----------------------------------------------------------
  Rootline
----------------------------------------------------------- */

.titleMain {
 background: #C6DBDB;
 color:#ffffff;
 font-size: 11px;
}

.rootline { }

/* -----------------------------------------------------------
  Text Inhalt
----------------------------------------------------------- */

.content p {
 color: #274563;
 line-height: 1.6em;
 font-size: 12px;
 letter-spacing: 0.05em;
 padding: 0 16px 8px 16px;
}

}
.content h1 {
 font-size: 1.2em;
 color: #666666;
 margin-bottom: 4px;

[Engin]

Hi Sani,

Die Forums-hilfe hilft.
Zur Not dem body ein text-align:center; mit auf den Weg geben,
das versteht der IE.

Grüße,
Engin
 GYRO

[D.R.]

Hallo,

Im Firefox geht das ohne Probleme, aber im IE wird der Inhalt immer lingsbündig ausgerichtet.

Das liegt vermutlich daran, dass deine Seite keinen vollständigen http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=DOCTYPE hat, was die Darstellung in aktuellen IEs auf das 5-er Niveau herabsetzt.

Siehe auch: <http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte@title=SELFHTML-FAQ: Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?>

Stelle ich die Breite des Inhaltes (.pageWrapper) auf
width: auto; zentriert der IE auch. Aber ich benötige eine feste Breite!

Dieses „Zentrieren“ bezieht sich dann aber wohl eher auf die Ausnutzung der gesamten Breite.

mfg. Daniel