Jump to content

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
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.

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
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!

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
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.

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.

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...