navigation wird minimal zerschossen

html.de-Forum HTML, XHTML & CSS
1

hier ist noch alles ok:
http://img149.imageshack.us/img149/4835/okvp5.png

aber beim zweiten listenpunkt:
http://img149.imageshack.us/img149/214/scheisseqr3.png

sieht man oben rechts, dass die eingeblendete liste um etwa einen pixel zu weit hinüberragt.

hier der css-code:

[code]body {
font-family:Verdana, Arial, Helvetica;
font-size:0.8em;
padding:0;
background-color:azure;
}

div#navi {
width: 100%;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}

  • html div#navi { /* Korrektur fuer IE 5.x */
    width: 48.7em;
    width: 47.1em;
    }
    div#navi div {
    clear: left;
    }
    ul#menu {
    margin: 0; padding: 0;
    text-align: center;
    }

ul#menu li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin-top: -0.1em;
margin-left:-0.1em;
padding: 0;
}

ul#menu li.first {
margin-top:0.1em;
}

  • html ul#menu li { /* Korrektur fuer den IE */
    margin-bottom: -0.1em;
    }

ul#menu li ul {
margin-left: 0.1em; padding: 0;
position: absolute;
top: 1.6em;
display: none; /* Unternavigation ausblenden */
}

  • html ul#menu li ul { /* Korrektur fuer IE 5.x /
    left: -1.5em;
    lef\t: -0.4em;
    }
    ul#menu li:hover ul {
    display: block; /     Unternavigation in modernen Browsern einblenden */
    }
    ul#menu li ul li {
    float: none;
    display: block;
    }

ul#menu a, ul#menu span {
display: block;
width:9.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em;
text-decoration: none;
border: 1px solid black;
color: white; background-color: #1C86EE;
}

  • html ul#menu a, * html ul#menu span {
    width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x /
    w\idth: 6.4em; /     korrekte Breite fuer den IE 6 im standardkompatiblen Modus /
    }
    ul#menu a:hover, ul#menu span, li a#current {
    border-color: black;
    border-left-color: black; border-top-color: black;
    color: blue; background-color: lightblue;
    }
    li a#current { /     aktuelle Rubrik kennzeichnen /
    color: white; background-color: lightblue;
    }
    ul#menu li ul span { /     aktuelle Unterseite kennzeichnen */
    background-color: lightblue;
    }[/code]und das zugehörige html:
    [html]
[/html]wie kann ich diesen hässlichen überhang vermeiden?
2

Konnte den Fehler so auf die schnelle nicht finden, aber etwas generelles.
Im Internet Explorer gibt es kein hover bei einem li ! Von daher wird dein ganzes Menü dort nicht funktionieren. Jedenfalls bei der 6er Version

Edit Mhm muss gestehen das ich es nicht genau erkennen kann :stuck_out_tongue: Aber mit folgender Änderung sollte
es fast richtig aussehen:

  ul#menu li:hover ul {
    margin-left:1px;
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }