SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bloody footer being a pain!

    http://www.invisiblewebdesign.co.uk/temp/tst/

    Can someone please let me know why my footer is jumping up in firefox... I cannot think why it should be doing it..

    Thank you

    css -

    PHP Code:
    *
    {
            
    margin:0;
            
    padding:0;
    }

    body
    {
            
    font:8pt arialverdanasans-serif;
            
    color:#a1a1a1;
            
    text-alignleft;
            
    background:#e5e1c8;
            
    background-imageurl('../images/background.jpg');
            
    background-positiontop center;
            
    background-repeatno-repeat;
    }

    h1
    {
            
    font:13pt verdanaarialsans-serif;
            
    font-weight:700;
            
    color:#003c81;
            
    text-align:left;
            
    padding-left:5px;
            
    padding-bottom:5px;
    }

    h2
    {
            
    font:10pt arialsans-serif;
            
    color:#036;
            
    font-weight:700;
            
    text-align:left;
            
    padding-left:5px;
    }

    h3
    {
            
    font:8pt verdanaarialsans-serif;
            
    color:#036;
            
    text-align:left;
            
    padding-left:5px;
    }

    #outercontainer
    {
            
    width:882px;
            
    background:#fff;
            
    margin:0 auto;
            
    background-imageurl('../images/outerbackground.gif');

    }
    #innercontainer
    {
            
    width:770px;
            
    background:#fff;
            
    margin:0 auto;
    }
    #content
    {
            
    width:770px;
            
    background:#fff;
            
    margin:0 auto;
    }
    #header
    {
            
    height:150px;
            
    width:770px;

    }

    #navigation
    {
            
    height:31px;
            
    width:770px;
            
    text-align:left;
            
    background-imageurl('../images/navback.jpg');
            
    color:#a1a1a1;
            
    padding-top10px;
    }

    #navigation ul
    {
            list-
    stylenone;
            
    padding0;
            
    margin0;
    }

    #navigation li
    {
            
    floatleft;
            
    margin0 0.15em;
    }

    #navigation a
    {
            
    font:8pt arialverdanasans-serif;
            
    font-weightbold;
            
    color:#a1a1a1;
            
    text-decorationnone;
    }

    #headerbar
    {
            
    height:40px;
            
    width:770px;
            
    text-align:left;
    }

    #leftcolumn
    {
            
    width:210px;
            
    background-color#fafafa;
            
    float:left;
            
    padding15px 20px 0px 20px;
    }


    #centercolumn
    {
            
    width:320px;
            
    text-alignjustify;
            
    padding15px 20px 0px 20px;
            
    float:left;
    }

    #rightnav
    {
            
    width:120px;
            
    background-color#fafafa;
            
    padding15px 20px 0px 20px;
            
    float:left;
    }

    .
    orangetitle
    {
            
    font:8pt arialverdanasans-serif;
            
    color:#f89b1c;
            
    text-alignleft;
            
    font-weightbold;
    }

    #footer
    {
            
    height:32px;
            
    width:882px;
            
    background-imageurl('../images/footer.gif');
            
    margin:0 auto;


  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have a footer style in your CSS but no part in your HTML relates to that with an id="footer"

    However, if you're talking about the content no expanding to contain it's children then the problem is that a parent element will not stretch to contain it's floated children

    There are two solutions that I'd use. Either float the parent (and it's parent) or apply overflow: hidden; to the element which has the floated children

    For this I'd probably use the overflow method as it'll be a little simpler.

    Code:
    #content
    {
            width:770px;
            background:#fff;
            overflow: hidden;
    }
    Also you can remove the margin: 0 auto; from this style as the parent will handle that.

    You'll probably also need to supply a conditional comment for IE6 so that you can give it a height: 1%;

    Hope that helps.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats so strange? Why does it do this? I understand the floating method, but how does overflow hidden fix the solution?

    Thanks for helping btw

    NOTE: had to leave margin property as safari would not render it properly...there an alternate solution or would you say just leave it

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure why it works but this blog post explains it's origins I think

    http://www.sitepoint.com/blogs/2005/...ing-of-floats/

    As for the Safari problem, I'm not sure which version your running but Mark seemed to find that the same solution for IE5.x solved this issue for Safari as well so try text-align: center; on the body and then reapply text-align: left; on the container that follows it to ensure that all text on the page isn't centered.

    If that doesn't work then I'd probably leave it as it is, although if it was me there'd be a nagging at the back of my head to get to the reason behind something behaving oddly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •