Solved

sticky footer too far down in internet explorer

Posted on 2009-07-14
6
334 Views
Last Modified: 2012-05-07
Hi.  I have a css sticky footer in my website.  The problem is is there seems to be too much space between the content and the footer, so that in internet explorer, you have to scroll down to see the footer.  It doesn't stay visible based on the size of the browser window.  Any help would be GREATLY appreciated.  Thank you in advance. Here's my html code from my page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</style><link rel="stylesheet" type="text/css" href="metstyle3.css"/>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"><div class="logo"><img src="images/metimg_0000_Layer 2.png" width="147" height="56" alt="The Metropolitan Dallas Condos" /></div><div class="menu"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a></li>
    <li><a href="dallas_condos.html">Floorplans</a></li>
    <li><a href="photo_gallery.html">Photos</a></li>
    <li><a href="affordability.html">Affordability</a></li>
    <li><a href="condo_amenities.html">Amenities</a></li>
    <li><a href="neighborhood.html">Neighborhood</a></li>
    <li><a href="news.html">News</a></li>
    <li class="current_page_item"><a href="contactus.html">Contact</a></li>
  </ul>
  </ul></div>
  <div id="bottomcontainer">
    <div id="headerimg"><img src="images/amenities.gif" width="241" height="36" alt="For Worth neighborhood" /><div id="text">Sophistication meets decadence <br />
at The Metropolitan  and they have
a good thing going. </div>
    </div>
  </div>
      <div id="greybarvertamen"><h3>Community</h3><p>24-hour concierge: <em>At your service.</em><br />
          Rooftop pool: <em>See and be seen.</em><br />
          Surround-sound theater: <em>Now showing (insert favorite movie here).</em><br />
          Private clubroom: <em>Host the party... or the after-party.</em><br />
          Fitness center: <em>Cardio, free weights, weight machines, hard bodies.</em><br />
          Meeting room: <em>BYOA (bring your own agenda).</em></p>
        <h3>Condos</h3><p>Contemporary 1, 2 and 3-bedroom designs<br />
          Stunning views<br />
          Private balconies available <br />
          Marble masterbath suites with designer fixtures<br />
          Spacious kitchens<br />
          Granite countertops<br />
          Stainless appliances<br />
          Imported Italian cabinets</p>
              </div>
            </div>
          </div>
        </div>
        <div id="footer"><div id="block-containerthree"><div id="garrisoneho"><img src="images/garrisoneho.png" width="91" height="22" /></div><div class="addresstxt">
    &nbsp;&nbsp; 214.749.1200 | 1200 Main Street | Dallas, TX 75202 | SAT. &amp; SUN 12 - 5 p.m. | MON/TUES/WED 11 a.m. - 6 p.m | THURS/FRI: By appointment    &nbsp;&nbsp;&nbsp; Follow us:</div><div id="garrisoneho"><img src="images/twitter.png" width="15" height="19" alt="twitter" /><img src="images/facebook.png" width="22" height="22" alt="Twitter" /></div></div></div>
</body>
</html>
 and below is the css in a separate style sheet.
@charset "UTF-8";

/* CSS Document */

#block-container {

	width:1000px;

	margin: 0 auto;

	height: 208px;

}

#btmright {

	margin-top: 40px;

	margin-left: auto;

	width: 778px;

	margin-right: auto;

}

#block-containertwo {

	width: 1000px;

	padding-left: 8px;

	margin: 0 auto;

}

.blockstwo {

	float:left;

	width:270px;

	margin-right:4px;

	padding-left: 50px;

}

.blocks {

	float:left;

	width:270px;

	margin-right:4px;

	padding-left: 48px;

}

.clearfix {

	clear:both;

}

.logo {

	width: 178px;

	margin-bottom: 20px;

	margin-left: 8px;

	text-align:left;

	float: left;

	margin-top: 30px;

}
 

h1 {

	font: 21px Arial, Helvetica, sans-serif;

	line-height: 19px;

	text-align: left;

	font-weight: bold;

}

p {

	font: 12px Arial, Helvetica, sans-serif;

	color: #666666;

	line-height: 14pt;

	text-align: left;

}

h2 {

	font: 36px Arial, Helvetica, sans-serif;

	margin-top: 24px;

}

#topimg {

	width: 100%;

	background: url(images/bgimg.png) repeat-x top center;

	max-height: 10px;

	height: 10px;

	overflow: hidden;

}

#headerrow {

	font-weight: bold;

}

h4 {

	font: 12px Arial, Helvetica, sans-serif;

	color: #000;

}

#headerimg {

	height: 50px;

	width: 398px;

	margin-top: 160px;

	float: left;

	margin-left: -100px;

	position: inherit;

}

#greybarvert {

	background: #CCCCCC;

	width: 12px;

	float: left;

	margin-top: 40px;

	overflow: hidden;

	float: left;

	height: 470px;

}

#greybarvertamen {

	width: 420px;

	float: left;

	margin-top: 40px;

	overflow: hidden;

	background-image: url(images/bgside.jpg);

	background-position: top left;

	background-repeat: repeat-y;

}

#greybarvertafford {

	width: 500px;

	float: left;

	margin-top: 40px;

	overflow: hidden;

	margin-bottom:20px;

	background-image: url(images/bgside.jpg);

	background-position: top left;

	background-repeat: repeat-y;

}

#greybarvertnews {

	background: #CCCCCC;

	width: 12px;

	float: left;

	margin-top: 40px;

	overflow: hidden;

	height: 494px;

}

#greybarvertnei {

	width: 500px;

	float: left;

	margin-top: 40px;

	overflow: hidden;

	background-image: url(images/bgside.jpg);

	background-position: top left;

	background-repeat: repeat-y;

}

#greybarvertphoto {

	background: #CCCCCC;

	width: 12px;

	float: left;

	margin-top: 55px;

	overflow: hidden;

	height: 418px;

}

.greybarone {

	width: 312px;

	margin-left: 26px;

	float: left;

	background-color: #B0B0B0;

	height: 10px;

	max-height: 10px;

	overflow: hidden;

	margin-bottom: 10px;

}

.greybarthree {

	background-color: #B0B0B0;

	width: 312px;

	max-height: 10px;

	height: 10px;

	margin-left: 12px;

	float: left;

	overflow: hidden;

	margin-bottom: 10px;

}

.greybar {

	width: 312px;

	background-color: #B0B0B0;

	float: left;

	height: 10px;

	overflow: hidden;

	margin-bottom: 10px;

	margin-left: 12px;

}

.btmleft {

	width: 260px;

	margin-left: 48px;

	float: left;

}

.btmmid {

	float: left;

	width: 280px;

	margin-left: 60px;

}

.btmright {

	float: left;

	width: 270px;

	margin-left: 40px;

	padding-right: 0px;

}

.container {

	margin: 0 auto;

	float: left;

}

.homeimg {

	margin-bottom: 30px;

	text-align: center;

}

.content {

	width: 1000px;

}

#block-containerthree {

	width:1000px;

	margin: 0 auto;

	width: 920px;

	text-align: center;

}

#footer #block-containerthree .addresstxt {

	float: left;

	padding-top: 14px;

	padding-left: 20px;

}

#garrisoneho {

	float: left;

	padding-top: 8px;

	padding-left: 10px;

}

#block-containersecond {

	float: left;

}

#block-containersecond .headerimg {

	margin-top: 146px;

	margin-left: -112px;

}

#contactform {

	float: left;

	margin-left: 25px;

	width: 300px;

	height: 430px;

}

.amenities {

	width: 470px;

	padding-top: 15px;

	padding-bottom: 15px;

	padding-left: 25px;

}

#news {

	float: left;

	margin-top: 15px;

	margin-left: 25px;

	width: 470px;

	margin-bottom: 15px;

	height: 370px;

	overflow: scroll;

	overflow-x: hidden;

	overflow-y: auto;

}

#photos {

	float: left;

	margin-top: 55px;

	margin-left: 25px;

	width: 440px;

	margin-bottom: 15px;

	height: 418px;

}

input.red {

	background-color: #FF902B;

	color: #FFF;

	text-align: center;

	text-shadow: none;

	border: #FF902B solid 1px;

	font-variant: small-caps;

	font-size: 14px;

	font-weight: bold;

}

input {

	font: 10px Arial, Helvetica, sans-serif;

	padding: 4px;

	margin: 6px;

	text-shadow: none;

	border: 1px solid #CCCCCC;

}

textarea {

	font: 10px Arial, Helvetica, sans-serif;

	margin: 6px;

	padding: 4px;

	text-shadow: none;

	border: 1px solid #CCCCCC;

}

select {

	background-color:#FFF;

	font: 10px Arial, Helvetica, sans-serif;

	margin: 7px;

	padding: 4px;

	width: 157px;

	text-shadow: none;

	border: 1px solid #CCCCCC;

}

#text {

	font: 16px Arial, Helvetica, sans-serif;

	height: 100px;

	width: 320px;

	color: #666666;

}

#bottomcontainer {

	margin: 0 auto;

}

#main {

	padding-bottom: 38px;

	height: 100%;

	width: 778px;

	margin: auto;

}  /* must be same height as the footer */

h3 {

	font: bold 14px Arial, Helvetica, sans-serif;

	margin-top: 0px;

	margin-bottom: -10px;

}

html{

	height: 100%;

}

body {

	margin: 0 auto; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

	padding: 0px;

	behavior: url("csshover3.htc");

	background: url(images/bgimg.png) repeat-x top center;

	height: 100%;

}

#wrapper {

	width: 1000px;

	height: 100%;

	padding-top: 10px;

	padding-bottom: 8px;

	margin: auto;

}

#maincontent {

	width: 1000px;

	padding-top: 10px;

	padding-bottom: 8px;

	margin: auto;

}

#footer {

	height: 38px;

	background: url(images/footerimg.png) repeat-x;

	color: #fff;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	text-align: center;

	width: 100%;

	position:fixed;

	margin-top: 10px;

	left: 0px;

	bottom: 0px;

} 

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

/* End hide from IE-mac */

}

#wrapper .rightcol .contact_rightcol #photos a img {

	margin-right: 20px;

	margin-bottom: 20px;

	border: none;

}

#wrapper #photos img {

	margin-right: 20px;

	margin-bottom: 20px;

	border: none;

}

#wrapper .rightcol .contact_rightcol #contactform #metaddress table tr td #metaddress p img {

	vertical-align: text-top;

	padding-left: 4px;

	border: none;

}

#wrapper .rightcol .contact_rightcol #contactform #metaddress table tr td #metaddress p {

	line-height: normal;

	padding-left: 8px;

}

#wrapper .rightcol .contact_rightcol #news h3 {

	margin-top: 5px;

}

#floorplans {

	width: 778px;

	margin: auto;

	position: inherit;

}

#wrapper #greybarvertamen h3 {

	padding-top: 15px;

	padding-bottom: -10px;

	padding-left: 25px;

}

#wrapper #greybarvertamen p {

	padding-left: 25px;

}

#wrapper #greybarvertnei .rightcol .contact_rightcol .neighbormap {

	margin-left: 25px;

	margin-top: 15px;

	margin-bottom: 15px;

}

#wrapper #greybarvertnei .contentmain {

	margin-top: 15px;

	margin-bottom: 15px;

	margin-left: 25px;

}

#wrapper #greybarvertnei .contentmain table tr td p {

	padding-left: 10px;

	line-height: normal;

}

#wrapper #greybarvertnei .contentmain table tr td p a img{

	vertical-align: text-top;

	padding-left: 5px;

	border: none;

}

Open in new window

0
Comment
Question by:kmurphychi
  • 3
  • 2
6 Comments
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24855274
The attached stylesheet is the

<link rel="stylesheet" type="text/css" href="metstyle3.css"/>

Stylesheet, correct?

Can you post this stylesheet also?

<link href="SpryAssets/SpryMenuBarHorizontal3.css" rel="stylesheet" type="text/css" />

It'd be easier to see the problem if it was laid out exactly the same.
0
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24855298
The footer is supposed to be at the bottom of the page and scroll with you as you move up and down, correct?  It seems to be working fine for me in IE7 and IE8.  I don't have to scroll the page at all to see it, and it follows me down.
0
 

Author Comment

by:kmurphychi
ID: 24855303
Hmmm.  Maybe it's just IE6 that it has the problem.  There is no extra space?  Can you see the footer at all times?
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Expert Comment

by:ryangiglio
ID: 24855352
Yes, I can see the footer at all times.

I'm not surprised that IE6 has a strange glitch, but I'm not familiar with enough IE6 hacks to be able to help you out with that.  Sorry.  Maybe someone else can help you out too.
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24855366
IE6 doesn't support position:fixed. You could use a workaround like this one: http://tagsoup.com/cookbook/css/fixed/
0
 

Author Closing Comment

by:kmurphychi
ID: 31603532
Thanks!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now