Sticky footer works fine except IE 6-7-8

Enok Peon

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

Hi everyone.
I'm new to this site and in html in general.

I've done though some coding in C++ and java in the past.

anyway as i said, html is new for me and someone asked me recently to build a site for them.

After going through a crash course this past week i've been able to pick up some basic stuff.

The site i've built works perfectly fine in firefox/chrome/safari and others.
(I personally tested it in FF/chrome/EI/Seamonkey and Safari and used an online browser compatibility service that tests it in other browsers as well among different versions.)

It only has one small minor bug in Opera (bottom footer width refuses to go 100% left and right)

My point of posting here though is IE from 6 to 8

The footer refuses to stick to the bottom.

It always ends up right under the main body

the width also doesn't expand (same as opera) to the full length of the window. this is only visible when the footer is in a colored in something other that the rest of the page.

it has driven me crazy and have tried over a dozen different techniques in order to achieve this without any success.

I was wondering if anyone has the time to take a look at my code below and possibly point me towards the right direction

index file
<html>
<head>

  <link rel="stylesheet" href="api.css">

</head>

<body>

<div align="center">

	<div id="content">

		<div id="main">

		<img alt="" src="images/image1.jpg"><br><br>

		<table style="text-align: left; width: 800px; height: 237px;" border="0"
							 cellpadding="2" cellspacing="2">

			<tbody><tr>
			<td style="text-align: left; vertical-align: top; width: 200px; height: 150px;">
      			<div id="menu"><ul>
        		<li><a href="link1.html" title="Link 1">link1</a></li><ul>
          		<li><a href="link2.html" title="Link 2">link2<br></a></li></ul>
        		<li><a href="link3.html" title="Link 3">link2<br></a></li>
        		<li><a href="link4.html" title="Link 4">link14</a></li>
        		<li><a href="link5.html" title="Link 5">link5<br>
          		</a></li></ul></div></td>
      			<td style="vertical-align: top; font-family: Times New Roman,Times,serif;">
			<span style="text-decoration: underline;">
			<span style="font-weight: bold;">TEXT
 TEXT TEXT TEXT TEXT<br><br>
      			</span></span></td>
      			<td style="vertical-align: top;">
			<a href="link5.html">
			<img alt="image2" src="images/image3.jpg" style="border: 0px solid ;"></a>
			<br></td></tr></tbody>

		</table>

		</div>
	
		<div id="footer">FOOTER TEXT</div>
	</div>
</div>

</body>

</html>
HTML:
CSS file
html, body, #contents {
	min-height: 100%;
	width: 100%;
	height: 100%;
}

/*
 * The "height" above is a hack for IE5+/Win.  Below we adjust
 * it using the child selector to hide from IE5+/Win
 */

html>body, html>body #contents {
	height: auto;
}

/*
 * Without this, Moz1.0 adds a vertical scrollbar
 */

body {
	margin: 0;
	font-family: Arial, sans-serif;
}

#contents {
	position: absolute;
	top: 0;
    left: 0;

/*  Use the following to center this at 50% width, or this for 750px: width: 700px, margin-left: -350px: */
/*
	left: 50%;
    width: 50%;
    margin-left: -25%;
*/

}

#footer {
	position: fixed;
	bottom: 0;
	background-color: #FFF;
	width: 70%; 
	text-align: center;
	padding: 10 15%;
}



/* from a css help site: "Stupid hack lets IE see 100%, others see 70%." */
#footer {
    \width: 100%;
    w\idth: 70%;
}

#main {
	margin-bottom: 5em;
	height: auto;
	padding: .5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 100%;
}



/*----------------------------------------------------------*/

/*--- this is for vertical bar to apear.
my pages have a banner that is centered.
pages that are long and have a scrollbar
jump slightly off everytime you click on them.
if anyone know of a good trick to not have this
i'm more than interested ---- */

html{
   overflow-y:scroll;
   overflow-x:auto;
}


/*----------------------------------------------------------*/


/*- Menu buttons ----- */

#menu {
width: 200px;
margin-top: 15px;
margin-left: 2px;
margin-right: 20px;
border-style: solid solid none solid;
border-color: #D8D5D1;
border-width: 1px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #3688BA;
display: block;
background: url(menu.gif);
padding: 8px 0 0 30px;
}

#menu li a:hover {
color: #3688BA;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 32px;
}
                    
ul { list-style: none; margin: 0;
padding: 0;

}                    
HTML:
Sorry if my code is crude for some to look at.
I've only been at it for the past few days so i'm glad i've made it this far.

I know that some will point to the fact that i used a table rather than a CSS code for the main body
but i thought it would be best to take one step at a time.

I will start climbing those mountains after i finish climbing this hill.

Thanks to everyone in advance for any help or suggestions you may have to give.

Enok, Feb 17, 2010 IP

drhowarddrfine Peon

Messages:: 5,428

Likes Received:: 95

Best Answers:: 7

Trophy Points:: 0

#2

Without a doctype you will never get IE to attempt to perform like other far more modern browsers. Add this to your first line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

drhowarddrfine, Feb 17, 2010 IP

Enok Peon

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#3

HI, thanks for the reply.

the index file i posted above is gutted out to the bare essentials.
My html editor automatically adds a doctype, i just chose not to include in the above thinking it would be a given.

Enok, Feb 17, 2010 IP

drhowarddrfine Peon

Messages:: 5,428

Likes Received:: 95

Best Answers:: 7

Trophy Points:: 0

#4

Enok said: ↑

the index file i posted above is gutted out to the bare essentials.
My html editor automatically adds a doctype, i just chose not to include in the above thinking it would be a given.
Click to expand...

I learned long ago not to assume that. You'd be surprised how many people still don't use one.

drhowarddrfine, Feb 17, 2010 IP

dabzo Peon

Messages:: 188

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#5

With your position to fixed:

Set the left:50%, then set the right: -(1/2 the width of the div you are positioning)

That will keep things looking the way they should.

ex:
#footer{width:980px;height:28px;position:fixed;bottom:0;left:50%;margin:0 0 0 -490px;padding:0;}
Code (markup):
Unless you want it off center, say in just one col...
The following is positioned in the left 200px of a 1000width div:
#footer{width:180px;height:28px;position:fixed;bottom:0;left:50%;margin:0 0 0 -490px;padding:0;}
Code (markup):
Hope that help!
Cheers!

dabzo, Feb 17, 2010 IP

Enok Peon

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#6

Thanks for the help everyone.

i was able to resolve this issue using the css template from this site with some minor alterations.
Posting the link below because live links operantly are not available to me yet
http://ryan.rawswift.com/2009/02/15/fixed-that-bar-at-the-bottom-like-facebook/

Works great in all versions of IE as well as opera
it even works in IE5 (if anyone is still using that piece of junk)

Anyway, thanks again for the help!

Enok, Feb 18, 2010 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#7

Ok, I don't know what source you are learning from, but it needs a serious bitch-slap.

Tables for layout - this is *** that shouldn't even be TAUGHT anymore... and frankly, if your editor is 'automatically adding' things like a doctype, you are using the wrong editor. Go get a flat text editor. Crimson editor, Editplus, notepad++, etc, etc...

You've been learning a bunch of *** that's a decade out of date. There are a whole slew of outdated markup elements you aren't even supposed to be learning at this point. Align, table for layout, breaks doing the job of padding, etc, etc...You also seem to be knee deep in div, ID and classes for no good reason. Not every element warrants an extra DIV.

Or even simple **** like this:

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

That's COMPLETELY unnecessary, unwarranted and unneeded.

You've also got some really invalid/messed up markup - like this:

<li><a href="link1.html" title="Link 1">link1</a></li><ul>
<li><a href="link2.html" title="Link 2">link2<br></a></li></ul>

You shouldn't be closing the ul there, and frankly if your title text is identical to your anchor text, you don't need a title attribute.

I'd have to see the actual layout and content you are trying to accomplish to say for sure, but if you are willing to share that I can show you the ropes in a MODERN fashion --- since I can pretty much assume you have been learning from all the wrong places.

I'm taking a wild guess, but I would assume that your HTML for what you are doing should PROBABLY look more like this:
<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>



<title>
	$pageTitle - $siteTitle
</title>

</head><body>



<div id="pageWrapper">

	<h1>
		$siteTitle
		<span></span>
	</h1>
	
	<div id="firstSideBar">
		<ul id="mainMenu">
			<li><a href="link1.html">Link 1</a></li>
			<li><a href="link2.html">Link 2<br></a></li>
			<li><a href="link3.html">Link 2<br></a></li>
			<li><a href="link4.html">Link 4</a></li>
			<li><a href="link5.html">Link 5</li>
		</ul>
	</div><hr />
	
	<div id="content">
		<h2>$pageTitle</h2>
		<p>TEXT TEXT TEXT TEXT</p>
	</div><hr />
	
	<div id="secondSideBar">
		<a href="link5.html">
			
			<img src="images/image3.jpg" alt="image2" />
		</a>
	</div><hr />
	
	<div id="footer">
		Footer Text
	</div>
		
</div>

</body></html>
Code (markup):
with EVERYTHING else going on there belonging in your external stylesheet.

Oh, and 800px is not 800 wide friendly, you need to take off 32px for browser chrome (like the scrollbar).

deathshadow, Feb 20, 2010 IP

Enok Peon

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#8

LOL

thanks
a day too late but still thanks

Seamonkey was the culprit that allowed me to add tables.

I knew from the beginning this was not the way to go but due to my inexperience i took the easy way out.

I decided to drop seamonkey altogether and go old style using notepad and write the whole thing myself using nothing but divs for the layout.

sadly i learned the hard way that adding div's within other divs can cause other problems in IE.

so then i had to learn how to fix those problems one by one.

good thing is i was able to learn a whole bunch out of this and the site looks even better than before.

It works great in all browsers.

Thanks for all the help

PS. after learning a whole bunch through trial and error i realized how much junk seamonkey adds in a page. never using it again.

Enok, Feb 20, 2010 IP

masud7827 Active Member

Messages:: 165

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 51

#9

gr8 code, thanks

masud7827, Feb 20, 2010 IP

dabzo Peon

Messages:: 188

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#10

That's some sexy work there shadow,

On a somewhat related note, I put together a quick tutorial on getting around the center aligning of divs in ie... margin left/right auto doesn't seem to work well with browser zoom, so feel free to grab the jpg in case anyone needs a reference. http://dabzo.com/blog.php

It's pretty basic, and I would be happy to hear crits on how the diagram is put together.

Thanks!

Last edited: Feb 20, 2010

dabzo, Feb 20, 2010 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#11

dabzo said: ↑

On a somewhat related note, I put together a quick tutorial on getting around the center aligning of divs in ie... margin left/right auto doesn't seem to work well with browser zoom, so feel free to grab the jpg in case anyone needs a reference. http://dabzo.com/blog.php
Click to expand...

Just remember that text-align only applies to IE6/newer if you don't have a valid doctype and are in 'quirks mode'... Which means for a modern page it should ONLY apply if you care about supporting IE 5.x

On IE6/newer - so basically anything made within the past eight years - if you have a doctype with nothing preceding it, margin:0 auto; works JUST FINE.

deathshadow, Feb 21, 2010 IP

dabzo Peon

Messages:: 188

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#12

It does, but using the text-align keeps the div centered even when the browser is zoomed in and out.

And for a doctype with nothing preceding. I can't say I've experimented with that. But would it not mess with your wc3 validation?
...Unless... What if there were a new sort of validation, the next version of html... 5 perhaps. Then, ?

I was aware that the margin ?-auto; would work in ie. But the text-align tweak is the only way I have found to get it to zoom absolutely, instead of relatively without declaring the divs positioning.

Last edited: Feb 21, 2010

dabzo, Feb 21, 2010 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#13

dabzo said: ↑

I was aware that the margin ?-auto; would work in ie. But the text-align tweak is the only way I have found to get it to zoom absolutely, instead of relatively without declaring the divs positioning.
Click to expand...

I have absolutely ZERO idea what you mean by that. What version of IE isn't it centering in when you 'zoom' - what type of zoom, the old fashioned text-size, or the IE7/newer opera style zoom (that botches just about everything)?

As to the 'preceeding' the doctype, technically there is ONE element that is valid XHTML that can go before the doctype; and that's the XML Prolog. Thankfully the prolog is optional in XHTML 1.0, which is why if you are going to use XHTML, it's 1.0 or nothing - thanks IE!

Oh wait, not thanks, that other thing...

deathshadow, Feb 22, 2010 IP

dabzo Peon

Messages:: 188

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#14

deathshadow said: ↑

I have absolutely ZERO idea what you mean by that. What version of IE isn't it centering in when you 'zoom' - what type of zoom, the old fashioned text-size, or the IE7/newer opera style zoom (that botches just about everything)?
Click to expand...

Not sure off the top of my head, which version. Pretty sure it's 7+, if not previous versions as well.
I have found that when centering a div using only margin left/right:auto, that when you zoom out, using browser zoom, that the div floats off to the left. I think the auto margins are applied when the page is loaded and then left as a static value, even when the view is zoomed-out. The result is that while site site scales, but the auto margins do not, they stay at the same width they were, relative to the portal.

If you get a chance, try a zoom out on a margin left/right auto div in ie. Then compare that to a div with the text-align set to center. If I'm not mistaken, the one will zoom out and float to the upper left, whereas the text-aligned div with become narrower, but stay in the center of the page.

Using default positioning, of course, and not absolute or fixed.

dabzo, Feb 22, 2010 IP

Stomme poes Peon

Messages:: 3,195

Likes Received:: 136

Best Answers:: 0

Trophy Points:: 0

#15

Know that IE7 is a poor-man's imitation of Opera's zoom. There are many bugs associated with IE zoom and sometimes I'd consider using "better" code even if it breaks a bad browser's zoom... esp since I as a developer would assume that later versions of IE would only improve this buggy behaviour... meaning modern code would work better and better rather than having to deal with "an IE8-friendly version" and then "an IE9-friendly version" etc.

Margin: 0 auto, if it's letting the centered box move to the left as you zoom out, would mean IE is not resetting margins as the space grows... it's keeping the margins where they were before you zoomed.

Text-align does strangely (and against the specs) still center blocks in IE, even when you do have a proper doctype. This I think has led to confusion because we're always going around telling people to use the text-align trick if they need to get IE5.5 and below working (those browsers could ONLY use the text-align trick to center blocks). That IE still centers blocks even with a Doctype is a sort of extra toe that evolution never removed (because it does no harm).

nevertheless, text-align doesn't center blocks in any other browser. You could choose to have a hacked version of code inside IE conditional comments if you believe your site will need a lot of zooming or something (people who have been using IE7 should be expecting stuff to break, because it's been breaking sites all along). That way everyone else still gets the Modern Code and your code is somewhat more future-proofed.

Stomme poes, Feb 22, 2010 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#16

dabzo said: ↑

I have found that when centering a div using only margin left/right:auto, that when you zoom out, using browser zoom, that the div floats off to the left. I think the auto margins are applied when the page is loaded and then left as a static value, even when the view is zoomed-out. The result is that while site site scales, but the auto margins do not, they stay at the same width they were, relative to the portal.
Click to expand...

I probably have never seen that problem because the only element I usually have margin:0 auto; on is my outermost wrapper - and I still support IE 5.5 / 5.2.

deathshadow, Feb 22, 2010 IP

Log in or Sign up

Advertising (learn more)

Sticky footer works fine except IE 6-7-8

Enok Peon

drhowarddrfine Peon

Enok Peon

drhowarddrfine Peon

dabzo Peon

Enok Peon

deathshadow Acclaimed Member

Enok Peon

masud7827 Active Member

dabzo Peon

deathshadow Acclaimed Member

dabzo Peon

deathshadow Acclaimed Member

dabzo Peon

Stomme poes Peon

deathshadow Acclaimed Member

Log in or Sign up

Advertising (learn more)

Sticky footer works fine except IE 6-7-8

Enok Peon

drhowarddrfine Peon

Enok Peon

drhowarddrfine Peon

dabzo Peon

Enok Peon

deathshadow Acclaimed Member

Enok Peon

masud7827 Active Member

dabzo Peon

deathshadow Acclaimed Member

dabzo Peon

deathshadow Acclaimed Member

dabzo Peon

Stomme poes Peon

deathshadow Acclaimed Member

Useful Searches