ding280: Problem mit falscher Darstellung eines CSS-Layouts im IE

SELF-Forum

Problem mit falscher Darstellung eines CSS-Layouts im IE

ding280
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte wie in http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss ein Layout mit einer Überschrift über die ganze Zeile. Im Firefox wird das richtig angezeigt, im IE aber nicht. Woran liegt das? Was kann ich dagegen tun?

Hier der Code meines CSS:

body
{
 position: absolute;

left: 0em;
 right: 0em;
 top: 0em;
 bottom: 0em;

color: white;
 background-color: lightblue;
 margin: 0em;
 padding: 0em;
}

#head
{
 display: block;

margin: 0.5em;
 padding: 0.5em;

border-width: 1px;
 border-style: solid;
 border-color: white;
 background-color: blue;
}

#head h1
{
 margin: 0em;
 padding: 0em;

font-weight: bold;
 text-align: center;
 font-size: 26pt;
 font-family: sans-serif;

}

#navi
{
 position: absolute;

margin: 0.5em;
 padding: 0.5em;

width: 15em;

left: 0em;
 top: 4em;

border-width: 1px;
 border-style: solid;
 border-color: white;

background-color: blue;
}

#navi a
{

display: block;
 margin: 0.3em;
 background-color: silver;
 font-family: sans-serif;
 font-size: 14pt;
 color: midnightblue;
}

#navi a:hover
{
 background-color: gray;
}

#content
{
 position: absolute;
 top: 4em;
 left: 16.5em;
 right: 0.0em;
 display: run-in;
 padding: 0.5em;
 margin: 0.5em;
 margin-bottom: 1em;

border-width: 1px;
 border-style: solid;
 border-color: white;

background-color: blue;
 color: white;
}

Der Code der html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>
   Test
  </title>
  <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
  <link rel="stylesheet" media="print" href="printer.css" type="text/css" />
 </head>
 <body>
  <div id="head">
   <h1>
    Headline
   </h1>
  </div>

<div id="navi">
   <a href="http://www.heise.de">heise online</a>
   <a href="http://www.heise.de">heise online2</a>
   <a href="http://www.google.de">Google</a>

</div>
  <div id="content">
   huhu huhu huhu huhu huhu huhu huhu huhu huhu
  </div>
 </body>
</html>

Hoffe, mir kann jemdand helfen.

Gruß Tom

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit falscher Darstellung eines CSS-Layouts im IE

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    ich möchte wie in http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss ein Layout mit einer Überschrift über die ganze Zeile. Im Firefox wird das richtig angezeigt, im IE aber nicht. Woran liegt das?

    Daran, dass der IE nicht in der Lage ist, die Maße eines Elementes aus zwei explizit angegebenen gegenüberliegenden Eckpunkten absoluter Positionierung herzuleiten.

    Was kann ich dagegen tun?

    body
    {
    position: absolute;

    Wofür um alles im Web positioniert man _body_ absolut?
    Da kann ich absolut gar keinen Sinn drin erkennen.
    Lass das einfach sein, dann sollte sich dein Problem auch erledigt haben - weil body dann wieder die komplette Breite des Anzeigebereiches einnimmt.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln