View Full Version : Relative pos. element displaced when "zoom" is used in browser.

Mar 16th, 2009, 12:27 AM
This is the FIRST css template (http://royalforest.net/luann/luann.htm) I have ever designed, and I'm having an issue with the pin in the bottom left hand corner. I think it's a really neat visual element, so I want to keep it if at all possible. The problem is, when you use the ZOOM feature (text zoom is fine) in firefox or ie (haven't checked all the others) the pin goes out of place. Is there another workaround for this that somebody else knows?
Here's the page:

Mar 16th, 2009, 12:37 AM
It also goes out of place if you resize the browser.

Try putting it inside your "main" div. Then position it with margin top and left.

Mar 16th, 2009, 12:49 AM
It's not just zoom either. Re-size your browser window to a narrower size and you'll see the pin move over.

That's because it's relative to the browser window. If you want it to behave as a background image, try nesting another div like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
body {
width: 100%;
height: 100%;
font: 12px "Comic Sans MS";
background: url(http://royalforest.net/luann/images/blue-gradient.jpg) repeat-x;
text-align: center;
* {
margin: 0;
padding: 0;
border: none;
width: 100%;
height: 100%;
background:url(http://royalforest.net/luann/images/pattern-pieces.png) repeat;
#wrapin {
width: 100%;
height: 100%;
background: url(http://royalforest.net/luann/images/pin.png) no-repeat 10% 70%;
<div id="wrapout">
<div id="wrapin">
<!--end wrapin--></div>
<!--end wrapout--></div>

Mar 17th, 2009, 04:49 PM
I have done this but the pin is still not moving with my main div properly. Have I neglected something?

--------------time lapse-------------

Nevermind, I figured it out. I just left everything as is, except I added another div which had the same dimensions as my main div, and wrapped the main in it. Then I put the pin div inside the wrap div. It's working great now.
Thank you for your help!!!