nicht angemeldet
Hallo zusammen,
ich bastle gerade an dem Design meiner neuen HP (noch nicht weit gekommen).
Im Moment hänge ich an der Navi.
Diese habe ich von http://cssplay.co.uk/menus/vertical_slide.html kopiert.
Leider will das Skript bei mit im IE 6 nicht laufen,
im Opera un FF geht es.
Im IE kann man von den Oberpunkten nicht auf die Unterpunkte gehen.
Als Grundlage habe ich den Aufbau aus Selfhtml genommen.
Kann es sein, dass die speziellen IE Anweisungen die Navi beeinträchtigen? Kann mir jemand einen Tipp geben, was da falsch ist?
Link zur Test HP: http://luger.cwsurf.de/sl2/
CSS Auszug:
/* Begin Navi */
#navidiv{ position:fixed; top:4em; left:.0em; border: 0px solid #6699CC; padding:.5em; }
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/vertical_slide.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
ul.navi, ul ul {padding:0; margin:0; border:0; list-style-type:none; overflow:hidden;
width:14em; text-align:left; height:40em;
color:#000000; border:1px solid #6699CC; background:#f8f8f8; }
ul.navi table {border-collapse:collapse; padding:0; margin:0; font-size:.8em;}
ul.navi ul {margin-left:1em;}
ul.navi li {text-indent:0.5em;}
ul.navi li.drop {margin-bottom:-2px;}
ul.navi li a,
ul.navi li a:visited {display:block; width:14em; height:1.5em; line-height:1.7em; text-decoration:none; color:#000000;}
ul.navi li a.last,
ul.navi li a.last:visited {display:block; width:14em; height:14em; line-height:2em;}
ul.navi li ul {display:none;}
ul.navi li:hover a,
ul.navi li a:hover {border:0; color:#e50c0c; font-weight:bold;}
ul.navi li:hover ul,
ul.navi li a:hover ul {display:block; height:18em; width:12em; margin-top:-1px; background:#f8f8f8; border:1px solid #000000;}
ul.navi li:hover ul li a,
ul.navi li a:hover ul li a {height:2em; background:#f8f8f8; color:#000000; font-weight:normal;}
ul.navi li:hover ul li:hover a,
ul.navi li a:hover ul li a:hover {background:#6699CC; color:#f8f8f8; font-weight:bold;}
/* Ende Navi */
#header_container
{ position:fixed; top:0; left:0; right:0; text-align:left; margin:0; height:2em; z-index:3; }
#header
{ position:absolute; top:0; left:0; right:0; bottom:0; height:100%; background:#6699CC;
z-index:3; margin:0; padding:0.2em; }
h1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; margin-left:10.5em; }
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8em; margin-left:30.5em; }
#content
{ margin:0; padding-top:4.85em; padding-left:16em; padding-bottom:3em; z-index:2; }
#footer_container
{ position:fixed; bottom:0; left:0; right:0; margin:0; height:2.5em; z-index:3; }
#footer
{ position:absolute; top:0; left:0; right:0; bottom:0; background:#6699CC; z-index:3; }
/* 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 #navidiv
{ position:absolute; }
* html #header,* html #footer
{ height:100%; position:static; }
* html #content
{ position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%;
overflow:auto; margin:0; }
* html #navidiv
{ margin:0; width:10.5em;
/* Der IE soll das Element breiter darstellen, da margin und padding hier von
der Breite abgezogen wird! */ }
Vielen Dank,
Stefan