Sticky Footer & Transparency Issues

[Siebird]

Hi All -
2 issues that I am currently running into...
First: I would like to implement a sticky footer and can't seem to figure out what I am missing? I tried using this example and had no luck. So currently I have nothing in place, but for some reason I am getting extra margin/padding space below my footer.

#globalfooter {
	margin: 0 15px 0 15px;
	padding: 3px 0 5px 0;
	border-top: 1px dotted #CF9;}
 
#globalfooter p {
	margin: 0;
	padding: 3px;
	font-size: .65em;
	color: #CF9;
	text-transform: uppercase;}
 
#globalfooter a {color: #FFF}
#globalfooter a:hover {color: #000; text-decoration: none; background: #CF9}
 
#globalfooter, .push {
	height: 4em; /* .push must be the same height as .footer */
}

<div id="content">	
		<div id="content_main">
		...
		</div>
		<div id="globalfooter">
			<p><a href="#" title="Services">Home</a> | <a href="#" title="Services">Services</a> | <a href="#" title="Products">Products</a> | <a href="#" title="Our Work">Our Work</a> | <a href="#" title="Testimonials">Testimonials</a> | <a href="#" title="Contact Us">Contact Us</a></p>
			<p>Copyright &copy; 2008 S&amp;J Construction. All Rights Reserved. Site by <a href="http://www.baublitz.com" title="Baublitz Advertising">Baublitz Advertising</a> | <a href="#" title="Your Privacy is Protected">Terms &amp; Conditions</a></p>
			<p><a href="http://validator.w3.org/check?uri=referer" title="Valid HTML 4.01 Transitional">HTML</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Valid CSS!">CSS</a></p>
		</div>
	</div>
</body>
</html>

Second: Is there anyway of making a background that repeats in IE6 to be transparent? Currently I am using filter: alpha(opacity = 50); but that cause everything after to be transparent??? Any suggestion would greatly be appreciated.

Here is a live example

[Siebird]

I fixed the footer margin/padding issues. I used negative position on my #content div with 'margin-top:' rather than 'top:' which was causing that extra spacing after the footer.

One other thing I just noticed, for some reason in IE7 I dont get the bottom red borders on the navigation items?

[Paul O'B]

Hi,

To fix the border in the nav in ie7 add position:relative here:

#home #headerNav #homeNav a,
#services #headerNav #servicesNav a,
#products #headerNav #productsNav a,
#work #headerNav #workNav a,
#testimonials #headerNav #testimonialsNav a,
#contact #headerNav #contactNav a,
#headerNav li a:hover {
    color: #CF9;
    text-decoration: none;
    border-bottom: 3px solid #900;
    position:relative;
}

IE won't show full padding or borders on inline elements unless position:relative is added.

The footer technique is documented in the FAQ and is probably where all other versions have stemmed from at some time or another. There are also numerous examples in the 3 col sticky thread at the top of the forum.

econd: Is there anyway of making a background that repeats in IE6 to be transparent?

In some cases you can use a transparent background png and use the alpha image loader. It won't however repeat images but will scale or crop them.

You can see an example here:

http://www.pmob.co.uk/temp/transparent-test4.htm

The borders and the image have the alpha image loader filter applied.

Hope that helps.

[Siebird]

IE won't show full padding or borders on inline elements unless position:relative is added.

Thanks for the info!

The footer technique is documented in the FAQ and is probably where all other versions have stemmed from at some time or another. There are also numerous examples in the 3 col sticky thread at the top of the forum.

I have 2 minor issues still with this...In Safari it seems that positioning the footer with absolute, seems to push the footer beyond the viewing port even if there is enough room for the footer. Secondly, in IE6...the footer pushes back up into the content depending on the view port size, but that is no big deal as I removed this technique for IE6 users.

You can see an example here:

http://www.pmob.co.uk/temp/transparent-test4.htm

The borders and the image have the alpha image loader filter applied.

Hope that helps.

I am still not able to achieve this effect in IE6. I have a 1px x 1px background image, I am not sure if this is to small. I believe I might not be declaring it correctly...

#content {
	position: relative;
	width: 800px;
	height: auto;
	margin:0px auto;
	margin-top: -79px;
	padding: 0;
	text-align: left;
	color: #FFF;}
 
html>body #content {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../layout/bg-content.png',sizingMethod='scale');
}

Thanks again for all the help!

[Paul O'B]

I have 2 minor issues still with this...In Safari it seems that positioning the footer with absolute, seems to push the footer beyond the viewing port even if there is enough room for the footer.

Older safari (1.2 and (maybe 1.3)) don't understand min-height so they can't be catered for with this method.

Secondly, in IE6...the footer pushes back up into the content depending on the view port size, but that is no big deal as I removed this technique for IE6 users.

Then you are doing it wrong as this technique has now been sold a million times and works fine in iE6 Re-read the explanations to understand how this is working as you are missing some finer points.

Here is the method again in a slightly different format but basically the same techniques. This method is a little neater.

http://www.pmob.co.uk/temp/spointfooter.htm

And here you can see it working in a range of browsers.

http://www.browsercam.com/public.aspx?proj_id=389788


[quote]

html>body #content {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../layout/bg-content.png',sizingMethod='scale');
}

[quote]

You are only supposed to be giving the code it ie6 and under yet you have immediately excluded them from using it because you have used the child selector that IE doesn't understand!!


IE should be given the filter like this

* html #content {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../layout/bg-content.png',sizingMethod='scale');
}

The image will be relative to the alpha filter and not the stylesheet so use an absolute reference.

The original background image has to be negated which is done with the background:none style.

Remember that the alpha image loader does not repeat an image it will scale it so a 1px by 1px image isn't going to look very good. Make the image bigger so that t doesn't lose too much when scaled.

Refer to my example again as you have managed to copy the code incorrectly first time

[Siebird]

Then you are doing it wrong as this technique has now been sold a million times and works fine in iE6 Re-read the explanations to understand how this is working as you are missing some finer points.

You are only supposed to be giving the code it ie6 and under yet you have immediately excluded them from using it because you have used the child selector that IE doesn't understand!!

The image will be relative to the alpha filter and not the stylesheet so use an absolute reference.

The original background image has to be negated which is done with the background:none style.

Remember that the alpha image loader does not repeat an image it will scale it so a 1px by 1px image isn't going to look very good. Make the image bigger so that t doesn't lose too much when scaled.

Working...thanks for explaining, it now makes more sense to me. The 1px x 1px background image looks good scaled! Thanks again for all your help, I learn something new everytime I post!

[Paul O'B]

Thanks again for all your help, I learn something new everytime I post!

No problem, I always have to read things twice before they sink in