ansaurus

Question

Answer 1

+1 A:

margin: auto; is what's broken in IE7. You can go around it with

#footer {
  width: 100%;
  left: 0px;
}

, since that way the div stretches to full width and the ul will auto-align to the middle.
But maybe that's not what you want.

If it's not an acceptable solution, people on the web say you can fix it with aligning the parent's text to the center - but that might screw the remainder of the layout... you'll have to play around with it, but at least you know what's going bad.

ANeves 2010-05-05 16:40:07

breadcrumb is definitely spelled with two b's, as there is a 'b' in crumb.

quoo 2010-05-05 19:37:49

this solution worked like a charm...thanks ;)

Mirko 2010-05-05 23:18:13

@Mirko, I'm glad it helped. @quoo: Thanks for correcting. I was really going self-righteous - http://www.ldoceonline.com/popup/popupmode.html?search_str=crumb

ANeves 2010-05-07 09:06:56

Answer 2

A:

html, 
body {
    height: 100%;
}
#wrapper {
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
#footer{
    left: 0;
}

reisio 2010-05-05 17:15:46

Answer 3

+1 A:

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
#footer, #push {
    height: 150px; /* #push must be the same height as #footer */
}

HTML:

<body>
    <div id="wrapper">
        <!-- ALL non-footer content goes in this DIV. -->

        <div id="push"></div>
    </div>
    <div id="footer">
        <ul id="breadcrumbs">
            <li>Disclaimer</li>
            <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
            <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li>
            <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
        </ul>
    </div>
</body>

Code adapted from http://ryanfait.com/sticky-footer/

I've used this approach on several sites I've developed, including my personal site. It works great! And even in IE6 (even though you said it doesn't need to).

Joshua Carmody 2010-05-05 19:32:32

Nice one, I will try that. I cannot vote for two people so I chose sr pt because his solution fixed my problem immediately.

Mirko 2010-05-05 23:20:30

ansaurus

tags:

views:

answers:

Center footer fixed at the bottom IE

related questions