Image moves on zoom in, zoom out

[tnd1000]

I feel rather stupid for even asking about this, since I feel like I show know the fix, but it's just not coming to me and I'm not sure where else to look for answers. I have been trying to position a .gif on my site's global header, but whenever I change the zoom setting on my browser, the image moves with it (as opposed to staying where I positioned it). Since I was just complaining about a site's header having an image like this today, I would like fix it if I can. Any help would be greatly appreciated!! Here's the CSS for the .gif so far:

  img#alert { width: 30px; border-radius: 3em;}

Edited January 22, 2013 by tnd1000

[Labtec]

Can you post all your HTML and CSS please? I remember having this problem before when I would set an image with pixels but set its container element (let's say a <div>) with percentage. I can't be sure without seeing your code. Go through your code and see if you have set different size values on different elements. I have since consistently set pretty much everything to pixels and my site works great in all browsers and resolutions and even on zoom in-out. Kind regards, Lab.

[tnd1000]

Thank you very much for the reply! Well...because of the software I'm using, it's a bit complicated to post all of the HTML and CSS, unfortunately. If you'd like, here's a link to the site: www.mypetsonparade.com The styling on the .gif image:

#alert { width:30px; border-radius:3em;}

I'll go through and check my stylesheets for the size values.

Edited January 25, 2013 by tnd1000

[Labtec]

What software are you using? What browser are you using? It's not moving in FF for me. Regards, Lab

[tnd1000]

I'm using Firefox, and the software is called SocialEngine.

[Labtec]

Did you got through your size values in the end? Regards, Labby.

[tnd1000]

I'm still in the process of going through them (there's a lot of stuff to look at). Thank you very much for your help here!

[xhtmlchamps1]

I feel rather stupid for even asking about this, since I feel like I show know the fix, but it's just not coming to me and I'm not sure where else to look for answers. I have been trying to position a .gif on my site's global header, but whenever I change the zoom setting on my browser, the image moves with it (as opposed to staying where I positioned it). Since I was just complaining about a site's header having an image like this today, I would like fix it if I can. Any help would be greatly appreciated!! Here's the CSS for the .gif so far:

img#alert {width: 30px;border-radius: 3em;}

you have mentioned a class and i.dit comes from where?just display all the css regarding the output to be displayed

[Labtec]

Straight away we can see that ou have set the width with pixels and the border with em's. If you've done it with most elements, you will get unexpected results with different resolutions and/or zooming in/out. Regards, Lbb.

[Ingolme]

You should avoid ems as units for anything but text if you want to stop things from being misplaced when the browser increases text size: Values using em as a unit are directly proportional to the size of the text.

[tnd1000]

Ahhh, see, I did not know that about ems. I shall edit accordingly, and see if that fixes the problem.