✔ Navigations-Darstellung IE vs. Firefox

[LuvShining]

Hallöchen,

ein bisserl Ärger in der Optik meiner Menüführung macht mir derzeit zu schaffen. Ich habe einige Hauptmenüpunkte A B C, die ich mit diversen Untermenüpunkten A.A. A.B. A.C belegt habe. Das klappt soweit auch ganz gut. Was mich allerdings irritiert ist die Tatsache, dass der border-bottom im Firefox dargestellt wird und im IE einfach abgeschnitten ist- Optik, als wenn er gar nicht vorhanden wäre (siehe Beispielbild).
Kann mir jemand von euch erklären, woran das wohl liegt?

#menue {
position:absolute;
margin:0;
padding:0;
left:170px;
top:105px;}

#menue ul{
margin:0;
padding:5px;
list-style:none;
white-space: nowrap;
}

#menue li{
display:inline;
}

#menue a{
color:#FFFFFF;
font-family:arial,helvetica;
font-size:8pt;
font-weight:bold;
text-decoration:none;
background-color:#0044A5;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;}

#menue a:hover{
color:#0044A5;
font-family:arial,helvetica;
font-size:8pt;
font-weight:bold;
text-decoration:none;
background-color:#74A3DB;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;}

/* verstecktes Untermenü '*/
div.clSub1 
{
visibility: hidden;
position: absolute;
}

div.clSub 
{
visibility: hidden;
position: absolute;
margin:0;
padding:0;
left:170px;
top:130px;
}

#sub1Div li{
display:inline;
}

#sub1Div a{
color:#0044A5;
border:#0044A5 1px solid;
font-family:arial,helvetica;
font-size:8pt;
font-weight:bold;
text-decoration:none;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
}

#sub1Div a:hover{
color:#74A3DB;
border:#74A3DB 1px solid;
font-family:arial,helvetica;
font-size:8pt;
font-weight:bold;
text-decoration:none;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
}

<ul id="menue">
<li><a href="javascript:void(switchTo('sub1Div'))">A</a></li>
<li><a href="javascript:void(switchTo('sub2Div'))">B</a></li>
<li><a href="javascript:void(switchTo('sub3Div'))">C</a></li>
</ul>

<div id="sub1Div" class="clSub">
<li><a href="#">A.A</a> </li>
<li><a href="#">A.B</a> </li>
<li><a href="#">A.C</a></li>
</div>

Über eure Hilfe würde ich mich sehr freuen ;-)

Grüße
Nadine

 

[Maik]

Erweiter mal den Selektor #sub1Div a mit folgenden Regeln:

#sub1Div a{
color:#0044A5;
border:#0044A5 1px solid;
font-family:arial,helvetica;
font-size:8pt;
font-weight:bold;
text-decoration:none;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
display:block;
float:left;
margin-right:5px;
}

 

[LuvShining]

Super, hat funktioniert! Lieben Dank

Viele Grüße
Nadine