Fehlende CSS-Kniffe in Navigationmenü

[LuvShining]

Moin moin,

gleich zwei kleine CSS-Problemchen plagen mich heute. Wahrscheinlich sehe ich den Wald vor lauter Bäumen wieder einmal nicht.

a.) Eine Navigationsbar, siehe Abbildung

-- CSS --

#topmenue {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #013698;
line-height:normal;
padding-left:10px;
}

#topmenue ul {
margin:0;
list-style:none;
white-space: nowrap;
}
#topmenue li {
display:inline;
padding:10px;
margin:0;
}
#topmenue a {
color:#00469C;
font: bold 11px/1.5em arial;
background-color:#CCDAEB;
border-right:#00469C 1px solid;
border-left:#00469C 1px solid;
border-top:#00469C 1px solid;
padding:3px;
text-decoration:none;
display: block;
float:left;
margin-right:5px;
}
#topmenue a:hover {
color:#00469C;
font: bold 11px/1.5em arial;
background-color:#EBF3FD;
border-right:#00469C 1px solid;
border-left:#00469C 1px solid;
border-top:#00469C 1px solid;
padding:3px;
display: block;
float:left;
margin-right:5px;
}

--- HTML ---

<div id="topmenue">
<ul>
<li><a href ='#'>Menübar A</a></li>
<li><a href ='#'>Menübar B</a></li>
<li><a href ='#'>Menübar C</a></li>
<li><a href ='#'>Menübar D</a></li>
<li><a href ='#'>Menübar E</a></li>
</ul>
</div>

Und mein Ergebnis: der Button "Menübar A" steht plötzlich einige Pixel über dem Strich (siehe Abbildung) - diese Fehldarstellung wird mir allerdings nur im Firefox geliefert. Was könnte hier wohl wieder der dumme Auslöser sein?

Nächstes Problemchen,
b.) Ich hätte gern in einer Navigationsleiste, siehe Abbildung, (Schrift-Links untereinander) eine feste Höhe von z.B. 20 Pixeln zwischen den Linkaufzählungen, welche am oberen und unteren Rand eine graue, gestrichelte Linie haben. Leider scheint mir das mit einer "Border-Angabe" nicht zu gelingen :-(

-- CSS --

#menu {
font: bold 11px/1.5em arial;
width:150px;
line-height:20px;
}	  

#menu a {
font: bold 11px/1.5em arial;
color:#00469C;
text-decoration:none;
text-valign:middle;
border-bottom:#E5E5E5 1px dotted;
border-top:#E5E5E5 1px dotted;
}

#menu a:hover  {
font: bold 11px/1.5em arial;
color:#CCDAEB;
text-decoration:none;
text-valign:middle;
border-bottom:#E5E5E5 1px dotted;
border-top:#E5E5E5 1px dotted;
}

--- HTML ---

<div id="menue">
<a href="#">Link A</a><br>
<a href="#">Link B</a><br>
</div>

Hat jemand eine Idee?

Über eure Hilfe würde ich mich freuen.

Viele Grüße
Nadine

 

[Maik]

• Lösungsvorschlag:

#topmenue li {
display:inline;
/*padding:10px;*/ /* auskommentiert = deaktiviert */
margin:0;
}

• Lösungsvorschlag:

#menu a {
font: bold 11px/1.5em arial;
text-decoration:none;
border-bottom:#E5E5E5 1px dotted;
border-top:#E5E5E5 1px dotted;
line-height:20px;
display:block;
margin-top:20px;
}

#menu a:link, #menu a:visited {
color:#00469C;
}

#menu a:hover {
color:#CCDAEB;
}

<div id="menu"> 
<a href="#">Link A</a>
<a href="#">Link B</a>
</div>

Btw, eine CSS-Eigenschaft namens text-valign gibt es nicht.

Und bitte benutze zukünftig die Highlight-Tags zum Auszeichnen der Quellcodes, denn sie erleichtern das Lesen ungemein.