nicht angemeldet
Problem mit border-bottom in CSS Navi-Menü
Hallo liebe SELFHTML-Gemeinde,
ich bastele gerade an einer kleinen CSS-Navigation und bin nach stundenlangem herumprobieren und herumstöbern im Internet etwas frustriert. Zwei "Fehler" lassen sich einfach nicht beheben :(
1. Beim aktuellen Firefox sind die Links "Eins", "Vier" und "Sieben" beim a:hover ohne Unterstrich - alle anderen schon. Es sollten aber alle unterstrichen sein...
2. Beim Firefox und Internet Explorer ist unterschiedlich viel Platz im "Linkkasten" vorhanden. Während beim Internet Explorer die neun Links alles fast ausfüllen, ist beim Firefox noch Platz für mindestens einen extra Link. Ist meine pt-Maßeinheit etwa daran Schuld oder wie kann das behoben werden?
Vielen Dank für jeden Tipp zu meinem Problem!
Tina
DIESER TEIL PLATZIERT DIE NAVI-BOX AM LINKEN RAND
-------------------------------------------------
#MenuLinks {
position: absolute;
top: 110pt;
bottom: 0;
height: 210pt;
left: 0;
background-color: #fffacd;
border-top: 0.5pt solid #bbbb66;
border-right: 1.5pt solid #bbbb66;
border-bottom: 1.5pt solid #bbbb66;
width: 120pt;
}
FORMATIERUNGEN FÜR DIE LINKS IM NAVI-MENÜ
--------------------------------------------------
#menu {
width: 120pt;
margin-top: 5pt;
}
#menu li a {
font: bold 11pt/15pt arial, sans-serif;
text-decoration: none;
letter-spacing: 0.5pt;
}
#menu li a:link, #menu li a:visited {
display: block;
background-color: #fffacd;
padding: 3pt 0 0 7pt;
border-top: 0.5pt solid #fffacd;
border-bottom: 0.5pt solid #fffacd;
}
#menu li a:hover {
color: #333333;
background-color: #bbffbb;
padding: 3pt 0 0 7pt;
border-top: 0.5pt solid #bbbb66;
border-bottom: 0.5pt solid #bbbb66;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
HTML-TEIL
--------------------------------------------------
<div id="MenuLinks">
<div id="menu">
<ul>
<li><a href="#"> Eins </a></li>
<li><a href="#"> Zwei </a></li>
<li><a href="#"> Drei </a></li>
<li><a href="#"> Vier </a></li>
<li><a href="#"> Fünf </a></li>
<li><a href="#"> Sechs </a></li>
<li><a href="#"> Sieben </a></li>
<li><a href="#"> Acht </a></li>
<li><a href="#"> Neun </a></li>
</ul>
</div>
</div>
-
Hey!
- Beim aktuellen Firefox sind die Links "Eins", "Vier" und "Sieben" beim a:hover ohne Unterstrich - alle anderen schon. Es sollten aber alle unterstrichen sein...
Ich kann mir nicht vorstellen, dass da überhaupt irgendwelche Links unterstrichen sind, weil du sie damit:
#menu li a {
...
text-decoration: none;
...
}als "nicht unterstrichen" definiert hast (habs gerade mit deinen Angaben getestet; Firefox).
Willst du aber alle Links unterstrichen haben willst, wenn du mit dem cursor darüber fährst, brauchst du das:#menu li a:hover { ... text-decoration: underline; ... }MfG Emanuel
-
Hallo Emanuel,
die Links sind nicht unterstrichen. Um jeden Link wird aber eine "border" erzeugt, die oberhalb und unterhalb des Links angezeigt wird. Die oben genannten Links sind jedoch nicht unterstrichen - alle anderen schon. Dieser "Unterstrich" ist aber nicht der von text-decoration, sondern der von border!
Das text-decoration habe ich ja auf none gesetzt, damit die Links normalerweise nicht unterstrichen sind.
Trotzdem Danke für die Antwort ;)
Liebe Grüße
Tina
-
Das Problem hat sich endlich gelöst. Wie ich gerade rausfand, mussten nur die Dicken der border etwas angepaßt und eine Breitenangabe optimiert werden und schon geht es.
Zwischen Firefox und Internet Explorer bleibt zwar ein kleiner Unterschied, doch der reduzierte sich dabei auf ca. eine halbe Zeile, was ja verschmerzbar ist.
Danke an alle, die meinen Beitrag gelesen haben und mir helfen wollten ;)
Liebe Grüße
Tina
-