CSS Button Problem

[CHXENVS]

Tag Leute,

will sich zwar jetzt im ersten Moment übertrieben lächerlich anhören, aber ich bekomm es einfach nicht gebacken! (Lachen erlaubt)

Ich versuche gerade in meine Navi einen Loginbutton einzubauen.
Die Hover (normal, hover, active) werden aus einer Bilddatei ausgelesen.
Bis jetzt ist es ja noch kein Problem, nun will ich aber meinen Button nicht am Bildschirmrand (top) kleben haben, sondern will diesen Button um 13px nach unten verschieben.

Jetzt werden einige sagen, wo liegt das Problem? Mach doch einfach margin-top oder padding-top. - Keine schlechte Idee, aber wenn ich margin-top verwende, schiebe ich die komplette Navi runter und wenn ich padding-top verwende schiebe ich zwar den Button an die richtige Stelle, nur dann machen mir die Hover nen Strich durch die Rechnung ... (Siehe Screen)

Screen (mit der Verwendung von padding-top)

 Spoiler

Normal



Hover



Active

Sieht dann leider so aus, wenn ich mit der Maus über den Button fahre / klicke.


Hier wäre noch der CSS Code des Buttons:

 Spoiler

#login_button{
padding-top:13px;
}	
						
#login_button a{
background:url(../images/button_small.png) no-repeat;
height:37px;
width:102px;
float:right;
}

#login_button a:hover{
background:url(../images/button_small.png) no-repeat;
height:76px;
width:102px;
margin-top:-39px;
}
				
#login_button a:active{
background:url(../images/button_small.png) no-repeat;
height:115px;
width:102px;
margin-top:-78px;
}

Und hier ist der Container im Quelltext bzw. aus der index:

 Spoiler

<div class="navi_area">
   		<div id="trenn_right"></div>
        	<div id="register_text"><p>Keinen Account?
            	<a href="#"><b>Registrieren!</b></a>
            	<a href="#"><b>Passwort vergessen?</b></a></p></div>
        	<div id="trenn_left" style="float:right;"></div> <--- das hier ist nur provisorisch gelöst :D
            
        	<div id="login_button"><a href="#"></a></div>
               
        </div>

[Mikesch01]

Weiss grad nicht, warum jeder Zustand bei dir eine anderen Größe hat. Eigentlich sollte sich nur das Bild ändern:

#login_button{
padding-top:13px;
}	
						
#login_button a{
background:url(../images/button_small.png) no-repeat;
background-position: 0px 0px;
height:37px;
width:102px;
float:right;
}

#login_button a:hover{
background-position: 0px 30px;
}
				
#login_button a:active{
background-position: 0px 60px;
}

Die Werte für background-position sind fiktiv. Hier musst du deine eigenen Werte eingeben.

[CHXENVS]

Verdammte sche... wieso bin ich nicht selbst drauf gekommen?! Danke!!