mika: position : absolute im IE6

SELF-Forum

position : absolute im IE6

mika
– Informationen zu den Bewertungsregeln

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;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. position : absolute im IE6

    apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, mika!

    Für IEs < 8 sollte man sich nur dann Mühe geben, wenn die Seite anderenfalls unbenutzbar wird.

    Ggf helfen Artikel, die du in der Forumssuche unter CSS-Hack finden kannst.

    Matthias

    --
    http://www.billiger-im-urlaub.de/kreis_sw.gif
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. position : absolute im IE6

      mika
      – Informationen zu den Bewertungsregeln

      Hi,

      die Seite ist dann leider unbenutzbar, weil die Hauptnavigation nicht sichtbar ist.

      Werd mal nach CSS-Hacks suchen

      Om nah hoo pez nyeetz, mika!

      Für IEs < 8 sollte man sich nur dann Mühe geben, wenn die Seite anderenfalls unbenutzbar wird.

      Ggf helfen Artikel, die du in der Forumssuche unter CSS-Hack finden kannst.

      Matthias

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. position : absolute im IE6

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

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

    Vielleicht braucht's noch eine explizite Angabe zum z-index ...?

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. position : absolute im IE6

      mika
      – Informationen zu den Bewertungsregeln

      Hi,

      z-index habe ich schon probiert, leider ohne Erfolg :-(

      Hi,

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

      Vielleicht braucht's noch eine explizite Angabe zum z-index ...?

      MfG ChrisB

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. position : absolute im IE6

    Steel
    – Informationen zu den Bewertungsregeln

    Moin!

    Sowas mach ich eher selten, aber hier:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<style type="text/css">  
* {  
margin : 0;  
padding : 0;  
}  
  
#wrapper {  
position : relative;  
width : 900px;  
margin : 0 auto;  
background:yellow;  
}  
  
#content_right {  
border:0px solid #aaa;  
border-left: 250px;  
margin-top:150px;  
background:white;  
}  
  
#content_left {  
width : 250px;  
margin-top : 150px;  
float : left;  
background:blue;  
}  
  
#header {  
position:absolute;  
width : 100%;  
height : 150px;  
top : 0;  
left : 0;  
background:red;  
}  
  
#footer{  
background:green;  
}  
</style>  
</head>  
<body>  
  <div id="wrapper">  
  
    <div id="content_left">  
      <p>ALLERLEI TEXT!<br>total sinnloser Fuelltext. Alles nur<br> zum testen.  
</p>  
    </div>  
  
    <div id="content_right">  
      <h1>CONTENT</h1>  
	<p>ALLERLEI TEXT!<br>total sinnloser Fuelltext. Alles nur<br> zum testen.  
	</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>  
</html>

    Only IE6 tested. Sollte aber auch in anderen Browsern funktionieren.

    --
    Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. position : absolute im IE6

      mika
      – Informationen zu den Bewertungsregeln

      Moin! :-)

      super, vielen Dank!!!

      Habs eben schnell mal kopiert und im IE6 getestet und es funzt!

      Im IE8 wirds noch nicht 100% richtig angezeigt.
      content-right wurde dort nicht angezeigt. Nach dem man dies aber rechts floatet wirds sichtbar. footer und Background von wrapper werden im IE8 noch nicht angezeigt, das werd ich aber auch noch irgendiwe hinkriegen.

      Hab nur nocht nicht verstanden, was du da jetzt großartig geändert hast?
      Muss mir das mal genauer anschauen.

      Nochmals vielen Dank!!!

      Moin!

      Sowas mach ich eher selten, aber hier:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

      <html>
      <head>
      <style type="text/css">

      • {
        margin : 0;
        padding : 0;
        }

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

      #content_right {
      border:0px solid #aaa;
      border-left: 250px;
      margin-top:150px;
      background:white;
      }

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

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

      #footer{
      background:green;
      }
      </style>
      </head>
      <body>
        <div id="wrapper">

      <div id="content_left">
            <p>ALLERLEI TEXT!<br>total sinnloser Fuelltext. Alles nur<br> zum testen.
      </p>
          </div>

      <div id="content_right">
            <h1>CONTENT</h1>
      <p>ALLERLEI TEXT!<br>total sinnloser Fuelltext. Alles nur<br> zum testen.
      </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>
      </html>

      
>   
> Only IE6 tested. Sollte aber auch in anderen Browsern funktionieren.  
>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  4. position : absolute im IE6

    mika
    – Informationen zu den Bewertungsregeln

    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;
    }

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln