Siggi: IE6 feststehende Header verschwunden bei Anker

SELF-Forum

IE6 feststehende Header verschwunden bei Anker

Siggi
– Informationen zu den Bewertungsregeln

Einen schöne Tag allerseits,
als Newbie bin ich am Experimentieren, Lesen und Üben.
Nun bin ich allerdings auf ein Problem bezüglich des IE6 gestoßen wo ich doch Hilfe bräuchte.
Ich habe nach dieser Vorlage http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm
eine Seite erstellt mit festem Header und Navigation, ohne Footer.
Funktioniert einwandfrei, füge ich jetzt allerdings Anker ein verschwindet im IE6 der feste Header.
Im Firefox geht alles.

Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type"
 content="text/html; charset=ISO-8859-1"><title>Feststehende
Kopf- und Fußzeile</title>
<style type="text/css">
body
{ position:absolute;
background:#ffffff;
}
html, body
{ top:0; left:0; right:0;
min-height:100%;
margin:0;
padding:0;
width:100%;
}
#header_container {
position:fixed;
top:0; left:0; right:0;
text-align:center;
margin:0;
height:3em;
z-index:3;
}
#header {
position:absolute;
top:0; left:0; right:0; bottom:0;
height:100%;
background:#efefef;
z-index:3;
margin:0;
padding:0.2em;
}
#menu
{
position:fixed;
top:4em;
left:.5em;
width:9em;
border: 3px dotted #dedede;
padding:.5em;
}
#content
{
margin:0;
padding-top:4.85em;
padding-left:12em;
padding-bottom:3em;
z-index:2;
}
/* Nun für den MSIE */
* html, * html body {
overflow:hidden;
bottom:0;
height:100%;
}
* html #header_container, * html #footer_container
{
position:absolute;
width:100%;
padding-right:16px;
}
* html #menu
{
position:absolute;
}
* html #header
{
height:100%;
position:static;
}
* html #content {
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}
#menu li
{
list-style: none;
margin:0;
padding:0.3em;
}
#menu li#active
{
padding:0.5em;
text-decoration:underline;
}
#menu a:link, #menu a:visited
{
display:block;
background:#eeeeee;
color:black;
text-decoration:none;
margin:0;
padding:0.2em;;
}
#menu a:hover
{
background:#4f4f4f;
color:#ffffff;
text-decoration:underline;
}
* html #menu
{
margin:0;
width:10.5em; /* Der IE soll das Element breiter darstellen, da margin und padding hier von der Breite abgezogen wird! */
}
</style></head><body>
<div id="header_container"><h1 id="header">Seite
mit Header
(2)</h1>
</div><ul id="menu"><li><a
 href="beispiel1.htm">Einfacher Footer</a></li>
<li><a href="beispiel2.htm">Feststehender Footer</a></li>
<li><a href="beispiel3.htm">Feststehender Footer für
den Internet
Explorer</a></li>
<li><a href="beispiel4.htm">Kombination: Ein Footer
für alle</a></li>
<li><a href="beispiel5.htm">Feststehende Kopf- und
Fußzeile</a></li>
<li id="active">Alternative Positionierung, feste
Navigation</li>
<li><a href="index.htm#fixierte_navigation_bsp">Zum
Artikel</a></li>
</ul><div id="content"><p></p><li><a
 href="#anker">Link</a></li>Lorem
ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos
erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et
gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero
voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus</p>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian
quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus
carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee
selectus non provisio incongruous feline nolo contendre. Gratuitous
octopus niacin, sodium glutimate. Quote meon an estimate et non
interruptus stadium.</p>
<p>Sic tempus fugit esperanto hiccup estrogen. Glorious baklava
ex
librus hup hey ad infinitum. Non sequitur condominium facile et
geranium incognito. Epsum factorial non deposit quid pro quo hic
escorol. Marquee selectus non provisio incongruous feline nolo
contendre Olypian quarrels et gorilla congolium sic ad nauseum.
Souvlaki ignitus carborundum e pluribus unum.</p>
<p>Defacto lingo est igpay atinlay. Marquee selectus non provisio
incongruous feline nolo contendre. Gratuitous octopus niacin, sodium
glutimate. Quote meon an estimate et non interruptus stadium. Sic
tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup
hey ad infinitum. Non sequitur condominium facile et geranium
incognito. Epsum factorial non deposit quid pro quo hic escorol.
Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus
carborundum e pluribus unum. Defacto lingo est igpay atinlay.
Gratuitous octopus niacin, sodium glutimate.</p>
<p>Quote meon an estimate et non interruptus stadium. Sic tempus
fugit
esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad
infinitum. Non sequitur condominium facile et geranium incognito.</p>
<p>Li Europan lingues es membres del sam familie. Lor separat
existentie es un myth. Por scientie, musica, sport etc., li tot Europa
usa li sam vocabularium. Li lingues differe solmen in li grammatica, li
pronunciation e li plu commun vocabules. Omnicos directe al
desirabilitá de un nov lingua franca: on refusa continuar payar custosi
traductores. It solmen va esser necessi far uniform grammatica,
pronunciation e plu sommun paroles.</p><a name="anker"></a>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue
es
plu simplic e regulari quam ti del coalescent lingues. Li nov lingua
franca va esser plu simplic e regulari quam li existent Europan
lingues. It va esser tam simplic quam Occidental: in fact, it va esser
Occidental.A un Angleso it
va semblar un simplificat Angles, quam un
skeptic Cambridge amico dit me que Occidental es.</p>
</div></body></html>

Wie läßt sich das beheben? Sitze an dem Problem schon etliche Stunden und komme nicht weiter.

Danke für Eure Hilfe
Siggi

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. IE6 feststehende Header verschwunden bei Anker

    plan_B
    – Informationen zu den Bewertungsregeln

    Hallo,

      

> </div><ul id="menu"><li><a  
>  href="beispiel1.htm">Einfacher Footer</a></li>  

...  

> </ul><div id="content"><p></p><li><a  
>  href="#anker">Link</a></li>Lorem

    bin jetzt nicht sicher ob es an dem einen Fehler liegt, den der Validator findet.  <li> ausserhalb <ul>

      

> traductores. It solmen va esser necessi far uniform grammatica,  
> pronunciation e plu sommun paroles.</p><a name="anker"></a>  
> <p>Ma quande lingues coalesce, li grammatica del resultant lingue  
> es  
  
traductores. It solmen va esser necessi far uniform grammatica,  
pronunciation e plu sommun paroles.</p>  
<p id="anker">Ma quande lingues coalesce, li grammatica del resultant lingue

    oder an diesem verloren wirkenden a-Element.
    du kannst Sprungziele auch per id definieren.

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. IE6 feststehende Header verschwunden bei Anker

    Maxx Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Siggi,

    Ich habe nach dieser Vorlage http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm
    eine Seite erstellt mit festem Header und Navigation, ohne Footer.
    Funktioniert einwandfrei, füge ich jetzt allerdings Anker ein verschwindet im IE6 der feste Header.

    Mathias hat sich intensiv mit dem Problem auseinander gesetzt und mehrere Lösungen entwickelt.
    http://molily.de/css-position-fixed

    Grüße,

    Jochen

    --
    Kritzeln statt texten:
    Scribbleboard
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. IE6 feststehende Header verschwunden bei Anker

    Siggi
    – Informationen zu den Bewertungsregeln

    Hallo Jochen,

    ich habe mir deinen Link durchgelesen und wie ich glaube auch so ziemlich alles verstanden.
    Dort geht es darum das die Spungmarke "unter" dem festen Header verschwindet also nicht sichtbar ist.

    Mein Problem ist aber der feste Header im IE6 zwar funktioniert, aber >>> nachdem ich gesprungen bin einfach
    nicht mehr sichtbar ist wenn ich wieder hochscrolle.

    Zur Verdeutlichung bitte mal folgende Adresse mit Firefox und IE6 aufsuchen
    http://freenet-homepage.de/Siggi238/

    Danke, Siggi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. IE6 feststehende Header verschwunden bei Anker

      Maxx Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Siggi,
      ok. Jetzt ist es etwas klarer. Navigation und Header sollen im IE als position:fixed interpretiert werden. So ganz funktioniert es aber nicht, da anscheinend die fixierten Bereiche zumindest um die Höhe des Headers dennoch mitscrollen. Was dann auch zum verschwinden des Headers führt. Welchen Workaround verwendest du um position:fixed im IE zu simulieren? Und kennst du: http://de.selfhtml.org/css/layouts/fixbereiche.htm#fixiert_ie

      Grüße,

      Jochen

      --
      Kritzeln statt texten:
      Scribbleboard
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln