Witam! Mam problem, oto mój kod CSS:

[HTML] pobierz, plaintext 
#menu_glowne_belka{
	float: center;
	background:url(images/cellpic.gif);
	width: 100%;
	height: 38px;
	color: #5a5a5a;
	font-size: 11px;
	font-weight: bold;
	line-height: 30px;
	display: block;
}
#menu_glowne_belka ul {
	list-style: none;
	margin: 0 auto;
}
#menu_glowne_belka li {
	float: left;
	margin: 14px auto;
}
#menu_glowne_belka a {
	display: block;
	font: normal normal normal 11px/11px Verdana, Geneva, Tahoma, sans-serif;
	color: #000000;
	padding: 8px;
}
#menu_glowne_belka li a:hover {
	border: 1px solid #4b2206;
        background-color: #5c3317;
	padding: 8px 8px 8px 8px;
	display: block;
 
	border-radius: 5px;
	-moz-border-radius: 5px 5px 5px 5px;
}
[HTML] pobierz, plaintext 

Normalnie menu wygląda tak:


Jak widać wyrazy "XD" oraz "LOL" są nieco przesunięte w dół, a po najechaniu myszką:



Moje pytanie brzmi: Jak mogę zrobić, aby napisy się wyrównały nieco w górę (ale żeby również efekt koloru tła był równy po najechaniu myszką), oraz aby całe napisy były na środku belki, a nie po lewej stronie?

Kod HTML:

[HTML] pobierz, plaintext 
<div id="menu_glowne">
	<div id="menu_glowne_belka" class="menu_glowne_belka">
		<ul>
			<li><a href="#"></a></li>
			<li><a href="#">LOL</a></li>
		</ul>
	</div>
</div>
[HTML] pobierz, plaintext 

1.

[CSS] pobierz, plaintext 
#menu_glowne_belka a {
    display: block;
    font: normal normal normal 11px/11px Verdana, Geneva, Tahoma, sans-serif;
    color: #000000;
    padding: 9px;
}
[CSS] pobierz, plaintext 

Do padding dodaj 1px, czyli 9px, a nie 8px, ten 1px bierze się z obramowania które dodajesz w hover.


2.

[CSS] pobierz, plaintext 
#menu_glowne_belka{
    text-align: center;
    width: 100%;
    height: 38px;
    color: #5a5a5a;
    font-size: 11px;
    font-weight: bold;
    line-height: 30px;
    display: block;
}
[CSS] pobierz, plaintext 

Skąd wziąłeś "Float:center" lol
text-align: center - ładniej wygląda i nawet działa

[CSS] pobierz, plaintext 
#menu_glowne_belka li {
    display: inline-block;
    margin: 14px auto;
}
[CSS] pobierz, plaintext 

Skoro nadawałeś czemuś, że ma być z lewej, to jakim cudem miałoby być na środku? Sprawdź jak tam z działaniem inline-block na starych przeglądarkach, najstarsi górale mówią, że może dobrze nie działać.


3. Przeczytaj jakiś podstawowy kurs, nie będziesz musiała zadawać takich pytań.

Działa, lecz jeszcze nie do końca:

Chciałbym, żeby po najechaniu myszką ta cała obramówka z tłem była większa, lekko mniejsza niz wysokość belki. Jak zmieniam z:

[HTML] pobierz, plaintext 
padding: 0 9px 0 9px;
[HTML] pobierz, plaintext 

na:

[HTML] pobierz, plaintext 
padding: 9px;
[HTML] pobierz, plaintext 

To obramowanie owszem, robi się większe, lecz tekst i całe obramowanie wystaje za belkę. Ponadto jak usunąć efekt "ruszającego się tekstu" po najechaniu myszką?