Sticky Footer and IE7 Problems

[ConfusingPhilosophy]

Hey folks.

I’ve been adjusting the site for my fraternity and I keep running into this problem. See, I tested my site on all the common browsers and it worked fine. Except for IE7.

The sticky footer, for whatever reason, is working in both IE6 and IE8, but not IE7. I can’t, for the love of me, figure it out! Anyone have a clue what it could be?

http://www.gwu.edu/~kappasig/index.html

Thanks again!

[Capt Otis]

It isn’t working in Firefox, which leads me to believe you haven’t done it correctly. Can you show me your css and the html of your footer? Thanks.

[ConfusingPhilosophy]

"Capt Otis" wrote:

It isn’t working in Firefox, which leads me to believe you haven’t done it correctly. Can you show me your css and the html of your footer? Thanks.

That’s very strange. I’m running it in Firefox on the Mac and it works fine for me.

Code:

*{
margin:0;
padding:0;
}

html, body, #wrap{
height:100%;
}

html, bodu{
background:#111111;
width:100%;
}

bodu > #wrap{
height:auto;
min-height:100%;
}

#wrap{
position:relative;
margin-bottom:-20px;
}

#main{
width:1000px;
margin:10px auto 0px auto;
}

#footer{
background:url(‘images/footer_fade1.png’) repeat-x;
height:190px;
width:100%;
clear:both;
margin-top:-190px;
}

#footer_content{
height:190px;
width:980px;
margin:0 auto;
}

#left_panel{
width:300px;
float:left;
padding:10px 10px 0px 10px;
}

#right_panel{
width:300px;
float:right;
padding:10px 10px 0px 10px;
}

#middle_panel{
width:300px;
margin:0 auto;
padding:10px 10px 0px 10px;
}

#footer_content h1{
color:#dfa438;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:18px;
font-style:italic;
display:block;
font-weight:100;
padding-bottom:3px;
border-bottom:#dfa438 dotted 1px;
}

#footer_content p{
color:#dfa438;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:10px 0px 0px 5px;
}

#footer_content a:link,
#footer_content a:visited,
#footer_content a:active{
color:#dfa438;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
}

#footer_content ul{
list-style:outside;
line-height:120%;
margin:5px 0px 0px 20px;
}

#footer_content li{
color:#dfa438;
}

/* 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;
}

That’s the CSS I used for the body and footer. The HTML I was using is set up like this.

Code:

[ConfusingPhilosophy]

Sorry to double-post, but I just saw that the sticky footer code had been updated from when I utilized it a long time ago. Seems to be working now.

Could someone check for me to see if I’m right about this?

[Capt Otis]

Your footer is at the bottom of the page correctly in Firefox and IE7, unless you are looking for a fixed footer (which I thought you were at first).

Also, click on "The Brothers" then try to use the menu in IE7. You need to give it a z-index, this should work but I didn’t test it.

Code:

#wrap #navigation ul.menu {
z-index: 1000;
}

Best of Luck

[Author]

Posts