views:

38

answers:

2

This is a follow-on question from this thread: http://stackoverflow.com/questions/2460364/css-semi-fixed-element

I implemented kelso's solution and it works perfectly on Firefox and Chrome. However, IE 8 is not playing ball.

I have rolled the code out so that you can see the problem I am having on a live website: Gran Via hotels

IE is listening for scroll events but is not moving the div as the user scrolls down the page. It seems as though the following line is not doing anything in IE:

d.css({ position: "fixed", top: "0px"   });

The first line is also evaluating to -2 in IE whereas in Firefox it's 377.

var scrollerTopMargin = $("#scroll-container").offset().top;

I am no CSS expert and have been pulling my hair out on this. There must be a simple solution! Please help!

Thanks Ben

A: 

Hello,

IE does not like your doctype and is running with quirks mode activated. this is why it does not work.

Try this one and see if it works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
Alin Purcaru
Thanks Alin, changing to that doctype works but validator.w3.org reports 402 page errors (page currently has two errors). 4.01 strict only gives 15 errors so going to go with that:
Ben
Thanks Alin, changing to that doctype works but validator.w3.org reports 402 errors (transitional HTML has 2 errors). Using 4.01 strict only gives 15 errors. When scrolling down page the div moves fine but when I scroll back to top of page the div covers the header because the "var scrollerTopMargin = $("#scroll-container").offset().top;" line is returning -2... any ideas?
Ben
No :). Start debugging.
Alin Purcaru
A: 

To run IE8 in standard mode you need to choose a strict doctype, not a a transitional one

http://en.wikipedia.org/wiki/Quirks_mode

Fabrizio Calderan