So I’ve been building a layout and up until now I hadn’t tested it on any non-webkit browsers.
But now that i’ve tested it on ie8 and firefox I’ve found some issues that I would like to address.
The site:
First of all, Internet Explorer 8.
Regardless of any compatibility mode or turning off javascript I am still getting all of these issues.
- Elements positioned in the header are completely off.
- The text ‘ For effortless hearing…’ and the number should be inline and floated to the right.
- The
<ul class="head">just doesn’t show at all. - Neither does
<ul class="mainmenu"> - A few other css styles just do not happen
Firefox
- I’ve built a layout where after scrolling through
<div id="maincontentbody">the header element scrolls out of view and<div id="footerblock">scrolls into view. But in firefox it just gets stuck when you scroll to 100% of the screen height.
UPDATE
– Another way to solve the firefox issue is via jquery/js, if I could know when the user has scrolled to the end of 100% of the page and then run some kind of function which would switch scrolling from maincontentbody to body but I am pretty confused as how I can do this, I’m having trouble catching the user once they’ve reached 100%, innerHeight isn’t giving me the correct results.
I am absolutely lost as to how to correct these issues and any help would be appreciated.
I’d start off with importing a normalize.css to set all default browser styles to something that is the same across all browsers.