...

View Full Version : FooterStickAlt - Can I add more to my footer?



JudyDesign
12-19-2007, 01:53 PM
I have an interesting problem going on at this site:

http://www.goh-inc.com/testnewsite/index4.htm

For the record, the crappy color selections are just for previewing purposes. Cyan is my footer, and the bright yellow is my bottom padding, to make sure none of the content will be covered by the footer. And the neon green is the header, though some of the pictures there are already in place.

I'm designing the site to work in IE5.5, IE6, IE7, and Firefox; these browsers compromise about 99% of our target audience that already visits the existing website, so I know we're good there. By the way, I'm not able to test in IE5.5 yet, so if someone knows an easy way to get that working in Vista or in my WindowsXP virtual machine that had IE6, let me know.

Ok, for the real problem. Firefox and IE6 work the way I want them to; when you resize the page, the footer sticks to the bottom of the screen, UNLESS there's too much content, then the footer stays over the padding at the bottom of the content, and you can scroll the page. But in IE7, scrolling stops working; the footer stays in place no matter how big or small you make the window. BUT, if you maximise or restore the screen, the footer seems to be in place, the same way it is in firefox. It just breaks when you manually size the screen...

Anyone know why this behavior happens? Also, can someone tell me if it looks absolutely horrendous in IE5.5, and if there's a way I can preview it in that browser? Thanks!

Donkey
12-19-2007, 02:19 PM
You have some strange code in you CSS before the asterisk (universal zero margin declaration).




I don't have IE7, but it might be causing the problem.

effpeetee
12-19-2007, 02:57 PM
It's OK on my PC with IE7. Pulling the screen right down to 25% and it still scrolls perfectly.

Frank
__________________

JudyDesign
12-19-2007, 03:18 PM
What is that!? I've been trying Microsoft Expression Web for this project, and was impressed with it until now. That mark doesn't show up in Expression, lemme open it in notepad and...

I still don't see it. Nor using Firebug. What program are you using to examine the code?

JudyDesign
12-19-2007, 03:22 PM
It's OK on my PC with IE7. Pulling the screen right down to 25% and it still scrolls perfectly.

Frank
__________________

No way! :confused: I hope my IE7 isn't just acting weird.

Well, thanks for looking. I did discover another problem, png transparency is acting really weird in IE6 and IE5.5, where it has to use a png fix to get transparency to work. But everything has a blue shade to it. Check it out here. (http://browsershots.org/http://www.goh-inc.com/testnewsite/index4.htm)

I'm using a png with a line height of 1px, then repeating that vertically for a background. On all versions of IE earlier than 7, it has a blue shade. Does anyone know the png hack very well?

Apostropartheid
12-19-2007, 03:25 PM

This is the Unicode BOM (Byte Order Mark.)

Try saving the encoding as UTF-8 without a BOM if you don't want it.

I can't see it in your code, though, so meh.

Donkey
12-19-2007, 03:45 PM
I saw it by using the Fx developers toolbar >>edit css

Just checked, it is still there.


<edit>
I just noticed in your footer html you have "push" before "footer" and "overfooter" inside "footer". Shouldn't the last two be the other way around? The names of the divs suggest they should. "Push" doesn't appear to do anything because it is empty. Is it meant to be a wrapper for "footer"?
</edit>

JudyDesign
12-19-2007, 04:08 PM
I saw it by using the Fx developers toolbar >>edit css

Just checked, it is still there.


<edit>
I just noticed in your footer html you have "push" before "footer" and "overfooter" inside "footer". Shouldn't the last two be the other way around? The names of the divs suggest they should. "Push" doesn't appear to do anything because it is empty. Is it meant to be a wrapper for "footer"?
</edit>

I'm still looking at getting rid of that mark. It might be a setting hidden somewhere on Expression, I'll have to find it.

And some of the structure is a little weird. "Push" is there to make sure the footer has plenty of padding so it doesn't go over content. Let me know if there's a better way to do that that works in the browsers I'm designing for.

And "overfooter" has to do with the way the footer is designed. There's an overlay PNG for the design of the site, which is overfooter. Then "footer" has an internal background image, that needs to fit under the overlay.

In fact, I just made the changes and put the images in there to make it easy to see. Check it out! :thumbsup:

Apostropartheid
12-19-2007, 04:20 PM
Again, the BOM is legal! It shouldn't cause problems, although it will appear in text applications and browsers not willing to handle it. The only vaguely widely used ones are like dead now. Anyway, if these browsers display the BOM, it's because they don't support UTF-8, and that'll be the least of your worries.

My IE7 behaves fine too.

JudyDesign
12-19-2007, 05:23 PM
Ok, that helps.

Any answers on PNG transparency? I don't know why they're coming out blue like that. Someone told me they're not sure if the png hack will work for repeatable images, but the footer overlay isn't repeating in the first place...

effpeetee
12-19-2007, 07:27 PM
http://homepage.ntlworld.com/bobosola/

The PNG problem in Windows Internet Explorer
Home | The Problem | The Solution | How To Use | More Info
This site is all about a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. If you want to get straight to the script, go to the how-to page and follow the instructions there. If you have the time for a description and demo of the problem, then read on...

Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 (not yet released at the time of writing in January 2006) is reported to have fixed the issue entirely.

The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers - in fact it is treated as an HTML comment - thanks to IE's conditional comments. This solution is therefore light, portable and non-invasive to other browsers.

Already use the script? You can check the change log for details of what's new. Please feel free to use or amend this routine you as see fit. I'm Bob Osola, and you can reach me at bobosola@gmail.com

JudyDesign
12-19-2007, 08:00 PM
The problem with that code is that it doesn't support css background images, which is what I use. AND, it doesn't support tiling, which is crucial here unless I want to create some huge single background in order to make sure I'm covered in case the background stretches 20,000 or 30,000 px... I've found plenty of solutions, but none that cover me in case this happens.

Excavator
12-19-2007, 08:35 PM
From the validator:
end tag for "head" which is not finished.
</head>✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.


I've always had this problem with using .png for a background - the hack doesn't work unless the image is presented in the markup.
When it's just basic colors like that though... easy enough to use a transparent .gif don't you think? Here a link to the .gif (http://nopeople.com/webfiles/backercontent.gif)shown below, I matched the colors fairly close:


http://nopeople.com/webfiles/backercontent.gif




My full-height solution (http://nopeople.com/CSS/full-height-layout/)- just in case you were interested.

.

JudyDesign
12-19-2007, 09:42 PM
I fixed the head, it validates the xhtml correctly now. And I was using a png because the menu bar on the left side is 15&#37; opaque, the idea being that if images were ever shown underneath, the menu would still be visible underneath. I realize that I even did that incorrectly, as "wrapper" is on the bottom of the pile, and there isn't any way to get images underneath, without maybe using z-index.

I'm working on the few items on the bottom now, and the basis of the site will be essentially finished. Thanks for your help so far; I'll use this thread if I have any other questions.

JudyDesign
12-19-2007, 10:12 PM
Whoops, double post.

robway
12-21-2007, 12:39 PM
Your site does not display correctly with IE6 on my Win2000 machine. IE7 (winxp) and firefox (both win versions) do display correctly.

The bottom image does not display in IE6. I don't see a reason in the coding.

Rob



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum