Jump to content

Div's overlapping when I resize browser window.


Recommended Posts

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>

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.

 

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.