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

Answers


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:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/


Need Your Help

GMAIL: This message has been modified to fit your screen. Tap here to show original

html email gmail html-email

I made fixed email template. But When I trying to test it on mobile devices in gmail (and it is happening only in gmail) it is break my layout (looks like it make my layout to fit device width like...

Thymeleaf registration page - Error during execution of processor 'org.thymeleaf.spring4.processor.attr.SpringInputGeneralFieldAttrProcessor'

spring forms spring-boot thymeleaf user-registration

I'm making a registration page for a website. I understand that in order for a new User to be created, an id is required, so we have the field: