Gesamtes Layout wird im IE nicht zentriert - trotz text-align
janinchen
- css
Hallo meine Lieben,
ich sitze nun schon sehr lang an diesem Problem und weiß langsam echt nicht mehr weiter.
Problem: Layout der (XHTML-) Seite wird im Internet explorer nicht zentriert angezeigt. Das Layout besteht aus mehreren Divs, die sich aber alle im "Container"-Div befinden. Zentriert wird das ganze ja generell mit margin: auto - funktioniert auch, nur eben nicht im Internet Explorer (wie eig. schon erwartet). Doch auch mit Ausnützen des Text-Align: center tut sich nix.
evtl. relevante CSS-Elemente:
html {
BACKGROUND: url(Design/background.jpg) top left fixed;
BACKGROUND-COLOR: #5574a3;
POSITION: absolute;
BACKGROUND-POSITION: top left;
TOP: 0px;
LEFT: 0px;
TEXT-ALIGN: center;
}
body {
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center;
BACKGROUND-IMAGE: url(Design/treff.gif);
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-POSITION: 0px 100px;
}
div#container {
POSITION: relative;
TEXT-ALIGN: center;
MARGIN: 0 auto 0 auto;
WIDTH: 773px;
BACKGROUND: transparent;
}
div#intro {
POSITION: relative;
WIDTH: 773px;
MARGIN: 0 auto 0 auto;
TEXT-ALIGN: center;
HEIGHT: 295px;
background: url(Design/header.gif);
}
____________________________________
Grundaufbau html (ohne Text & Inhalt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<? include('metatags.php');?>
<style type="text/css">@import url("style.css");</style>
<title>hallo</title>
</head>
<body>
<div id="container">
<!-- HEADER -->
<div id="intro">
<div id="header"></div>
<div id="menu">
<!-- Start Menue -->
<?php include('menu.php'); ?>
<!-- Ende Menue -->
</div>
</div>
<!-- SPALTE 1 INHALT -->
<div id="inhalt">
</div>
<!-- SPALTE 2 FOTOALBUM -->
<div id="album">
</div>
</div>
</body>
</html>
Vllt. wär noch ganz interessant zu wissen, dass der IE sich im Quirks-Modus nicht so verhält!?
Kann mir jemand helfen?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Keine Ahnung, was der für eine Suppe der MSIE daraus brühen wird.
mfg Beat
»» <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Keine Ahnung, was der für eine Suppe der MSIE daraus brühen wird.
mfg Beat
Kannst du mir bitte nochmal kurz erklären was du gerade gemeint hast? Verstehe deinen Text nicht ganz, sorry :D
Hallo
»» »» <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
»»
»» Keine Ahnung, was der für eine Suppe der MSIE daraus brühen wird.Kannst du mir bitte nochmal kurz erklären was du gerade gemeint hast? Verstehe deinen Text nicht ganz, sorry :D
Benutze nicht XHTML 1.1 sondern XHTML 1.0, so mancher Browser (nicht nur IE) kann mit 1.1 nicht umgehen.
Tschö, Auge
An molily: Oh mann da stand ich echt auf'm Schlauch. Hab mir bei dem position:absolute wohl nicht so viel gedacht - und dann ewig lang rumprobiert woran das ganze liegen könnte :P
Vielen Dank! Schön dass es Menschen wie dich gibt, die einem einfach so gerne helfen!
Auch an die anderen beiden für die Antwort!
Liebe Grüße, Janinchen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Keine Ahnung, was der für eine Suppe der MSIE daraus brühen wird.
Standardkonformer Rendermodus, was sonst?
Mathias
Zentriert wird das ganze ja generell mit margin: auto - funktioniert auch, nur eben nicht im Internet Explorer (wie eig. schon erwartet).
Deine Erwartung ist falsch.
Der Internet Explorer kann margin:auto zur Zentrierung von Blockelementen seit Version 6 im standardkonformen Rendermodus.
Solange du nicht im Quirks-Modus arbeitest bzw. nicht IE 5 unterstützen musst, kannst du dir die Hacks mit text-align:center sparen.
Dass der IE deine Seite nicht zentriert liegt vielmehr daran, dass diese Styles hier
html {
POSITION: absolute;
TOP: 0px;
LEFT: 0px;
}
dazu führen, dass das html-Element nicht die gesamte Breite einnimmt, sondern nur so breit ist, wie sein Inhalt es erfordert.
Am besten lässt du das position:absolute hier weg. Warum hast du es drin?
Oder du setzt eine explizite Breite wie 100%.
Abstände (margin, padding) und Rahmen (border), die IE möglicherweise anwendet, kannst du ggf. in beiden Fällen auf 0 setzen.
Mathias
--
[JavaScript-Erweiterung für das SELFHTML-Forum](http://forum.de.selfhtml.org/js/doku/)