[css][xhtml]Zmian <li> po najechaniu na pozycję (hover) Opcje

[babejsza]

Witam,

napotkałem problem w trakcie robienia bocznego menu. Mianowicie chodzi mi o to, żeby normalnie menu wyświetlało się bez obrazka z lewej strony. Ma on się pojawić dopiero po najechaniu na dane pole menu.

Obrazek jest dość duży (38x38px) i jak do tej pory wygląda to tak, że po najechaniu na daną pozycję wszystko się paskudnie rozsuwa. Chciałbym, żeby tekst był zawsze w jednym miejscu, a tylko dodawał się obrazek.

To z czym mam problem jak na razie wygląda tak:

[HTML] pobierz, plaintext 
<div id="left">
  <ul>
    <li><a href="#">pozycja 1</a></li>
    <li><a href="#">pozycja 2</a></li>
    <li><a href="#">pozycja 3</a></li>
  </ul>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#left ul{
	margin: 0 0 0 38px; padding: 0;
}
#left li{
	padding: 0; margin: 12px 0 12px 0;
	list-style-type: none;
}
#left li:hover{
	list-style-image: url(images/kostka.gif);
}
[HTML] pobierz, plaintext 

Będę bardzo wdzięczny za pomoc (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) .

[mike]

Ostatni właśnie walczyłem z obrazkami dla list i doszedłem do wniosku ze obrazek lepiej umieszczać w tle li.

Daj padding-left dla li dokładnie tyle ile szerokośc obrazka i bez tła.
Tło dodawaj przy zdarzeniu li:hover

Bedzie działało dobrze i wyglądało tak samo we wszystkich przeglądarkach.
Bo niestety za pomocą list-style-image bąde róznice w przeglądarkach.


A jak chcesz koniecznie za pomocą list-style-image to daj dla li w list-style-image przezroczystego gifa o rozmiarach takich jak potem ten ktory wsoczy dla :hover

[babejsza]

super (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Wielkie dzięki. Zaraz wypróbuje (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) .

//EDIT

Przetestowane. Działa bardzo ładnie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) .