Navigatiosschaltflächen vergrößern sich nach Klick

[matschi]

Hallo allerseits,
bin gerade am Verzweifeln: Die Schaltflächen und die Schrift der Navigationsleisten vergrößern sich beim Draufklicken und liegen dann etwas über den darüber- und darunterliegenden Elementen. Nach dem Aktualisieren der Seite (F5) bleibt die Hintergrundfarbe der Schaltfläche dann weiß.
Ich habe schon in der CSS-Anweisung ausprobiert, für visited eine Schriftgröße festzulegen, das hat aber keine Auswirkung.
Hat jemand eine Idee?
Hier der CSS-Code:

#topnav {
background:#2864BE;
border-bottom:2px solid #fff;
}

#topnav ul, li {
display:inline;
line-height:48px;
font-family:Arial,Helvetica,sans-serif;
font-size: 110%;
font-weight:bold;
text-decoration: none;
}

#topnav a {
margin:0px; padding:13px 35px 14px 25px; }
#topnav a:link { color: #ffb13d; text-decoration: none; }
#topnav a:visited { color: #ffb13d; background:#2864BE; }
#topnav a:active a:focus { color: #ffb13d; background:#2864BE;
}

#topnav a:hover {
background:#427DD7;
text-decoration: none;
colorarkOrange;
letter-spacing:1px;
border-top:3px solid red;
border-bottom:2px solid red;}

 

[krid2873]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Moin,

#topnav a:hover {
background:#427DD7;
text-decoration: none;
color:darkorange;
letter-spacing:1px;
border-top:3px solid red;
border-bottom:2px solid red;}

Die Angabe letter-spacing dürfte für die ungewollte Textvergrößerung verantwortlich sein. Zumindest lese ich das aus dem wenigen CSS heraus.

Hier hat sich ein Tippfehler eingeschlichen:

[B]#topnav a:active a:focus[/B] { color: #ffb13d; background:#2864BE;    
}

So sollte es eigentlich sein:

[B]#topnav a:active, #topnav a:focus[/B] { color: #ffb13d; background:#2864BE;    
 }

 

[matschi]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Moin,

Die Angabe letter-spacing dürfte für die ungewollte Textvergrößerung verantwortlich sein. Zumindest lese ich das aus dem wenigen CSS heraus.

Hier hat sich ein Tippfehler eingeschlichen:

[B]#topnav a:active a:focus[/B] { color: #ffb13d; background:#2864BE;    
}

So sollte es eigentlich sein:

[B]#topnav a:active, #topnav a:focus[/B] { color: #ffb13d; background:#2864BE;    
 }

Danke für den Hinweis - habe die fehlende Angabe ergänzt.
Was die Größenänderung (vor allem in horizontaler Richtung) angeht:
Auch wenn ich letter-spacing auf 0 setze bläht sich die Schaltfläche beim Draufklicken auf.
Das letter-spacing war außerdem ja nur als hover-effect festgelegt.
Hast Du noch eine Idee?

 

[mr_blobb]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Was meinst Du mit aufblähen? Einfach nur, dass die Schaltfläche größer wird? Das liegt wahrscheinlich am Rahmen beim, Hovereffekt, der die Schaltfläche um ein paar Pixel größer macht.

 

[Sturmkraehe]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

mein vorposter wird denke ich recht haben,
siehe:

Das Box-Modell definiert die Berechnung der Breite und Höhe von Elementen. Seit der CSS1-Spezifikation des W3-Konsortiums aus dem Jahre 1996 errechnet sich die Gesamtbreite eines Elements aus einer Addition

der Seite Breite des Elementinhalts (width),
des Seite Innenabstands (padding),
der Seite Rahmenstärke (border-width) und
des Seite Außenabstands (margin).

 

[matschi]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

also jetzt habe ich auch noch die Linienstärke sowohl bei #topnav als auch vei #topnav a:hover auf 0 gesetzt. Die Ausdehnung der Schaltfläche verringert sich dann zwar um diesen Wert, das Phänomen des "blow up" bleibt aber dennoch erhalten.
Woran kann das liegen?

 

[Myhar]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Wie wäre es, wenn du einen Testfall online stellst? So kann man nur raten, was nicht zielführend sein kann.
Noch besser wäre es, wenn du dir mit Firebug (oder einem Webdeveloper Tool deiner Wahl) anschaust, welche Werte auf die jeweiligen Elemente wirken und diese dann zurückstellst. So muss dein Problem relativ schnell zu beheben sein.

L. G.

 

[Sturmkraehe]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Also wenn du die roten balken innen haben möchtest dann müsstest du das padding anpassen etwa bei #topnav a:hover mit:

padding:10px 35px 12px 25px !important;

ein aufblähen der Schrift kann eigentlich nur über das letter spacing kommen

 

[matschi]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Also ich habs nicht rausgekriegt mit Firebug.
Hab mal eine Testseite online gestellt:

Vielleicht findest Du ja was.

 

[krid2873]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Zeile 226 in deiner CSS-Datei:
Laut Firebug erben die Navigationsflächen auch diese Geschichte hier:

[COLOR=Red][B].main a:link, a:visited, a:active, a:focus[/B][/COLOR]  {   
font-size: 130%;   
font-weight:bold;   
text-decoration:none;   
color: #000;   
letter-spacing:1px;}

Diese Angaben sollten wohl nur für die Links mit der Klasse .main sein, daher:

[COLOR=Red][B].main a:link, .main a:visited, .main a:active, .main a:focus[/B][/COLOR]  {   
font-size: 130%;   
font-weight:bold;   
text-decoration:none;   
color: #000;   
letter-spacing:1px;}

 

[matschi]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Vielen Dank - genau daran hats gelegen.
Ich verstehe bloß nicht, wieso die Eigenschaften der Klasse main vererbt werden, das steht doch im CSS-Code unter den Anweisungen für die Navigation.
Jedenfalls werde ich mir in Zukunft angewöhnen, vor jede Anweisung die ID- oder Klassenbezeichnung zu setzen.
Vielen Dank noch einmal für den Tipp.

 

[Myhar]

AW: Navigatiosschaltflächen vergrößern sich nach Klick

Das liegt daran, dass es 4 verschiedene Anweisungen sind... und unter welchem Bereich im Stylesheet was steht ist dem Browser mehr als nur egal ;-)

 a:visited, a:active, a:focus

das sieht der Browser und wendet es auf jedes a Element an.

.main a:link,

Wendet er auf jedes a Element an, welches in einem Element mit der Klasse main ist (ob das Element direkt darüber ist oder es noch Elemente dazwischen gibt, ist hier irrelevant)
Das sind die Grundlagen für CSS, welche du dir hier einmal ansehen solltest

L. G.