Sticky footer, problem clearing content in IE

programming web dev
1

Hi all,

I’m working on the site http://www.carbonstudio.co.uk and I’m having a problem with the sticky footer clearing the content in IE7 (I think it works in IE6 & 8???).

If someone could take a look that would be great.
Cheers

Here’s the css used:

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
	font: 100%/1.4 serif garamond;
	background: #f6f4f2;
	color: #999999;
    height:100%;/* needed to base 100% height on something known*/
}
#outer {
    width:100%;
    min-height:100%;
    margin: 0 auto -230px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
}
* html #outer {
    min-height:100%
}

#footer {/* footer now sits at bottom of window*/

    width:100%;
    margin:auto;
    height:230px;/* must match negative margin of #outer */
    clear:both;
}

#push {
    height: 230px;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}