nicht angemeldet
Hallo
Ich stehe für den Star Hack im IE6 total auf dem Schlauch.
Ich habe eine Seite angelegt, die mit dem FF gut ausschaut. Aber der IE6...
Hab mich an dem Beispiel hier orientiert:
http://aktuell.de.selfhtml.org/artikel/css/footer/#fixierte_navigation
Und dann aber doch die Navi wieder "entfixiert".
Unten ist das entsprechende CSS/Html, wie gesagt im FF super, aber die im Bsp verwendeten Star Hacks krieg ich irgenwie nciht richtig übertragen.
Was muß ich denn machen, damit das klappt?
Ich hab schon an den top bottom... Werten rumgespielt sowie mal width 50% ausprobiert und noch an einiges anderes. Das sieht am Ende auch halbwegs nach was aus, aber dann ist die Scrollbarkeit aber total weg?!? Und wenn ich für "Inhalt" alles angepasst hab, und danach die Navi angehe, hüpft der Inhalt sonstwohin.
Der IE6 treibt mich sozusagen gerade in den Wahnsinn. (Die anderen IEs hab ich nur noch nicht ausprobiert, sonst würden die das wohl auch tun...)
Noch ne Nebenfrage, wie bekommt man den IE dazu PNGs so wie hier erwähnt transparent darzustellen, das seh ich dem Bsp leider nicht an...
Ich hoffe auf eure Hilfe.
body {
position:absolute;
color:/*Text*/#553300/*braun*/;
background: #FFFF99/*hellgelb*/;
font-family: 'Times New Roman', Times, serif;
}
html, body {
top:0; left:0; right:0;
min-height:100%;
margin:0;
padding:0;
width:100%;
}
#header_container {
position:fixed;
top:0px; left:0px; right:0px;
text-align: center;
padding-bottom: 6em;
background-image: url(./ranke.png);
background-repeat: repeat-x;
z-index:3;
border: 1px red solid;
}
#header {
position:absolute;
top:0; left:0; right:0; bottom:0;
z-index:3;
margin:0em 0 1.25em 0; /*Außenabstand*/
padding:0.2em; /*Innenabstand*/ /*oben rechts unten links*/
background: url(./head_hell.png) no-repeat center;
border: 1px solid blue;
}
#startimage {
z-index:1;
position: fixed;
bottom: 3em; left: 2.5em;
width: 8em;
height: 15em;
background-image: url(./wappenfoto.gif);
background-repeat:no-repeat; background-position:center center;
}
#Navigation {
font-size: 1.0em;
float: left;
width: 9em;
margin: 7.5em 0 2.5em 2.5em; /*Außenabstand*/
padding: 0; /*Innenabstand*/ /*oben rechts unten links*/
color:#553300/*braun*/;
background-color: #FFFF99/*hellgelb*/;
text-align: center;
border:1px solid black;
}
#Inhalt {
font-size: 1.0em;
margin: 7.5em 6.5em 2.5em 19.5em; /*oben rechts unten links*/
padding: 0 2.5em 2.5em 2.5em;
text-align: justify; /*Blocksatz*/
border:1px solid black;
z-index:2;
}
#footer_container {
position:fixed;
bottom:0; left:0; right:0;
text-align:center;
margin:0;
height:3.5em;
z-index:3;
background-image: url(./ranke_fuss.png);
background-repeat:repeat-x; background-position: bottom;
border: red 1px solid;
}
#footer {
position:absolute;
top:2em; left:0; right:0; bottom:0;
z-index:3;
color: #FFFF99/*hellgelb*/;
border: blue 1px solid;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0; /*oben rechts unten links*/
}
#Navigation a, span {
display:block;
margin: 0; /*Außenabstand*/
padding: 0; /*Innenabstand*/ /*oben rechts unten links*/
width: 120px;
height:45px;
text-decoration: none;
font-weight: bold;
color:/*Text*/ #553300/*braun*/;
background: #FFFF99/*hellgelb*/ url(./parchment_off_old.gif) no-repeat center; /*Hintergrundbild*/
border:1px dashed black;
}
#Navigation a:hover, span {
background: #FFFF99/*hellgelb*/ url(./parchment_on_old.gif) no-repeat center; /*Hintergrundbild*/
}
/* Nur 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 #Navigation {
position:absolute;
}
* html #header,* html #footer {
height:100%;
position:static;
}
* html #Inhalt {
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}
}
/* Der IE soll das Element breiter darstellen, da margin
und padding hier von der Breite abgezogen werden! */
* html #Navigation {
margin:0;
width:9em;
}
#startimage {
z-index:10;
position: absolute;
bottom: 3em; left: 2.5em;
width: 8em;
height: 15em;
background-image: url(./wappenfoto.gif);
background-repeat: no-repeat center;
background-position: left top;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./bilder/maus_fix.css">
<link rel="shortcut icon" href="favicon.ico">
<title>Mus Rusticus</title>
<meta name="description" content="startseite">
<meta name="author" content="Bellanna">
<meta name="keywords" content="Stichworte">
<meta name="generator" content="Bluefish 1.0.7">
</head>
<body>
<div id="header_container">
<h1 id="header"> </h1>
</div>
<ul id="Navigation">
<li><a href="termine.htm">Kalendarium</a></li>
<li><a href="angebot.htm">Angebot für Veranstalter</a></li>
<li><a href="gefolge.htm">Gefolge</a></li>
<li><a href="bilder.htm">Galerie</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="intern.htm">Intern</a></li>
<li><a href="k_i.htm">Kontakt & Impressum</a></li>
<li><span>Startseite</span></li>
</ul>
<div id="Inhalt">
<h2>Schön, dass ihr hergefunden habt!</h2>
<img src="./bilder/fotologo.jpg" alt="Titel" />
<p class="textleft">BlablaText</p>
</div>
<div id="footer_container">
<div id="footer">© 2009
</div>
</div>
<div id="startimage"> </div>
</body>
</html>