Hi folks,
Can anyone spot what is causing this website to appear broken in Firefox only? if you resize the browser window and then open the browser window to full screen again it appears to resolve the issue but after a refresh it is back again.
Firefox is creating a huge white space below the header…
Any assistance would be much appreciated, many thanks!
Hi shaneboard, welcome to the forum.
I don’t know how to fix it, but I know what the cause is.
The “white gap” corresponds to the area the slide images take when CSS and JavaScript are off.
eg. (pseudo only)
<div>
<img height="300px">
<img height="300px">
<img height="300px">
</div>
The browser “reserves” 900 pixels height which later is meant to be handled by the slider.
For some reason the page isn’t getting repainted all the time.
shaneboard,
I don’t see a huge white space below the header. Instead I see a huge white space at the top of section#boxes at widths of 1200px and wider when the page is refreshed. At widths of 1199px and narrower the space does not appear. I believe JS is being used to control the layout within #boxes. The huge space does not happen if JS is disabled.
I see the same as @ronpat, and likewise, disabling JS removed the white space.
Hi,
I believe its the media queries script causing a problem somewhere so I would suggest just giving the media query script to ie8 as that is the only browser that needs it.
e.g. Add conditional comments around it.
<!--[if lt IE 9]>
<script type="text/javascript" src="http://poole-printmakers.org.uk/templates/ppm/js/css3-mediaqueries.js"></script>
<![endif]-->
See if that makes a difference?
Thank you all for the replies guys.
The last reply finally resolved the issue so a big thanks PaulOB, I have used the same media query JS file for a while and didn’t even think that most browsers don’t actually need it now.
Thanks again everyone 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.