Fixed Footer Image troubles

  • We’ve got a pretty fancy-pants blog set-up, which looks almost perfect.
    It looks exact in Safari, but starts falling apart to different degrees in the other browsers. Can someone please tell me where the CSS is going funny? There are a few hacks to get the fixed-positioning to work, and to get the transparent PNGs, and I’m sure this is where the trouble begins. Basically, in IE the footer floats about 20 pixels above the bottom of the page, and in Firefox, the footer floats on top of the horizontal scroll-bar.
    It’s got to be a math error somewhere in the hacks, and I’m losing my mind trying to figure this out. Otherwise, I’m pretty stoked on it as a whole, and I haven’t seen anyone else doing anything like this. Which is why it’s so darn hard to figure this out.
    Help. https://basement.hsgadv.com

Viewing 5 replies - 1 through 5 (of 5 total)

  • youve way over complicated this and made a mess of your css. ive seen that effect used successfully quite a few times https://www.strawpollnow.com/
    i would study their css.

    for starters, why are you calling the .htc fix twice?

    /*img, #footer, #side {
	behavior: url(https://www.hsgadv.com/basement/iepngfix.htc);
	} /*this fixes the PNG transparency bug on IE*/

img, #footer, #side {
	behavior: url(https://basement.hsgadv.com/wp-content/themes/basement/iepngfix.htc);
	} /*this fixes the PNG transparency bug on IE*/

    you havent commented the first instance out correctly. delete one or the other. comments inside comments, etc is just not a good idea. keep it as clean as possible.

    Thread Starter mycombs

    (@mycombs)

    I like that strawpoll site, it’s pretty slick! There’s one major problem though: it’s broken on IE 6! It looks like they have all Style Sheets disabled on IE6 browsers. But otherwise, I can see some good stuff happening. Also, they aren’t working within wordpress, so it’s not as tricky concerning location of footers inside .php includes, etc.
    I am of course going to delete comments when this works; I will go delete the duplicate .htc bit in the style sheets, thank you for finding that!

    Anyone else have ideaS?

    Also, they aren’t working within wordpress, so it’s not as tricky concerning location of footers inside .php includes, etc.

    that really doesnt matter at all. you could learn a lot from their css. ie png fixes can be added easily without effecting anything else at all. i would start over, keep it as simple as possible, get it working in firefox etc, then apply the IE fix. for starters, your zindex setting is ridiculous.

    Thread Starter mycombs

    (@mycombs)

    ridiculous z-index settings are not a big deal; it’s actually helpful to set the highest layer a long distance (numerically) from the layer below it. It would be too easy to put things in the wrong order if it were 1,2,3,4,etc. It’s safer to use 1000, 2000, etc.
    In any case, I did some research on the Strawpoll, and their not using any hacks for the transparencies. Here’s a quote from the developer’s site:

    “The site only works in modern browsers that support transparent PNGs and Javascript (that means no IE6!).”

    Does anyone have ideas about the mismatched position of the footer from browser to browser? Please refer to original post, above.

    ok you completely missed my point on the zindex thing. and i never said that strawpoll used any sort of png fix. i said any png fix you make wont effect what youre doing, you should worry about that last.

    i can see my help isnt wanted, but ill give you a hint anyways;

    /* IE6 Fixed position fix */
html, body {
	height: 100%;
	overflow: auto;
	}

    removing overflow: auto; fixes it in my browser.

    ill go back to my first point, youve way over complicated it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Fixed Footer Image troubles’ is closed to new replies.

Tags