Jump to content

Div's overlapping when I resize browser window.

KDM

By KDM
in CSS Help

Recommended Posts

KDM Member

KDM

Posted
  • Author
Posted

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>

sunfighter Newbie

sunfighter

Posted
Posted

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.

 

KDM Member

KDM

Posted
  • Author
Posted

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.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • 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.