display inline, niby jest, ale nie do końca

[bardyt]

Mam ten kod, który odpowiada za podmianę obrazka, po najechaniu, standardowo obrazki mają rozmiary jak podałem w kodzie, wszystko działa, dopóki nie dodam "display:inline" , bo w domyślnym układzie jest jedno pod drugim, ja chce to uzyskać dla linii poziomej, tylko co się dzieje, otóż zamiast wyśw. mi w pierwszym kroku np. https://bardyt.lh.pl/glowna.png, a potem https://bardyt.lh.pl/glowna2.png, pokazuje mi się w 1 kroku: https://bardyt.lh.pl/dada.png, a potem https://bardyt.lh.pl/glowna2.png. Tak jakby mi ucinało czy jak to inaczej nazwać, możecie pomóc?

ul#rollMenu li {
width: 101px;
height: 48px;
list-style: none;
  display:inline;
}
ul#rollMenu li img {
visibility: hidden;
border: 0;
margin: 0;
}
ul#rollMenu li:hover img {
visibility: visible;
}

[arve_lek]

Dzieje się tak bo używasz dispaly:inline

Zainteresuj się float:left

[bardyt]

Tak zauważyłem, że to przez inline, a zaraz zerknę na to float

EDIT:

Jak to w kodzie zapisać, bo jak dodaje to mi znikają wtedy wszystkie obrazki

EDIT2:

Już wiem, bo bawiłem się height i miał chwilowo wartość 0, przez to mi znikały

[blazejs]

<ul>

<li>

<a href="" class="m1">text</a>

</li>

<li>

<a href="" class="m2">text</a>

</li>

</ul>

li { display: inline; float: left;}

a { display: block; height: XXpx;}

.m1 a { background: url() no-repeat 0 0; width: YYpx;}

.m1 a:hover { background: url() no-repeat 0 -XXpx;}

w obrazku robisz w jednym pliku 2 stany, hoverem podnosisz drugi stan. XXpx w <a> to wysokosc, o ktora podnosisz w hover obrazek. Mozna to robic i poziomo i pionowo, tylko musisz zmodyfikowac kod. Nie wiem jak to jasniej napisac, mam zawsze problemy z tlumaczeniem..