mika: position : absolute im IE6

Beitrag lesen

Hallo,

für alle die es interessiert:

Ich habe die Lösung des Problems gefunden.

Einfach im CSS-Code bei der Klasse "header" "clear : right" hinzufügen.
Damit funktionierts nun endlich auch im IE6.

Danke für eure Hilfe.

Hallo zusammen,

ich bin schon seit ein paar Tagen richtig am verzweifeln.

Habe den Header-Bereich, welcher im HTML-Code ziemlich am Ende steht, per CSS an die richtige stelle gerückt. Nämlich ganz oben, wo der Header hingehört. Dies habe ich mittels CSS position : absolute; erreicht.

Funktioniert in allen Browsern (IE 7, IE 8, aktuelle und ältere Versionen von FF, Opera, Safari) wunderbar.

Nur der IE 6 spielt mal wieder nicht mit. Hier wird der Header-Bereich nicht angezeigt, sondern durch sein Eltern-Element verdeckt.

Wieso ich den Header-Bereich nicht einfach im HTML-Code an oberster Stelle platziere? Aus SEO-Gründen...

Nachstehend HTML sowie CSS Code.

Ich hoffe jemand kann mir Tipps geben, wie ich es schaffe, dass der Header-Bereich auch im IE 6 angezeigt wird. Oder vielleicht fällt jemandem sofort auf wo der Fehler liegt? Ich bin für jeden Hilfe, Hinweis, Anregungen, Tipps sehr dankbar.

<body>
  <div id="wrapper">
    <div id="content_right">
      <h1></h1>
    </div>
    <div id="content_left">
      <p>content_left</p>
    </div>
    <div id="header">
<img src="src/gfx/bg_header1.png" usemap="#logo" />
<map name="logo">
       <area shape="rect" coords="24,31,355,107" href="/" />
     </map>
<div id="servicenavi">
  <ul>
    <li><a href="">Kontakt</a></li>
    <li><a href="">Impressum</a></li>
    <li><a href="">Sitemap</a></li>
  </ul>
        </div>
<div id="topnavi">
  <ul>
    <li><a href="/" title="Startseite">Startseite</a></li>
  </ul>
</div>
    </div>
    <div id="footer">
      <p>footer</p>
    </div>
  </div>
</body>

@import "servicenavi.css";
@import "topnavi.css";
@import "style.css";
@import "font_m.css";

* {
margin : 0;
padding : 0;
}

#wrapper {
position : relative;
width : 900px;
margin : 0 auto;
}

#content_right {
width : 650px;
margin-top : 150px;
float : right;
}

#content_left {
width : 250px;
margin-top : 150px;
float : left;
}

#header {
position : absolute;
width : 100%;
height : 150px;
top : 0;
left : 0;
}

#servicenavi {
position : absolute;
top : 0;
right : 0;
}

#topnavi {
position : absolute;
bottom : 0;
right : 0;
}