Static footer not showing on IE 7

HTML & CSS
1

Hello everyone,

Here’s what I’m working on: mixfocuz.com/projects/mockup/index.php

Problem is, my footer (with position:static) refuses to show up in IE (I’m running IE7).

Would appreciate if some generous Guru could point out the issue.

Here’s the bit of CSS the footer uses:
.footer_wide
{
position:fixed;
bottom:0px;
background-color:#FFF;
width:100%;
height:40px;
padding-top:5px;
float:left;
border:4px solid #DDD;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
font-family: tahoma;

}

Looks fine on all major non-IE browsers. :shifty:

2

Hi Welcome to Sitepoint :slight_smile:

That code shows fine in IE7 but won’t show properly in IE6 because IE6 doesn’t understand position:fixed (although you said static in your text).

You have also added float to the footer which is redundant as position:fixed wins out and the element is not floated. It can’t be both absolutely positioned (of which fixed positioning is a subset) and floated. It will do no harm though but is just redundant.

I’m guessing that your real problem is that you are either working in quirks mode (no doctype or old doctype without uri) so please post all the html that goes with the above.

As I said above the code you posted works fine in IE7 so there is some other issue not related to that code.

Edit:

Ignore all I just said I noticed you provided a link to the page which I missed on first look so I will take a look and report back :slight_smile:

3

Ok The problem is because you have floated the main wrapper (.body_wide) and IE7 and under don’t like absolute elements (or fixed elements) to follow floats as it gets confused. Therefore the simplest solution is not to float the main container for iE7.

e.g.


*+html .body_wide{float:none}/* only ie7 gets this*/

That allows the footer to appear without effecting anyone else. IE7 will auto clear floated children when in haslayout mode anyway.

I also note that you have added some conditional comments within your external css file and this is not allowed. Conditional comments are html and must be in the html not in the css. You can of course link to a css file from within the conditional comments if needed also but for one of rules you may just want then in the head.


<!--[if IE]>
<style type="text/css">
#scroller{
  width: 882px; /* = width + margin left + margin right from the content rule + border*2 from the container rule*/
}
</style>
<! [endif]-->
</head>

You are also targeting all IE with your comments but that is unwise as it is unlikely that all IE needs the fix. Just target the version that needs the fix. However, I can’t see a reason why you need that rule at all as it doesn’t make much sense.:slight_smile:

4

Great, thank you very much Paul that clearly did it.
That float/absolute positioning quirk in IE always gets me.

Also, I’ve just checked out your site pmob.co.uk
Good stuff.

Thanks again Paul.

Cheer guys, thanks again :slight_smile: