Element moves when hovering

[george61]

Ok I made hover effect for group of five images-appearing border. But when I'm hovering the image some other two images are moving few pixels downward.

<div class="rel">
<img src="images/4wheel2.jpg" height="85" id="on"/>
<img src="images/4wheel2.jpg" height="85" id="on"/>
<img src="images/4wheel2.jpg" height="85" id="on"/>
<img src="images/4wheel2.jpg" height="85" id="on"/>
<img src="images/4wheel2.jpg" height="85" id="on"/>
</div>
<div class="ar">
<img src="images/arrowc.png"/>
</div>
<div class="at">
<img src="images/arrowc.png"/>
</div>

rel is class of div containing 5 images aligned horizontally; ar and at are classes containing identical arrow images; when I'm hovering the 4wheel2.jpg the arrow images are moving downwards.
The CSS code:

.rel{
	margin-left: 24%;
	margin-top: 40%;
	}
.ar{
	margin-top: -50%;
	margin-left: 45.5%;
	}
.at{
	margin-top: -3.2%;
	margin-left: 66.5%;
	}
#on:hover{
	border: 3px solid #2875DE;
	}

The hover makes ar and at classes move. Best regards

[Varnius]

It`s because you apply border to hovered element only. Add transparent border or 3px margin to non-hover state of #on. And you must not use ids for multiple elements if you want your page to be valid. Use classes instead.

[george61]

Thanks man. Now I'm having another problem.

<p class="cng" onclick="call()"><input type="file" id="file"/><b>Change background</b></p>

I want to replace this with

<a href="javascript:call()"><input type="file" id="file"/><b>Change background</b></a>

When I make the replacements the other elements of the page are moving few hundred pixels downward.This is the CSS

.cng{
	color: white;
	margin-top: -79.1%;
}

Any help will be greatly appreciated.

[Varnius]

Thanks man. Now I'm having another problem.

<p class="cng" onclick="call()"><input type="file" id="file"/><b>Change background</b></p>

I want to replace this with

<a href="javascript:call()"><input type="file" id="file"/><b>Change background</b></a>

When I make the replacements the other elements of the page are moving few hundred pixels downward.This is the CSS

.cng{
	color: white;
	margin-top: -79.1%;
}

Any help will be greatly appreciated.

Why did you put <input> inside anchor? The main problem I can see here is bad(non-valid) markup.

Why not

<form action="">
   <p>
      <label>Change background</label>
      <input type="file" id="file" onclick="someFunction();"/>
   </p>
</form>

[mpb2053]

float your anchor tag left. display block or inline-block as needed also. inputs shouldn't do inside of anchor tags, but if that's the way you want to do it, then this should fix it.