Any help I can get right now would be soooo appreciated, I am pulling my hair out! How do I stop my page elements that are absolute from moving when the browser window is re-sized. It looks great if my window is zoomed in on 100% but anything below or under that makes the elements go all over the place. Here is some of my CSS:
* {margin: 0; padding: 0;}
html {background: url(images/bg.png); width: auto; min-width:inherit}
body { font: 12px/1.4 Georgia, Serif;}
.group:after {visibility: hidden; display: block; font-size: 0; content: ” “; clear: both; height: 0; }
.group {display: inline-block; clear: both; }
/* start commented backslash hack */* html .group { height: 1%; } .group {display: block; } /*close commented backslash hack */
article, aside, figure, footer, header, section {display: block;}
#page-wrap {width: 1002px;
margin: 100px auto 10px;
background: white;
position: relative;
}
#page-wrap2 {
width: 388px;
height: 900px;
background: url(images/page-wrap.png);
position:absolute;
z-index: 3;
margin-left: 125px;
top: 150px;
}
#header-bar {background:url(images/header.png);
width: 1002px;
height: 187px;
}
#logo {
background:url(images/gojlogo.png);
width: 612px;
height: 397px;
position:absolute;
z-index:4;
margin-left: 70px;
top: 11px;
}
and the website is http://www.gojevents.com. Any insight is greatly appreciated. Thank you!
