Grow your CSS skills. Land your dream job.

Problems with FORM from ASP.NET

  • # May 18, 2009 at 5:55 pm

    Hi there I have a site that I am building in ASP.NET when the page renders it places a form on the page and this is breaking my css to make the footer stick at the bottom of the page this is my code:

    Code:
    /* General */
    html, body, form, #wrap
    {
    height: 100%;
    }
    body > #wrap
    {
    height: auto;
    min-height: 100%;
    }
    /* Header */
    #headerWrap
    {
    background-color: #444444;
    }
    #header
    {
    position: relative;
    width: 80%;
    height: 100px;
    margin: 0 auto;
    }
    #header #logo
    {
    position: absolute;
    top: 18px;
    left: 10px;
    height: 81px;
    width: 67px;
    }
    #header #logo a
    {
    height: 81px;
    width: 67px;
    display: block;
    text-decoration: none;
    }
    #header #title
    {
    margin: 0;
    position: absolute;
    font-size: 3.0em; /*To use if Image is created for header. background: url(../images/title.gif) no-repeat; text-indent: -999em;*/
    }
    #navbar
    {
    width: 80%;
    margin: 0 auto;
    }
    #loginpanel
    {
    float:right;
    }
    /* Content Area Layout*/
    #main
    {
    width: 80%;
    margin: 0 auto;
    clear: both;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 150px;
    }
    #content
    {
    width: 70%;
    float: left;
    padding: 30px 0 25px 0;
    }
    #content #list
    {
    width: 200px;
    float: left;
    }
    /* Sidebar */
    #sidebar
    {
    width: 29%;
    float: right;
    padding: 30px 5px 25px 10px;
    }
    #sidebar ul
    {
    list-style: none;
    }
    #sidebar img
    {
    margin-right: 3px;
    }
    /* Footer */
    #footer
    {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    top: 0px;
    left: 0px;
    background-color: #444444;
    }
    #footer p
    {
    margin: 0 0 15px 0;
    }
    #foot
    {
    width: 80%;
    margin: 0 auto;
    height: 140px;
    line-height: 1.0em;
    padding: 0 10px 0 10px;
    }
    #foot #left
    {
    width: 400px;
    float: left;
    padding-top: 20px;
    }
    #foot #right
    {
    width: 250px;
    float: right;
    text-align: right;
    padding-top: 20px;
    }
    }
    /* CLEAR FIX*/
    .clearfix:after
    {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix
    {
    display: inline-block;
    }
    /* Hides from IE-mac */
    * html .clearfix
    {
    height: 1%;
    }
    .clearfix
    {
    display: block;
    }
    /* End hide from IE-mac */

    My HTML code is the following:

    Code:


    Now if you run this it works, but if you add a form tag after the body tag (with an end one of course! the css breaks even though I have followed sites like sticky footer and ryan fait!) I cant get it to work now and I have no idea why! Can anyone please suggest anything?

    Thanks in anticipation!

    Tuppers

    I have several other CSS files for styling I am not sure if you would like to see them aswell??? But I have tested with just my css layout style sheet and all is well without the form tag!!

    # May 19, 2009 at 1:31 am

    That is strange. Do you have a link or screenshots so we can see what you mean by

    Quote:
    breaking my css to make the footer stick at the bottom of the page
    # May 19, 2009 at 5:20 am

    I have fixed it now! Not sure exactly what was causing it just started at the begining! and a few hours later its working!

    Probably due to clean the code really!

    Thanks for looking and if I do find out why it wasnt working I will post the reason!

    Cheers

    Tuppers

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".