CSS Menü wird im Internet Explorer 6 falsch angezeigt

[Leitzelmaster]

Hi leute, hab nen Menü gemacht, dass aber leider im Internetexplorer 6 falsch angezeigt wird.

1. Durch Link 1 geht ein Border durch. Ich weiß nicht wo der her kommen soll
2. Die untere Grafik fehlt

Website under review



mfg

Stefan Litzel

 

[ingoS]

Da kommt eine Nachricht vom Hoster; auf deine Seite kann man nicht zugreifen.

 

[Leitzelmaster]

hmm sehr merkwürdig. Ich lads mal bei nem anderen hoster hoch.

Ok hier der Link:

Unbenanntes Dokument


Kann sein dass es auch im Firefox beim ersten laden probleme mit dem ersten Link gibt. Aber das liegt an der Werbung. Einfach Werbung schließen und dann refreshen. Sollte dann funktionieren.

 

[Blacky]

Grundsätzlich würde ich dir empfehlen, bei der Arbeit mit CSS am Anfang alle Abstände auf 0 zu setzen:

* {
  margin: 0;
  padding: 0;
}

 

[neuroleptika]

Dem IE6 fehlt das Layout.
Füge das mal dem css hinzu:

* html #sidebar ul {
height: 1%;
}

Haslayout ist eine Erfindung von Microsoft.
Gibt ne menge darüber zu lesen:
haslayout - Google-Suche
Muß mann aber nicht alles verstehen.

 

[Leitzelmaster]

Hey super danke :).

Könntest du mir auch noch sagen was ich ändern müsste, damit die untere grafik beim Internet explorer angezeigt wird?


mfg

Stefan Litzel

 

[neuroleptika]

Am Ende steht ein leeres <h5> für den unteren bg.
Mit einem festen Leerzeichen würde das bg angezeigt werden

<h5>&nbsp;<h5>

Das kann man aber nicht bringen.
Mit <h3> konnte ich auch nichts anfangen. Ich habe da "Navigation" reingeschrieben und es für die Bildschirmausgabe versteckt. Screenreader und Google erkennen die Überschrift.
<h5> habe ich aus dem html gelöscht:
html:

<div id="nav_block">
<div id="nav_block_innen">
<h3>Navigation</h3>
<ul>
<!--Leerzeichen zwischen Linktext und </a> verhindert white space Bug im IE5 - IE6-->
<li id="first_li"><a href="#">Link1 </a></li>
<li><a href="#">Link2 </a></li>
<li><a href="#">Link3 </a></li>
<li><a href="#">Link4 </a></li>
<li><a href="#">Link5 </a></li>
<li><a href="#">Link6 </a></li>
</ul>
</div>
</div>

css

#nav_block {
background-image:url(navi-mid.jpg);
background-position:  top left;
background-repeat:  repeat-y;
position: relative;
width: 200px;
}

#nav_block_innen {
background-image:url(navi-bot.jpg);
background-position:  bottom left;
background-repeat:  no-repeat;
}

#nav_block ul {
margin: 0;
padding: 30px 0;
list-style: none;
background-image:url(navi-top.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 200px; /* layout für IE6 */
}

#nav_block ul li {

}

#first_li a {
    border-top: 1px dashed #000000;
}

#nav_block ul li a {
    display:block;
    padding: 7px;
    border-bottom: 1px dashed #000000;
    margin: 0 30px 0 30px;
}

/*haslayout für IE5: */
* html #nav_block ul li a {
height: 1%;
}

#nav_block ul li a:hover {
background:url(sb-hover-bg.gif) repeat-x;
}

/*h3 nur für Suchmaschinen und Screenreader:*/
#nav_block  h3 {
position: absolute;
left: -1000px;
top: -1000px;
}

IE5 verwendet bei border-style: dashed; border-style: solid; .
Das dürfte aber sicher egal sein.

 

[Leitzelmaster]

Wow echt super gemacht. Ich schau mir deinen Code nochmals ein paar mal an um aus meinen Fehlern zu lernen. Hast mir echt super geholfen :-D

 

[Leitzelmaster]

Jetzt hab ich doch noch eine Frage, nicht weil es unbedingt wichtig wäre, aber weil es mich interessiert :)

Also wenn ich jetzt bei den Links, die Schrift ändere auf Arial, dann erscheinen beim internt explorer 6 kleine ca. 2px große Abstände zwischen dem Border und dem hover image. Dieser Bereich ist auch kein Link.

Hoffe du kannst mir weiterhelfen :)

 

[neuroleptika]

Hm, es ist schon spät.
Hast du wirklich nur font-family: arial; geschrieben oder sowas in der Art:

    font : 12px/1em Arial;

Der zweite Wert währe die Zeilenhöhe (line-height).
Eine weitere Möglichkeit währe, daß an einer anderen Stelle line-height:#wert; angegeben wurde.
Line-height vererbt sich auf Kinderelemente und führt manchmal zu überraschenden Ergebnissen.

Ansonsten zeige mal einen aktuellen Link.

 

[Leitzelmaster]

Unbenanntes Dokument


Ich hab eigentlich echt nur font-family: Verdana
und font-size: 10 gemacht.


Im Firefox funktioniert es (wie immer)



mfg

Stefan Litzel

 

[neuroleptika]

Den Bug kannte ich noch nicht.
Schreibe font-family: verdana, arial, usw; einfach in #nav_block ul.
Damit hast du das Problem umgangen.