Website won't load correctly on Firefox
HI Can someone help please.. ! This website displays fine with other browsers and on mobiles etc.. but wont work with Firefox. including Fonts, Margins and Gradient. I have used at font Face and also google web fonts.. and neither will display. Sample images below. You can see the actual website in progress here: http://infinitycontracting.com.au/infinityTests/index.html
Thanks.
All Replies (5)
Type about:preferences#content<enter> in the address bar. Across from fonts and colors, press the Advanced button. On the bottom, turn on Allow Web Sites To Choose Their Own.
You can check for corrupted and duplicate fonts and other font issues: http://www.thexlab.com/faqs/multipleappsquit.html - Font Book 2.0 Help: Checking for damaged fonts http://www.creativetechs.com/iq/garbled_fonts_troubleshooting_guide.html
I'm seeing the Open Sans (Bold) font for the menu bar.
You can reload web page(s) and bypass the cache to refresh possibly outdated or corrupted files.
- Hold down the Shift key and left-click the Reload button
- Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
- Press "Command + Shift + R" (Mac)
Did you check the Web Console (Firefox/Tools > Web Developer) for error messages?
You can right-click and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer) with this element selected. You can check the font used for selected text in the Font tab in the right pane of the Inspector.
Thanks for your reply.. but even without any font chosen the formatting for this page isn't working.. the margins.. you can see the 2 screenshots to see how it's meant to look. Anyone have any other ideas..? Could it be the CSS for the menu bar messing with the rest of the page perhaps..? It works on Chrome - just firefox is not working..
Other than the fact that the top of the page is English, and the bottom isn't, I can see no problem except for those lines on the page.
I notice a stray quote in background-image: url(images/background.jpg'); This cause the gradient not to get displayed. Firefox is always very sensitive to such small typos and that makes Firefox a good browser to test CSS code. Other browser may be more forgiving and ignore them.
/*for small screens fullscreen image */
@media only screen and (min-width: 48em) {
.page-bg {
position: fixed;
top: 0;
right: 0;
left: 0;
height: 1707px;
background-image: url(images/background.jpg);
background-position: 50% 0;
background-repeat: no-repeat;
z-index: -1;
}
}