[CSS] Grafika w menu po najechaniu na link, Problem z wypozycjonowaniem Opcje

[Woonski]

Witam,

co prawda nie raczkuję w temacie CSS ale napotkałem problem i nie potrafię sobie z nim poradzić. Może jakieś inne świeże spojrzenie na problem pozwoli m go rozwiązać :/

Otóż mam stworzone menu.

[HTML] pobierz, plaintext 
ul.menu_oferta {
height: 300px;
background-color: #0e1424;
line-height: 30px;
font-family: Verdana;
font-size: 11px;
}
[HTML] pobierz, plaintext 

do tego dochodzi styl wypunktowania poszczególnych pozycji:

[HTML] pobierz, plaintext 
ul.menu_oferta a:hover{
color: #ffffff;
}
 
ul.menu_oferta a{
color: #e0e0e0;
}
 
.background1 {
background: #0E1424;
padding-left: 45px;
}
 
.background2 {
background: #23293A;
padding-left: 45px;
border-bottom: 1px solid #414551;
}
[HTML] pobierz, plaintext 

.background1 i .background2 to klasy dla jQuery, dzięki którym parzyste pozycje mają inny kolor aniżeli nieparzyste. Wszytko fajnie, dopóki nie przyjdzie mi umieścić grafiki wypunktowania po najechaniu na link.

Główny problem polega na tym, że pozycje w menu są za pomocą padding-left przesunięte o 45px w prawo i umieszczenie jeszcze grafiki powoduje, że grafika chowa się pod tekst. Próbowałem pokombinować z minusowymi marginesami

[HTML] pobierz, plaintext 
background: url(../images/bullet.png) no-repeat -10px 50%;
[HTML] pobierz, plaintext 

aby samą grafikę przesunąć trochę w lewo niestety tak nie działa.

Padding zastosowałem w klasach background ze względu na to, że gdzie indziej selektor ten powoduje przesunięcie o 45px całego tła.
Może łatwiej będzie zrozumieć moje wypociny jak wrzucę obraz tego co chce, a tego co mam (IMG:style_emoticons/default/smile.gif)

(IMG:http://i.imgur.com/ZhKjp.png)

Jeżeli coś jest niejasne służę pomocą (IMG:style_emoticons/default/wink.gif)

[Shili]

spróbuj text-indent dla tego elementu, dla którego masz ustawione tło.

Jeśli nie zadziała prosiłabym o wrzucenie kodu np. na jsfiddle, wtedy pewnie będzie można więcej powiedzieć.

[Woonski]

spróbuj text-indent dla tego elementu, dla którego masz ustawione tło.

Jeśli nie zadziała prosiłabym o wrzucenie kodu np. na jsfiddle, wtedy pewnie będzie można więcej powiedzieć.

Dzięki za podpowiedź rozwiązałem to z deczko inaczej:

[HTML] pobierz, plaintext 
li  a:hover{
background: url(../images/bullet.png) no-repeat 10px 50%;
}
 
li.current a{
background: url(../images/bullet.png) no-repeat 10px 50%;
}
 
ul.menu_oferta {
height: 300px;
background-color: #0e1424;
line-height: 30px;
font-family: Verdana;
font-size: 11px;
}
 
ul.menu_oferta a{
color: #e0e0e0;
padding-left: 30px;
}
 
.background1 {
background: #0E1424;
}
 
.background2 {
background: #23293A;
border-bottom: 1px solid #414551;
}
[HTML] pobierz, plaintext