footer won't stick in IE compatibility mode (can't find an answer anywhere)
Here's the website:
http://www.uiowa.edu/~ucoll/academicmisconduct.shtml
When I go into compatability mode my footer jumps up to the bottom of my header. 开发者_运维百科 I have a wrap with a virtually included header, then a content area, then a virtually included footer (fs-footer). I'm pretty sure it's something to do with the min-height element. I've tried a bunch of work arounds and alternatives. I've also searched googles and forums but haven't found a good answer. Please help :)
Code:
html {
height: 100%;
}
body {
padding: 0;
margin: 0 0 0 0;
font-family: Lucida Grande, Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color:#999;
background-position:center;
height: 100%;
}
#wrap {
width: 1024px;
height:100%;
margin: auto;
padding: 0;
min-width: 1024px;
position: relative;
}
#mainContentPage {
background-image: url(images/backgrounducContent.png);
background-repeat:no-repeat;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 1024px;
margin: 0;
float: right;
border-bottom:thick;
border-bottom-color: #000;
background-color: #FFF;
min-height: 100%;
}
.fs-footer {
clear:both;
float:left;
padding-bottom:30px;
padding-top:0px;
width:1024px;
border-top:thick;
border-top-color:#000;
border-top-style:groove;
border-top-width:thick;
background-color:#FFF;
background-image:url(images/ucfooter2.png);
height: auto;
}
Tested in IE8, IE8's Compatibility mode, Firefox:
- From
.fs-footer, removefloat: leftand addoverflow: auto.
I don't think it's relevant to your problem, but you have code like this:
<a href="index.shtml" id="headLink" title="Banner Link">
<div id="header">
...
</div>
</a>
This is not good - you generally should not put block elements (such as <div> tags) inside inline elements (such as <a> tags).
Also, you have:
<div id="generalInfoMainContent">
<h1>Classroom Policies - Academic Misconduct</h1>
<p> </p>
<li><a href="academicmisconduct.shtml#fraud">Academic misconduct</a></li>
<li><a href="academicmisconduct.shtml#consequences">Consequences of Academic misconduct</a></li>
<li><a href="academicmisconduct.shtml#forgery">Academic Misconduct: Forgery</a></li>
</ul>
<hr />
You appear to be missing an opening <ul> tag.
As noted in a comment on your question, you should ensure that your markup validates.
I always use the following template and it always works fine with all browsers
CSS
body, html{
height: 100%;
}
body, p {
margin: 0; padding: 0;
}
#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}
#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THE FIRST no. SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}
#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}
/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}
#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
HTML
<body>
<div id="wrapper">
<div id="header">
<div id="header_900">
<p>header</p>
</div><!--header_900-->
</div><!--header-->
<div id="content">
<div id="content_900">
<p>content</p>
</div><!--content-->
</div><!--content-->
</div><!--wrapper-->
<div id="footer">
<div id="footer_900">
<p>footer</p>
</div><!--footer_900-->
</div><!--footer-->
</body>
加载中,请稍侯......
精彩评论