Absolute positioning makes trouble with IE/Chrome

Question

I have a gallery on my website. One way to switch the photo that's shown is to press the little images on the bottom of the gallery (as shown in the below photos). To position the little images I used absolute positioning and margins, as needed to make them straight. The problem is, that when I use absolute positioning in chrome, the image's default position starts from the middle (so to position the first image (1), I assigned it with 'margin-right:-395px;'. In IE, the image's dafault positiong start from where it really should be: So the '-395px' make the image go further to the right, and the images are shown badly.

The same thing happens with the button that in chrome is on the right-top corner.

This is my website, if you check it with those 2 different browsers (I haven't checked others yet), you can see the problem. Images are added below as well.

Chrome:

Explorer:

CSS for first little image: (second image: add 100 to margin-right, third image: add 200)

height:90px;
width:90px;
margin-top:5px;
position:absolute;
opacity:0.6;
filter:alpha(opacity=60);
border-radius:5px;
cursor:pointer;
margin-right:-395px;

Solution 1

if you are using absolute positioning. you should use the right/left & top/bottom attributes to position the elements instead of margin.

if you'll do it that way, all the browsers will position your element in the same spot. read more here

also: make sure your container (the parent of the absolute elements) has position: relative; set, so the positioning of his children (the absolute ones) will be relative to him. this will greatly help you if you have to move the container some day..

Solution 2

you have to use this

pop.style.left = l+"px"; 
pop.style.top = t+"px";

instead of

pop.style.posLeft = l; 
pop.style.posTop = t;

Comments

[OriShuss]

Thanks alot! Can you explain please why is using margin disrupting the browsers? And what is the difference between 'right' and 'margin-right'?

[avrahamcool]

I think this answers your questions.