why do my images change position when rolled over?

Question

I have a row of buttons (6 six) al same size. When each one is rolled over..

<img src="home.jpg" onmouseover="HomeAct(this)" onmouseout="Home(this)"/>

function HomeAct(obj){
    obj.src='webseparada/home.png';
}

function Home(obj){
    obj.src='webseparada/home.jpg';
}

home.jpg is a regular rectangle

home.png is a folder where label es is the button (home.jpg)

---

Here is why button1 sends all reimaing button the next line. When i sept in button 2 it doesn't move button1, but it goes down a line and sends al remaining another line, can anyone tell me if this can be corrected by css?

Thank you very much

Answer 1

Are you sure the image sizes are the same? It would make sense if they weren't. You can also explicitly specify the image sizes through css to force them to be consistent.