Ich habe 4 Schaltflächen in einer Kopfzeile div. Ich habe sie alle mit Rändern oben und links in CSS platziert, so dass sie alle nebeneinander in einer Zeile stehen. Nichts Außergewöhnliches.

Jetzt versuche ich, eine Aktion auszuführen, wenn die Taste gedrückt wird. Der Tastentext verschiebt sich ein wenig nach unten.

Ich benutze diesen Code in CSS:

    #btnhome:active{
    line-height : 25px;
}

HTML:

<div id="header">           
        <button id="btnhome">Home</button>          
        <button id="btnabout">About</button>
        <button id="btncontact">Contact</button>
        <button id="btnsup">Help Us</button>           
        </div>

Button CSS Beispiel:

#btnhome {  
    margin-left: 121px;
    margin-top: 1px;
    width: 84px;
    height: 45px;   
    background: transparent;
    border: none;
    color: white;   
    font-size:14px;
    font-weight:700;
}

Auch diese Schaltflächen funktionieren auf einem Header-Hintergrund. Ich bin sicher, dass dies etwas mit diesen Einstellungen zu tun hat:

#header {
    background-image: url(images/navbar588.png);
    height: 48px;
    width: 588px;
    margin: 2em auto;   
    }

Es funktioniert gut, aber das einzige Problem ist, dass alle anderen Schaltflächen ihren Text ebenfalls nach unten verschieben. Warum das? Kläre ich nicht klar, dass ich nur #btnhome verwenden möchte? Alle Tasten haben völlig unterschiedliche IDs. Alle Schaltflächen mit Ausnahme der Ränder haben dieselben CSS-Einstellungen. Was muss ich bearbeiten?

Vielen Dank.