Facebook Tab App - Scrolling and position issues in IE8
I'm building an app for a Facebook page. It works well on all browsers other than IE.
It has two issues. Firstly, the positioning is all off. In the other browsers, the 'genre', 'artist' and 'details' divs are all level straight under the header image. In IE the 'details' div is raised by about 20 pixels.
Secondly, the main div (the ones demarked by day, #friday, #saturday, #sunday) won't scroll all the way to the bottom. It stops about 120 pixels before it should. Very strange indeed.
I've attached the code, but unfortunately it renders differently in the app when compared to on the page (in regard to the positioning of elements). Again, I'm unsure as to why this is.
I'm a real beginner, so I'm sorry if some of these questions are unclear or, just as bad, blindingly obvious!
Here's the code: https://gist.github.com/5ea583adcbc4eef7558b
I assume you are looking at your tab in 'preview mode', and suspect that the bar Facebook sticks at the top of your tab (the one saying "Preview Mode is On. Only admins can see the content of this tab.") is screwing up your position: absolute layout.
I suggest you rearrange your code so that the #fridaylistings, #saturdaylistings and #sundaylistings div are inside their respective #friday, #saturday and #sunday divs.
Then set position: relative on the #friday etc divs. This will allow you to control the position of each one's children relative to itself rather than the whole page. See here for an explanation of this: