CSS Footer is broken in IE, but works fine in FF

HTML & CSS
1

Hey guys,

I’ve been searching around for a couple days for this fix and I am stumped when it comes to the IE fix. I’m not much of a programmer so I’ve probably screwed something up but here’s the code.

CSS:

@charset "UTF-8";



/*-- Resets --*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin : 0;
padding : 0;
border : 0;
font-size : 100%;
font : inherit;
vertical-align : baseline;

}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display : block;
}

body {
line-height : 1;
}

ol, ul {
list-style : none;
}

blockquote, q {
quotes : none;
}

blockquote:before, blockquote:after, q:before, q:after {
content : '';
content : none;
}

table {
border-collapse : collapse;
border-spacing : 0;
}

/*-- End of Resets--*/


 * html #footer{top:0;} /*IE */


body {
margin : 0;
padding : 0;
font-family : Arial, Helvetica, sans-serif;
background-color : #fff;
line-height : 19px;
background : #888280 url(img/main_container.png) repeat-x;

}


#main .container {
background-image : url(img/container.png);
background-repeat : no-repeat;
padding:10px;
}



.container {
color : #000;
width : 950px;
min-height : 100%;
margin : 0 auto -4em; 

}


#grudge_left {
background : url(img/grudge_left.png);
height : 300px;
width : 200px;
margin-top : -338px;
margin-left : -200px;
}


#grudge_right {
float : right;
background : url(img/grudge_right.png);
height : 300px;
width : 200px;
margin-top : -300px;
margin-right : -200px;
}


#header {
margin-top : 0;
}


#logo h1, #logo small {
margin : 0;
display : block;
text-indent : -9999px;
}


#logo {
background-image : url(img/logo.gif);
background-repeat : no-repeat;
height : 83px;
margin-top : -30px;
}


#testimonials {
font-style : italic;
margin-top : 85px;
font-size : 18px;
color : #737373;
width : 500px;
}


#quote {
margin-top : -43px;
margin-left : 580px;
}


.block {
margin : -10px 0 20px;
}


.block_inside {
display : block;
background : #ffffff url(img/showcase.png);
padding : 77px;
width : 795px;
height : 147px;
overflow : hidden;
margin-left : 0;
}


.image_block {
margin-top : 50px;
margin-left : 0;
background : url(img/block_content.png);
width : 550px;
height : 340px;
position : fixed;
color : #fff;
}


.image_text {
margin-top : 30px;
margin-left : 20px;
background : url(img/content_title.png);
width : 500px;
height : 35px;
position : relative;
color : #fff;
}


.image_text1 {
margin-top : 30px;
margin-left : 20px;
background : url(aboutus.png);
width : 500px;
height : 35px;
position : relative;
color : #fff;
}


.image_text2 {
margin-top : 30px;
margin-left : 20px;
background : url(img/videos.png);
width : 500px;
height : 35px;
position : relative;
color : #fff;
}


.image_text5 {
margin-top : 30px;
margin-left : 20px;
background : url(img/classes.png);
width : 500px;
height : 35px;
position : relative;
color : #fff;
}


.image_text3 {
margin-top : 30px;
margin-left : 20px;
background : url(img/instructors.png);
width : 500px;
height : 35px;
position : relative;
color : #fff;
}


.image_text4 {
margin-top : 30px;
margin-left : 20px;
background : url(img/calendar.png);
width : 500px;
height : 35px;
position : relative;
color : #fff;
}


#block_content {
margin-left : 10px;
margin-top : 50px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 14px;
width : 500px;
position : relative;
float : left;
}


.webform {
width : 265px;
font : 11px Arial, Helvetica, sans-serif;
color : #fff;
background-color : #888280;
float : right;
margin-top : -10px;
margin-right : -360px;
position : relative;
}


.webform label {
display : block;
width : 300px;
font-weight : bold;
}


.webform .inputbox {
background : url(img/form2.gif);
height : 25px;
width : 290px;
padding : 4px 3px 2px 3px;
margin : 2px 0 10px 3px;
border : 1px solid #ccc;
}


.webform textarea {
background : url(img/form2.gif);
height : 100px;
width : 290px;
padding : 4px 3px 2px 3px;
margin : 2px 0 10px 3px;
border : 1px solid #fff;
font : 13px Arial, Helvetica, sans-serif;
}


.submit {
margin : 1px 0 0 3px;
background-color : #eee;
height : 30px;
width : 70px;
padding : 0;
border : 1px solid #ccc;
display : block;
color : #000;
}


.questions {
margin-left : 85px;
margin-top : -21px;
}


h2 {
margin : -5px 0 10px 0;
font-size : 25px;
font-family : Helvetica, Arial, Sans-serif;
color : #fff;
}


h3 {
color : #fff;
font-size : 15px;
}


h4 {
font-size : 15px;
color : #fff;
}


small {
color : #595856;
font-weight : bold;
font-size : 11px;
display : block;
margin-bottom : 15px;
}


a {
color : #fff;
text-decoration : none;
}


ul {
margin-top : 20px;
position : relative;
right : 0;
list-style : none;
}


ul li {
border : 0 solid #fff;
margin-top : 10px;
float : right;
list-style-type : none;
overflow : hidden;
display : inline;
margin-left : 12px;
}


ul li a, ul li a:hover, ul li a:visited {
text-decoration : none;
color : #fff;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : bold;
text-transform : uppercase;
}


.normalMenu, .normalMenu:visited, .hoverMenu, .hoverMenu:visited, .selectedMenu, .selectedMenu:visited {
outline : none;
padding : 10px 10px;
display : block;
}


.hoverMenu, .hoverMenu:visited, .selectedMenu, .selectedMenu:visited {
margin-top : -30px;
background : #fff url(img/greenlink.gif) repeat-x;
color : #fff;
}


.selectedMenu, .selectedMenu:visited {
margin : 0;
}


.normalMenu, .normalMenu:visited {
color : white;
}


p {
margin : 0 0 15px 0;
color : #fff;
}


/*-- Footer --*/

#footer {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 15px;
background : url(img/footer.png) repeat-x;
position:fixed;
bottom:0px;
width:100%;
height:60px;   /* Height of the footer */
clear: both;


}

.footer_text {
color : #fff;
text-align : center;
display: block;
position: relative;
margin-top:20px;
}


.footer_column {
color : #fff;
float : left;
width : 190px;
margin-right : -60px;
}


#footer .left {
margin-left : 0;
float : left;
width : 400px;
}


#footer .right {
margin-top : 20px;
float : right;
width : 300px;
}


#footer h3 {
color : #e2dddc;
text-transform : uppercase;
font-size : 10px;
}


.footer_column li, .footer_column ul {
margin : 0;
padding : 0;
}



/*-- Nivo Slider --*/

.nivoSlider {
position : relative;
width : 795px;
height : 147px;
background : url(img/loading.gif) no-repeat 50% 50%;
}


.nivoSlider img {
width : 795px;
height : 200px;
position : absolute;
display : none;
}


.nivoSlider a {
border : 0;
display : block;
}


.nivoSlider {
position : relative;
width : 100px;
margin-left : -75px;
margin-top : -75px;
}


.nivoSlider img {
height : 500px;
width : 1000px;
position : absolute;
top : 0;
left : 0;
}


.nivoSlider a.nivo-imageLink {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
border : 0;
padding : 0;
margin : 0;
z-index : 6;
display : none;
}


.nivo-slice {
display : block;
position : absolute;
z-index : 5;
height : 100%;
}


.nivo-box {
display : block;
position : absolute;
z-index : 5;
}


.nivo-caption {
position : absolute;
left : 0;
bottom : 0;
background : #000;
color : #fff;
width : 100%;
z-index : 8;
}


.nivo-caption p {
padding : 5px;
margin : 0;
}


.nivo-caption a {
display : inline !important ;
}


.nivo-html-caption {
display : none;
}


.nivo-directionNav a {
position : absolute;
top : 45%;
z-index : 9;
cursor : pointer;
}


.nivo-prevNav {
left : 0;
}


.nivo-nextNav {
right : 0;
}


.nivo-controlNav a {
position : relative;
z-index : 9;
cursor : pointer;
}


.nivo-controlNav a.active {
font-weight : bold;
}

And the HTML…


<!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">
<head>



    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Strategic Arms Tactical - "Making The Tactics Work For You" </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	
	<!-- JQUERY FADE EFFECT -->
	
	<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="custom.js"></script>
	
	<!--                   -->
	
	
	<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
$(window).load(function(){
    $('#slider').nivoSlider({
        controlNav:false, //1,2,3...
    }).
    find('a.nivo-prevNav').text('').end().
    find('a.nivo-nextNav').text('');
});
	</script>

	<!-- End Pre_Scripts -->
	
</head>

<body>	

	    <div id="main">
    	<div class="container">

        	<div id="header">
		
			
				
				
            	<ul id="navigationMenu">
                	<li><a href="calendar.html" class="normalMenu">Calendar</a> </li>
				    <li><a href="instructors.html" class="normalMenu">Instructors</a></li>
                	<li><a href="classes.html" class="normalMenu">Classes</a></li>
                	<li><a href="videos.html" class="normalMenu">Videos</a></li>
                	<li><a href="aboutus.html" class="normalMenu">About Us</a></li>
					<li><a href="index.html" class="normalMenu">Home</a></li>
                </ul>
				

            	<div id="logo">
                	<h1>Strategic Arms Tactical</h1>
                    <small>"making the tactics work for you"</small>
                </div>

            </div>
			
			
            <div id="block_featured" class="block">
            	<span class="block_inside">

                
				<div id="slider" class="nivoSlider">
				<img src="img/pic1.png" height="147px" weight="795px" alt="" title=""/>
				<img src="img/pic2.png" alt="" title="#htmlcaption" /></a>
				<img src="img/pic3.png" alt="" title="This is an example of a caption" />
			
		</div>
				
                    
                
                </span>
            </div>
			<div id="grudge_left"></div>
			<div id="grudge_right"></div>
			<div class="image_block">
			<div class="image_text">
            <div id="block_content">
			<p>
            	<b><u>September 22, 2011</b></u> - Personal Protection, The Police Hut.  
			</p>
			</div>
            </div>
		
			
		<form method="post" action=”mailto:adamsimpson@dotsolveconsulting.com” class="webform" />  
			<input type="text" name="user_name" value="Your Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="inputbox"/>   
			<input type="text" name="user_email" value="Your Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="inputbox"/>   
			<textarea name="user_message" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">A Brief Message Here</textarea>  
			<input type="submit" value="submit" name="submit" class="submit"/>  
		<div class="questions"> Questions? Call Us: 901.493.0700
		</div>
		</form> 

        </div>

	</div>
</div>  

	<div id="footer">
    	<div class="footer_text">
Strategic Arms Tactical, All Rights Reserved - 2011
        	</div>
            </div>


               
            
  
</body>
</html>

I know this is like beating a dead horse, but i’m out of ideas … Thanks in advance!

2

I apologize. The website is http://www.strategicarmstactical.com/ … Its the 1024x768 resolution sizes that cause it to break.

3

Hi braumab. Welcome to SitePoint.

What you are creating there is a “sticky footer”, and CSS and browsers are not really designed for this. It can be done, but is tricky. There is a thread here that details perhaps the only reliable way to do it, so I recommend you walk through this tutorial carefully, as it will show you haw to do this in a way that will work in all browsers:

Let us know how you go!

4

Thank you for a quick response. I’ll let you know how it works out for me.

5

Hi,

It looks as though you are actually creating a “fixed footer” rather than a “sticky footer” and IE6 doesn’t understand position:fixed so you are better off just letting IE6 have a normal footer especially as usage is very low for ie6 these days.

If your problem was in a newer version of IE then you’ll need to clarify as it seemed ot look ok in ie8 to me.