Problems with CSS positioning

ZekeLL · May 26th, 2008, 11:22 AM

Hi guys, when I try to create layers (AP divs) with Dreamweaver, everything looks great, but when I preview that in a browser, the layers change their positions.

I am very frustrated since I've been trying to figure out why for almost 2 days, and I can't. Please help me!

Check out this screenshot: http://www.theoutsourcingcompany.com...ges/proof1.jpg

This is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/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>Test</title>
<style type="text/css">
<!--
#maincontent {
    left:186px;
    top:27px;
    width:80%;
    height:608px;
    z-index:1;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    text-align: center;
}
#Name {
    position:absolute;
    left:372px;
    top:95px;
    z-index:1;
}
#Email {
    position:absolute;
    left:372px;
    top:140px;
    z-index:1;
}
#Phone {
    position:absolute;
    left:372px;
    top:185px;
    z-index:1;
}
.fontfields {
    font-size: 24px;
}
-->
</style>
</head>

<body>

<div id="maincontent">
<form>
    <div id="Name">
          <input name="Name" type="text" class="fontfields" id="Name2" />
    </div>
    <div id="Email">
          <input name="Name" type="text" class="fontfields" id="Email2" />
    </div>
    <div id="Phone">
          <input name="Name" type="text" class="fontfields" id="Phone2" />
    </div>
    <img src="http://www.theoutsourcingcompany.com/tryarg/images/form.jpg" width="650" height="608" />
</form>
</div>

</body>
</html>

If you know what the problem is, please help me. I am really confused with absolute, relative, fixed, and static positioning. I understand the concepts but I can't position the layers wherever I want.

Thank you!