Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Internet Explorer FooterStickAlt - Can I add more to my footer?

    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!

  • #2
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    You have some strange code in you CSS before the asterisk (universal zero margin declaration).

    Code:
    
    I don't have IE7, but it might be causing the problem.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It's OK on my PC with IE7. Pulling the screen right down to 25% and it still scrolls perfectly.

    Frank
    __________________
    Attached Thumbnails Attached Thumbnails FooterStickAlt - Can I add more to my footer?-screenhunter_01-dec.-19-14.53.jpg   FooterStickAlt - Can I add more to my footer?-screenhunter_02-dec.-19-14.53.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #5
    New Coder
    Join Date
    Nov 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    It's OK on my PC with IE7. Pulling the screen right down to 25% and it still scrolls perfectly.

    Frank
    __________________
    No way! 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.

    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?

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    
    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.
    Last edited by Apostropartheid; 12-19-2007 at 04:21 PM.

  • #7
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    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>
    Last edited by Donkey; 12-19-2007 at 03:55 PM.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #8
    New Coder
    Join Date
    Nov 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Donkey View Post
    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!

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.
    Last edited by Apostropartheid; 12-19-2007 at 04:24 PM.

  • #10
    New Coder
    Join Date
    Nov 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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...

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    New Coder
    Join Date
    Nov 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 shown below, I matched the colors fairly close:







    My full-height solution - just in case you were interested.

    .
    Last edited by Excavator; 12-19-2007 at 08:38 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Nov 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #15
    New Coder
    Join Date
    Nov 2007
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Whoops, double post.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •