menu się rozjeżdża :(

Witam od niedawna eksperymentuje z Joomla, dokładniej z wer. 1.7
Stworzyłem sobie menu w joomla 7 pozycji, pola nie są równe. Do diva podpiąłem styl. Problemem jest to że podczas zwiększania i zmniejszania widoku strony przy pomocy suwaka z Opery(są również minimalne różnice między FF i Opera), menu się rozjeżdża, i nie bardzo widać separator. Jak to naprawić? Oczywiście zerkałem na wątki forum i używałem Google. Na tę chwilę użyłem małego oszustwa z tłem, ale wole wiedzieć jak się to robi poprawnie. Dziękuję.
CSS:

#menuGornePolozenie {
position:absolute;
left:148px;
top:170px;
width:1000px;
height:44px;
}
.menu1 ul, ul li {
display: block;
list-style: none;
margin: 0 ;
padding:0;
font-family: Arial;
font-size: 12px;

}

.menu1 ul {
float: left;

}

.menu1 ul li {
background-image: url("/dawid.kaleta/j/templates/mojszablon/images/separator2.png");
float: left;


}

.menu1 ul a:link, ul a:visited {
text-decoration: none;
display: block;
font-weight: bold;
color: #fff;
height: 20px;
padding: 12px 15px ;
background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCz.png");
}

.menu1 ul a:hover, ul a:active {

background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");

}

i php :

<DIV ID="menuGornePolozenie" class="menu1">
<jdoc:include type="modules" name="menu"/>
</DIV>

wprowadziłem drobne poprawki i sztuczkę z ciemnym tłem z-index pod spód, nie rozjeżdża się aż tak i są widoczne separatory. A jak zrobić by po kliknięciu na daną pozycję pozostała ona podświetlona np tloCz.png do czasu najechania i kliknięcia na inną, to musi być skrypt czy html wystarczy?

.menu1 ul, ul li {
	display: block;
	list-style: none outside none;
	margin: 0 ;
	padding:0;
	font-family: Arial;
    font-size: 12px;
    font-weight : bold;
}

.menu1 ul li {
	
	float: left;
	white-space: nowrap;
    background-repeat: no-repeat;
    padding: 0px 1px;
	background-image: url("/dawid.kaleta/j/templates/mojszablon/images/separator2.png");
}

.menu1 ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	color: #fff;
	height: 20;
	padding: 14.5px 14.5px ;
	
	background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCz.png");
}

.menu1 ul a:hover {
   
   	background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
	height: 20;
	padding: 14.5px 14.5px ;
	}
.menu1  ul a:active  {
   
   	background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
	height: 20;
	padding: 14.5px 14.5px ;

	}

A jak zrobić by po kliknięciu na daną pozycję pozostała ona podświetlona np tloCz.png do czasu najechania i kliknięcia na inną, to musi być skrypt czy html wystarczy?
Tylko javascript.

Tak naprawdę to nie, nie tylko JavaScript ;).

Da się w niektórych przypadkach przehackować CSS-em. Czasem nawet wychodzi to całkiem elegancko.

Spróbuj pseudoklasy :active na hiperłączu. Po kliknięciu, link robi się :active do czasu gdy np. kliknie się gdzie indziej.

BTW: czemu masz dopełnienia po 14.5px? Ile to jest czternaście i pół piksela? Zrobiłeś to, bo wiesz co robisz, czy tak na pałę? Jeśli na pałę, to odradzam. Jeśli nawet wydaje Ci się, że wiesz co robisz, to i tak raczej odradzam. Wygląda to dość dziwnie i obawiam się o implementacje w różnych przeglądarkach. W grę wchodzą bowiem zaokrąglenia. Już wolałbym dać np. 14px u góry i 15 px na dole, jeśli chciałbym mieć sumę dopełnień 29px. Jeśli strona będzie oglądana w zwykłych, standardowych warunkach (monitor komputera lub laptopa, brak zoomu), to przeglądarka i tak będzie musiała wybrać, gdzie chce mieć 1px więcej, a gdzie mniej. Lepiej to już wybrać samemu.

serdeczne dzięki za wszystkie porady, popoprawiałem. A co do pseudo-klasy active jak to zrobić poprawnie? Coś próbowałem ale nie działa.
menu1 ul a:link, ul a:visited {
text-decoration: none;
display: block;
color: #fff;
height: 20;
padding: 14px 13px ;

background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCz.png");

}

.menu1 ul a:hover {

background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
height: 20;

}

.menu1 li a:active {

background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
height: 20;


}