Hover Effekt bei Netscape und Firefox

[Mascha]

Hallo zusammen,
ich habe eigentlich gleich zwei Fragen.
Zunächst die hoffentlich einfachere:
Ich möchte mit Pseudoklassen a:hover bzw. a:focus die Schrift- und Hintergrundfarbe meines Links ändern. Die Schrift wird schwarz der Hintergrund weiß. Soweit so gut, klappt auch alles nur das netscape und Firefox einen häßlichen schwarz gepunkteten Rahmen um meinen weißne hintergrund machen, der mein ganzes Layout kaputt macht. Ich habe schon versucht, einfach eine weiße border drum zu machen, was den Effekt hat, das dann um den gepunkteten schwarzen Rand noch ein weißer Rahmen ist. Weiß jemand Rat?
Außerdem habe ich eine horizontale Navigation gebaut, indem ich eine Liste mit display:inline umfunktioniert habe. Diese Liste befindet sich in einer Box mit schwarzem Rand. Optisch sollen aber auch die einzelnen Links in einer Box sein. Daher habe ich den einzelnen links einen rechten und linbken Rahmen gegeben. Dabei stellte sich heraus, dass die einzelnen links nicht aneinanderreichen, sprich zwischen den optischen Boxen ist ein bißchen Platz. Habe ich optisch umgangen indem ich nur eine linke border anzeige. Allerdings habe ich dann bei oben genanntem Hover Effekt zusätzlich das Problem, dass der Hintergrund nicht komplett die Farbe wechselt, sondern der Teil, der eigentlich zwischen den Beiden boxen liegt, seine Farbe behält. Im IE habe ich das Problem nicht und mich schon gefreut, dafür aber in Firefox und Netscape... Wer weiß Rat?
Hier kommt der Quelltext:
HTML
<div id="mainNavi">
   <ul>
 <li><a class="menu" href="#">link1</a></li><li>
 <a class="menu" href="#">link2</a></li><li>
 <a class="menu" href="#">link3</a></li><li>
</ul>
</div>

und CSS:
#mainNavi{

height: 20px;
 width: 818px;
 margin: 0px;
 padding:0;
 background-color:#9C3647;
 border:1px solid black;
}

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

#mainNavi li{
 display:inline;}

a.menu{

font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #FFFFFF;
 font-size: 11px;
 text-align:center;
 border-left:1px solid black;
 padding:4px 5px 2px 5px;
  text-decoration:none;
}
 a.menu:link{
 color:#FFFFFF;
 background-color:#9C3647;
 text-decoration:none;
}

a.menu:visited{
 color:#FFFFFF;
 background-color:#9C3647;
 text-decoration:none;
}
 a.menu:focus{
 color:#000000;
 background-color:#FFFFFF;
 text-decoration:none;
}
a.menu:hover
{
 text-decoration:underline;
}
 a.menu:active
{
 color:#000000;
 background-color:#FFFFFF;
 text-decoration:none;
}

Da die Linkboxen unterschiedlich groß entsprechend der enthaltenen Textlänge sein sollen, bietet sich ein float layout mit echten Boxen meiner meiner Meinung nach nicht an.
HILFE....
Viele Grüße
Mascha

[Detlef G.]

Hallo Mascha,

... klappt auch alles nur das netscape und Firefox einen häßlichen schwarz gepunkteten Rahmen um meinen weißne hintergrund machen,

Den macht der IE auch.
Dieser Rahmen ist die Browsereigene Anzeige, welches Element den Fokus hat,
damit auch mit der Tabulatortaste navigiert werden kann.
Du kannst ihn nicht verhindern, ohne das Fokussieren selbst zu unterbinden,
aber das willst du ja nicht.

Allerdings habe ich dann bei oben genanntem Hover Effekt zusätzlich das Problem, dass der Hintergrund nicht komplett die Farbe wechselt, sondern der Teil, der eigentlich zwischen den Beiden boxen liegt, seine Farbe behält.

Ja, du hast noch Leerzeichen bzw. Zeilenumbrüche zwischen den Elementen.
Bei Inlineelementen werden diese angezeigt.

<div id="mainNavi">
   <ul>
<li><a class="menu" href="#">link1</a></li><li>
<a class="menu" href="#">link2</a></li><li>
<a class="menu" href="#">link3</a></li><li>

^^^^
                Das ist gehört hier nicht hin.

</ul>
</div>

Die KLassen sind absolut unnötig und blähen nur den Quelltext auf.
Du kannst alles innerhalb von #mainNavi über den Nachfahrenselektor
ansprechen.

#mainNavi li{  
  display:inline;}  
  
#mainNavi a{  
  ...  
}  
#mainNavi a:link{  
  ...  
}  

Da die Linkboxen unterschiedlich groß entsprechend der enthaltenen Textlänge sein sollen, bietet sich ein float layout mit echten Boxen meiner meiner Meinung nach nicht an.

Hast du es mal versucht?
Vielleicht wird damit und mit display:block für #mainNavi a dann auch der
gepunktete Rahmen weniger problematisch.

Auf Wiederlesen
Detlef

[mascha]

Hallo Mascha,

... klappt auch alles nur das netscape und Firefox einen häßlichen schwarz gepunkteten Rahmen um meinen weißne hintergrund machen,

Den macht der IE auch.
Dieser Rahmen ist die Browsereigene Anzeige, welches Element den Fokus hat,
damit auch mit der Tabulatortaste navigiert werden kann.
Du kannst ihn nicht verhindern, ohne das Fokussieren selbst zu unterbinden,
aber das willst du ja nicht.

--- nein bloß nicht, ich versuche ja krampfhaft barrierefrei zu programmieren. Allerdings sehe ich im IE keinen Rahmen??

Ja, du hast noch Leerzeichen bzw. Zeilenumbrüche zwischen den Elementen.
Bei Inlineelementen werden diese angezeigt.

--- Wo denn? Diesen Tip habei ch im Netz schon gefunden, woraufhin ich die öffnenden li-Tags in die vorherige Zeile verschoben habe. Danach funktionierte es im IE, leider nur da. Das übrig gebliebene li tag, ist ein Kopierfehler. Eigentlich ist die linkliste länger, aber ich wollte das Posting nicht unnötig aufblähen.

<div id="mainNavi">
   <ul>
<li><a class="menu" href="#">link1</a></li><li>
<a class="menu" href="#">link2</a></li><li>
<a class="menu" href="#">link3</a></li><li>
                                          ^^^^
                Das ist gehört hier nicht hin.
</ul>
</div>

Die KLassen sind absolut unnötig und blähen nur den Quelltext auf.
Du kannst alles innerhalb von #mainNavi über den Nachfahrenselektor
ansprechen.

--- danke werd ich versuchen, bin noch etwas unbeholfen was CSS  angeht.

Vielen Dank für Deine Hilfe!

[Mascha]

Oje, Kommando zurück - kaum macht man was richtig funktioniert es! Habe jetzt nochmal den Quellcode bearbeitet und die ganze Liste in eine Zeile geschrieben und schon funktionierts. Super, danke!!!
Obwohl es mir wirklich ein Rätzel ist, warum die Formatierung der Quelltextes berücksichtigt wird??!?!!!
Bleibt das blöde Umrandungsproblem. Falls jemand einen guten Trick weiß? Vielleicht kann man diese Umrandung ja wenigstens weiß machen?
Viele Grüße
Mascha

[e7]

Hi,

Bleibt das blöde Umrandungsproblem. Falls jemand einen guten Trick weiß? Vielleicht kann man diese Umrandung ja wenigstens weiß machen?

weg kriegst du die, indem du auf Links verzichtest (d. h. onclick=""). Das machst du aber nicht.

Die Umrandung hat normalerweise keine Farbe, sie stellt lediglich eine Invertierung der darunterliegenden Pixel dar.

E7

[Detlef G.]

Hallo E7

weg kriegst du die, indem du auf Links verzichtest (d. h. onclick=""). Das machst du aber nicht.

--- nein bloß nicht, ich versuche ja krampfhaft barrierefrei zu programmieren.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Mascha

Allerdings sehe ich im IE keinen Rahmen??

Das ist allerdingsseltsam, bei deinem Beispiel ist bei mir der Rahmen im
Mozilla unauffällig, wärend er im IE eher störend ist.

--- Wo denn?

<li><a class="menu" href="#">link1</a></li><li>

Zeilenumbruch

<a class="menu" href="#">link2</a></li><li>

Zeilenumbruch

<a class="menu" href="#">link3</a></li><li>

Auf Wiederlesen
Detlef