Hello,
I’m having an issue with my sticky footer in IE. IT looks perfect in Firefox and Google Chrome. It’s the one that Paul O’B created, its worked flawlessly in the past just wondering why this time around it does not to be working for me.
Here is the link to the site…
If anyone could shed some light on a fix I could use for it to work correctly in IE that would be excellent.
Thanks,
Mike
Thank you Ray, I will study the HTML/CSS when I get home from work this evening to understand it better and implement it to the layout.
Much appreciated.
Mike
Good work Ray 
How should the header look like. It look the same to me in IE and Firefox and Chrome, Opera and Safari as well
Thanks Rayzur,
The footer is just at the bottom looks same as main content area, no text in it, just say it stays on the bottom which work but the sticky footer makes the top navigation/header throughout the website look weird in IE but looks correct in FireFox and Chrome. Unfortunately I don’t have IE on this computer but if you check it on IE you will see what I mean.
Thanks for the other info and I’ll be fixing these other non-closed divs tomorrow.
But any idea why the Navigation/Header looks off in IE?
Thanks,
Mike
Hi,
I’m confused, you say it works perfect in FF but I don’t see anything that resembles a footer.
You have the /min-height:100%;/ commented out on your #wrapper rules and the #wrapper div is not closed properly in the html.
You did not close the #SplashPage div and it is using the wrapper closing tag which in turn leaves the wrapper unclosed.
Hi,
I finally noticed what you were talking about in IE7.
The problem was that you were applying the body BG image to the html element also. You were grouping all your body styles with the html so they could both share height:100%.
You just need to group the body/html together for the height and then set all other styles on the body.
Then adjust the BG position on the body image with the same neg margin on the wrapper.
[B]html,body [/B]{height:100%;}/* reference for wrapper min-height*/
body {
margin:0;
padding:0;
background:url('images/bg-final.jpg') #5F5F5F [B]repeat-x 0 -20px;[/B]
font:12px/18px Arial, Helvetica, sans-serif;
color: #333;
}
I have reworked your html and css and set it up with the bare bones structure of the Sticky Footer and Nav.
http://www.css-lab.com/test/mbond/panorama.html
http://www.css-lab.com/test/mbond/style.css
I have also done away with the #header and #logo divs since they were not needed. The #header had the top border on it to soak up the footer height but that top border can go on any element that is first in the markup. In your case that is the #nav div, you can do away with the 100% width on it also. Height will trip haslayout for IE.
[B]#nav [/B]{
height:127px;
background:url('images/navbar.jpg') repeat;
font:bold 14px/17px Helvetica, Arial, sans-serif;
[B]border-top:20px solid #fff;[/B] /* soak up negative margin and allows header to start at top of page*/
}
As I mentioned I did away with the #logo div also, all you need to do is hook that logo ID to the anchor that wraps that image and nest it in the #nav div.
[B]<div id="nav">[/B]
[B]<a id="logo"[/B] href="http://www.amethystmine.com">
<img src="images/logo.jpg" alt="Amethyst Mine Panorama" />
[B]</a>[/B]
[B]<ul>[/B]
<li id="menu-item-47" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/home/">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/about/">Facts</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/tours/">Tours</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/gifts/">Gifts</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/faq/">FAQ</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/contact/">Contact</a></li>
[B]</ul> [/B]
<!-- nav --></div>
Your nav UL had some haslayout issues in IE also. Basically I just floated the anchors to resolve that but I cleaned out a bunch of redundant styles. You don’t have to re-declare all the anchor styles when the states change, the only styles you need to set on :hover are the ones that actually change.
I also got the IE6 min-height hack for the wrapper and set up some other bug fixes for IE8 and Opera. Just study through the css and html and it should all make sense to you.
Hope that Helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Amethyst Mine Panorama</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="nav">
<a id="logo" href="http://www.amethystmine.com">
<img src="images/logo.jpg" alt="Amethyst Mine Panorama" />
</a>
<ul>
<li id="menu-item-47" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/home/">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/about/">Facts</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/tours/">Tours</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/gifts/">Gifts</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/faq/">FAQ</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type"><a href="http://amethystmine.com/contact/">Contact</a></li>
</ul>
<!-- nav --></div>
<div id="SplashPage">
<!-- SplashPage --></div>
<!-- wrapper --></div>
<div id="footer">Sticky Footer</div>
</body>
</html>
html,body {height:100%;}/* reference for wrapper min-height*/
body {
margin:0;
padding:0;
background:url('images/bg-final.jpg') #5F5F5F repeat-x 0 -20px;
font:12px/18px Arial, Helvetica, sans-serif;
color: #333;
}
h1 {
font:normal 28px/40px Georgia, "Times New Roman", Times, serif;
}
h2 {
font:normal 20px/30px Georgia, "Times New Roman", Times, serif;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
img {
border: none;
}
a {
text-decoration: none;
color: #93C;
}
/*=== Sticky Footer Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after { /* #wrapper:after for IE8 min-height:100% Fix*/
clear:both;
content:"";
display:block;
height:1%;/*fix IE8 min-height:100% bug*/
font-size:0;
}
/*=== Begin Layout ===*/
#wrapper {
background:url('images/wrapper-bg.jpg') repeat-y;
width: 960px;
min-height: 100%;
margin:-20px auto 0;
}
* html #wrapper {height:100%;} /*IE6 min-height*/
#nav {
height:127px;
background:url('images/navbar.jpg') repeat;
font:bold 14px/17px Helvetica, Arial, sans-serif;
border-top:20px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
a#logo {
float: right;
border: none;
padding-right: 1px;
}
#nav ul {
text-transform: uppercase;
}
#nav li {
display:inline;
background: url('images/navbar-rollover.jpg') no-repeat -9999px 0; /*preload a:hover*/
}
#nav li a {
float: left;
text-decoration: none;
color: #FFF;
padding:55px 27px; /*127px total height w/ 17px line-height*/
}
#nav li a:hover{
background: url('images/navbar-rollover.jpg') repeat-x;
}
#nav li a:visited{
color:#FFF;
}
#SplashPage {
margin-top: -12px;
padding-left: 1px;
}
#footer{
width:960px;
height:20px;/* must match negative margin of #wrapper */
margin:0 auto;
overflow:hidden;
background: #000;/*BG color for testing*/
text-align:center;
color:#FFF;
}