Jump to content
tnd1000

Image moves on zoom in, zoom out

Recommended Posts

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 by tnd1000

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by tnd1000

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...