All browsers work in different ways in determining the positions - cross-browser

Question

Hi i have the big problem is that all browsers positioning differently.
Each template in the center of the other shows do not represent correctly.
Say When a person opens the site instead of the template.
One side shows less over another.
I did some work at my computer it all works in all browsers.
I do not understand what I was doing wrong the first time for me after all this is so.
I tried the other browsers and fonts and change the screen size.
Does not fix the problem.
Why is this happening for all browsers ?
Also tried to use position: absolute, but nothing works, too.
Maybe you can look at my website and see what you see it correctly or in bad what I am doing wrong and why it works for me correctly using a different position: absolute or relative or all browsers ?
just on the other computers browsers do not show correctly positions
Here is my code can you fix it cuz i didn't understand what where to create div container inside wrap or where ?
html,body{
background-color: #181818;
color: #fff;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
*{
padding: 0;
margin: 0;
}
.wrap{
position:absolute; bottom: -1px; top: 10px;
margin-left: 4%; *margin-left: 5%;
margin-right: 4%; *margin-right: 5%;
}
.time{
color: #fff;
font-size: 8pt;
font-weight:bold;
position:absolute; top: -2px; left: 943px; width: 150px;
position:absolute; *top: 3px; *left: 930px; width: 150px;
}
.top{
width: 1024px;
height: 30px;
padding-left: 20px;
line-height: 25px;
background: #444;
background:transparent url('top.png'); background-repeat: repeat-x;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
.header{
width: 1044px;
*width: 1024px;
height: 150px;
background: #333;
position:relative; bottom: 10px;
background:transparent url('head.png'); background-repeat: repeat-x;
}
.menu{
width: 1024px;
height: 45px;
background: #474747;
padding-left: 20px;
position:relative; bottom: 11px;
background:transparent url('menu.png'); background-repeat: repeat-x;
}
.list {
position:absolute; left: 20px; top: 1px;
}
.content{
width: 1024px;
height: 1200px;
background: #000;
padding-left: 20px;
background: #111;
position:relative; bottom: 10px;
}
.aprasymas{
position:absolute; top: 10px; width: 350px;
}
.forma{
position:absolute; top: -3px; left: 720px;
position:absolute; *top: 1px; *left: 700px;
background:transparent url('forma.png'); background-repeat: no-repeat;
width: 312px; height: 157px;
}
.imgbox{
position:absolute; top: 10px;
}
.photo{
position:absolute; top: 150px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
background:transparent url('photo.png'); background-repeat: no-repeat;
}
.photo2{
position:absolute; top: 280px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
background:transparent url('photo.png'); background-repeat: no-repeat
}
.photo3{
position:absolute; top: 410px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
background:transparent url('photo.png'); background-repeat: no-repeat;
}
.phototekstas{
position:relative; top: -15px; left: 90px; width: 300px;
position:relative; *top: -16px; *left: 85px; *width: 380px;
color: #fff;
font-size: 10pt;
font-size: *8pt;
padding: 3em;
}
.footer{
width: 1024px;
height: 35px;
background: #333;
padding-left: 20px;
position:relative; bottom: 10px;
background:transparent url('footer.png'); background-repeat: repeat-x;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
.copyright{
color: #aaa;
position:absolute; width: 310px; left: 835px; bottom: 12px;
position:absolute; width: 310px; *left: 820px; *bottom: 13px;
font-size: 8pt;
}
#-moz-document url-prefix() {
.copyright {
position:absolute; width: 310px; left: 810px; bottom: 12px;
}
}
#-moz-document url-prefix() {
.phototekstas {
position:relative; top: -18px; left: 90px; width: 300px;
}
}
#-moz-document url-prefix() {
.time {
position:absolute; top: 1px; left: 945px; width: 150px;
}
}
#-moz-document url-prefix() {
.forma {
position:absolute; top: 1px; left: 720px;
}
}
/* will be red only in google chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.time{position:absolute; top: 3px; left: 950px; width: 150px;}
}
/* Opera */
#media not screen and (1) {
.time {
position:absolute; top: -2px; left: 950px; width: 150px;
} /* OP 11 */
}
This is the main what i'm positioning all template without hard work.
.wrap{
position:absolute; bottom: -1px; top: 10px;
margin-left: 4%; *margin-left: 5%;
margin-right: 4%; *margin-right: 5%;
}
Here's my link: http://mrblackscripts.3owl.com/

Answer 1

Create a relatively-positioned "container" div, then set absolutely positioned objects inside of that div.
That will absolutely position the elements on the page. However, it is probably not best-practice.