Auch nach dem ich alle verdächtigen Styles entfert habe, konnte ich den Fehler nicht finden.
Nach dem ich das css ohne deine Vorlage neu geschrieben habe ging es aber:
Code:
#content_navi {
background-image: url(http://hitrix.pytalhost.de/images/gardient_2.jpg);
width: 136px;
float: left;
}
#content_navi ul {
margin: 0;
padding: 0;
list-style: none;
}
#content_navi ul li {
margin-top: 1px;
}
#content_navi ul li a {
padding-top: 6px;
padding-bottom: 6px;
display: block;
font-size: 9px;
display: block;
text-decoration: none;
text-align: center;
font-family: Verdana;
color: #3A3A3A;
background-image: url(http://hitrix.pytalhost.de/images/gardient_1.jpg);
}
#content_navi ul li a:hover {
background-image: url(http://hitrix.pytalhost.de/images/gardient_2.jpg);
background-position: center;
}
Auf die Höhenangaben habe ich verzichtet, da sie bei Schriftvergrößerungen stören.
Anstelle dessen habe ich padding-top und padding-bottom für <a> verwendet.
Die Navigation wächst so vertikal mit der Schriftgröße.
Für den IE6 solltest du im html vielleicht noch Leerzeichen am Ende des Anchortext setzen. Könnte einen sonst einen Bug im IE6 geben.
Code:
<li><a href="#">Aufgaben und Ziele </a></li>
(Ein Leerzeichen hinter "Ziele")
Kannst es ja mal vergleichen. Vielleicht findest du den Fehler selber.
Wer nett wenn du ihn dann hier reinschreibst.
ja, genau entweder du machst es über eine liste, mit bildern oder mit a: hover, usw.
Bei bildern würde der quelltext wie folgt aussehen:
<A HREF="deineseite.html"><img src="ursprungsbild.gif" alt="" onmouseover="img:src='mouseoverbild.gif'"
onmouseout="img:src='button_home.gif'" title="dein titel" border="0" height="55px" width="150px">
in href="" wie du sicher schon weißt, schreibst du die zu ladende seite rein, img src="" dein bild, was am anfang da ist. Dann bei onmouseover="img:src=' '" das bild, was das mouseover anzeigen soll, und bei onmouseout, dass was nach dem überfahren mit der maus wieder ausgegeben werden soll. Hierfür verwendet man meistens wieder das ursprungsbild.
Eine zweite möglichkeit ist mit a: und den ganzen befehlen:
a:link { text-decoration:none; font-weight:none; background-color:white; }
a:hover { text-decoration:none; font-weight:bold; background-color:#330000; }
a:active { text-decoration:none; font-weight:bold; background-color:white; }
a:visited { text-decoration:none; font-weight:bold; color:#747474; }
a:link steht für die noch nicht besuchten seiten, a:visited für die bereits besuchten seiten, a:hover für den mouseover effekt, a:active für das anklicken, und a:focus für das auslösen per tastatur. Mit backgroud-color gibst du eine hintergrundfarbe an, die ausgegeben werden soll. Angabe nach RGB farbensystem.
Beides habe ich auf meiner hp eingebaut und funktioniert auch über IE.
Eine dazu nützliche selfhtml seite wäre:
SELFHTML: HTML/XHTML / Verweise (Links) / Verweise definieren und gestalten
Jetzt kann ich nur noch sagen, ausprobieren. Wenns dir noch nicht gefällt, einfach ein wenig mit den quelltext rumprobieren, bei html kann man nicht viel falsch machen
