KDM Posted February 27, 2012 Share Posted February 27, 2012 If you go to facebook and grab the bottom right corner of the browser window and drag it to the top shrinking it, you should notice the positions of the div's stay the same. When I do this with my file, the div's overlap each other. Any idea why this might be? Quote Link to comment Share on other sites More sharing options...
sunfighter Posted February 27, 2012 Share Posted February 27, 2012 Oh Yeah! I see the problem. It's right there. We need an icon for "show me some code" Quote Link to comment Share on other sites More sharing options...
KDM Posted February 27, 2012 Author Share Posted February 27, 2012 css root { display: block; } #wrapper{ width: 980px; margin-left: auto; margin-right: auto; min-height:100%; } #wrapper:before { /* Opera and IE8 "redraw" bug fix */ content:""; float:left; height:100%; margin-top:-999em; } * html #wrapper { /* IE6 workaround */ height:100%; } #sign_up{ width:100%; margin-left: auto; margin-right: auto; height:50px; margin-bottom: -50px; } #logo{ width:980px; height: 100px; margin-left: auto; margin-right: auto; text-align: center; } #log_in{ width:500px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 20px; } #footer{ width:100%; height:220px; background-image: url(../images/footer.png); margin-top: -220px; } body{ background-image: url(../images/bg.jpg); background-position: center center; background-attachment: fixed; background-color: #4176bd; background-repeat: no-repeat; font-family: Lucida, Tahoma, Verdana; color: #FFF; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; height:100%; } .inputfields { background-image: url(../images/inputfields.png); background-position: center center; background-color: #FFF; width: 180px; height: 35px; font-family: Tahoma, Geneva, sans-serif; font-size: 19px; color: #999; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #username { background-image: url(../images/inputfields.png); background-repeat: no-repeat; background-position: center center; height: 40px; width: 206px; text-align: center; padding-top: 4px; float: left; } #password { background-image: url(../images/inputfields.png); background-repeat: no-repeat; background-position: center center; height: 40px; width: 206px; text-align: center; padding-top: 4px; float: left; } #log_in_btn { height: 40px; width: 85px; text-align: center; float: left; } #center_content{ width: 980px; height: 200px; margin-left: auto; margin-right: auto; top: 35%; position: absolute; text-align: center; } a:active { color: #FFF; } a:visited { color: #FFF; } a:link { color: #FFF; text-decoration:none; } a:hover { text-decoration:underline; color: #FFF; } .smallText{ font-size: 14px; text-align: left; } html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=MacRoman"> <title></title> <link href="assets/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="sign_up"><img src="images/sign_up.png" alt="" /> </div> <div id="wrapper"> <div id="center_content"> <div id="logo"><img src="images/logo.png" alt="" /> </div> <div id="log_in"> <form name="frmReg" action="index.php" method="POST" enctype="multipart/form-data" > <div id="username"> <input class="inputfields" type="text" name="username" placeholder="username"/> </div> <div id="password"><input class="inputfields" type="password" name="pwd" placeholder="password"/> </div> <div id="log_in_btn"> <input type="image" src="images/log_in.png" name="submit" value="submit" id="submit"/> </div> </form> </div> </div> </div> <div id="footer"> <br /> <br /> <br /> <br /> <br /> <br /> <table width="1416" border="0" align="center" class="smallText"> <tr> <td width="887">Copyright 2011-2012 Company LLC</td> <td width="100"><a href="advertise.php">Advertise</a></td> <td width="125"><a href="termsofuse.php">Terms of Use </a></td> <td width="90"><a href="contact.php">Contact</a></td> <td width="100"><a href="safetytips.php">Safety Tips</a></td> <td width="170"> <a href="company.com">Free</a></td> <td width="100"> <a href="help.php">Help</a></td> </tr> </table> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
sunfighter Posted February 28, 2012 Share Posted February 28, 2012 Where to start KDM? Your using the placeholder attribute which is part of HTML5, but your doctype is 4.01 Transitional. You use /> to close tags and that is not allowed in 4.01 Transitional. You have <td width="100"> in your footer table and width has been a style component for some time. You should have a wrapper div that encompasses everything, including the main and footer divs, you don't and that's part of the problem. Your main div is called "wrapper" and you give it min-height:100%; and your footer has height:220px; That is probably the big error. Suggest you study a doctype and use it, stay with px or %, try not to interchange them. Quote Link to comment Share on other sites More sharing options...
KDM Posted February 28, 2012 Author Share Posted February 28, 2012 Thanks for the reply. None of that is the problem. I've built sites before with the same attributes and never got this problem, I've tried everything. Time to post a job to scriptlance. Oh and min-height is used so the footer will stick to the bottom of the page. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.