asked on

Simple Positioning Help On an Image

Hi experts So i'm having some problem position an image on my webpage. It seems to move 50-80 pixels on the x (top) and y(left) axis between multiple browsers (I.E, Safari, and Mozilla all display the image in different positions.

What is the best code to use to ensure that the image shows up in the exact same place in every browser.
My code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css">
       html{
overflow:auto;
}
	       body
        {
           margin: 0px;
           padding: 0px;
		}
		#background {
                display:block;
				position:absolute;
                top:0px;
                left:0px;
                width:100%;
                z-index:0;
                margin:0px;
        }
        
        #Content {
                position:relative;
                width:90%;
                margin: 0px auto;
                z-index:5;
                border:solid 1px red;
                background-color:Transparent;
        }
		#joinbutton {
		position:absolute;
			top:360px;
			left:300px;
		}
#imgButton
   {
      position: absolute;
      left: 299px;
      top: 570px;
   }
 
</style>
</head>
 
<body>
        <img id="background" alt="" title="" src="The address to my background image"/>
    <div id="Content">
        <img id="imgButton" src="the address to my button" alt=""/>
    </div>
</body>
</html>

Open in new window

Lolly-Ink

Are you able to get rid of the "position: relative" declaration for #Content? Its conflicting with the position of its child image #imgButton.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css">
       html{
overflow:auto;
}
	       body
        {
           margin: 0px;
           padding: 0px;
		}
		#background {
                display:block;
				position:absolute;
                top:0px;
                left:0px;
                width:100%;
                z-index:0;
                margin:0px;
        }
        
        #Content {
/*                position:relative;*/
                width:90%;
                margin: 0px auto;
                z-index:5;
                border:solid 1px red;
                background-color:Transparent;
        }
		#joinbutton {
		position:absolute;
			top:360px;
			left:300px;
		}
#imgButton
   {
      position: absolute;
      left: 299px;
      top: 570px;
   }
 
</style>
</head>
 
<body>
        <img id="background" alt="" title="" src="The address to my background image"/>
    <div id="Content">
        <img id="imgButton" src="the address to my button" alt=""/>
    </div>
</body>
</html>

Open in new window

NDstudio

ASKER

removing the relative completly messes up the positing control I can't even move it when its gone?

if you have an idea on reworking the code i provided go for it but i can't remove the relative

thanks for trying

compfixer101

I think you missed the # before the body css part
}
body
{

shouldn't it be
}
#body
{

NDstudio

ASKER

I added that it validated but teh position issue remains

ASKER CERTIFIED SOLUTION

James_Bomb

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

NDstudio

ASKER

Thanks seems to make sense. Any advice on how i can convert my background image from % to pixels so that they line up

James_Bomb

You could try the following test.

Replace

html {overflow: auto}

#background {
width: 100%
...
...
}

with:

html{overflow:hidden}

#background {
/* width: 100%*/
...
...
}

NDstudio

ASKER

can i keep the rest of my css in the #background part

James_Bomb

Yes you can keep the rest. Positioning can be quite tricky if you are going to mix percentages and pixels.

darkapple

I suggest you to use absolute positioning only inside div with relative positioning whose height is certain.

In this case, the height of content div is unkonwn, so absolute positioning relative to it may shift it somewhere.

Try once giving display:inline to #imgButton