footer won't stick in IE compatibility mode (can't find an answer anywhere)_问答_开发者

footer won't stick in IE compatibility mode (can't find an answer anywhere)

开发者 https://www.devze.com 2023-02-05 22:26 出处：网络

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 virtua

相关专题：css

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, remove float: left and add overflow: 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>&nbsp;</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>