
My web site suddenly looks crazy, but only in Firefox.
I'm developing a site for a client, and suddenly (only in Firefox) things are out of alignment, color backgrounds are missing, and it generally looks crazy. It's fine in Safari and Chrome. This happened suddenly today (5/3). I tried restarting, resetting, and none of that helps. I also upgraded to the latest version, and that doesn't help either. What on earth is going on?
All Replies (11)
Hi, I would recommend going to the Mozilla developer network. This is the place to learn about thing you need to know when developing websites, HTML5 apps, etcetera. All of the major browsers have something like it. That's because you can't always make a site that validates and have it work on all browsers. They all have things that have to be done one way for one thing to have it work. The developer networks let you know about things like that. What may of caused it in this now version is Firefox changed rendering engines which means new things to deal with. All of the browsers are like that. You will find that out if you keep developing. Mozilla Developer Network Mozilla Developer Network Microsoft Developer Network Microsoft Developer Network
Thanks for taking the time to reply. I've been working on this site for quite some time, and it has always displayed correctly in FF, Chrome, and Safari (on Mac). Never had a problem with FF until today. I think it happened when the site started updating to the new version. So yes, I think that probably had something to do with it, but it's not just a few fonts not rendering correctly. Things are out of place and jumbled all over the screen. It's a real mess now. I will go to the developer's forum, thank you.
Make sure that you haven't enabled a High Contrast theme in the Windows/Mac Accessibility settings.
Make sure that you allow pages to choose their own colors.
- Firefox > Preferences > Content : Fonts & Colors > Colors : [X] "Allow pages to choose their own colors, instead of my selections above"
Note that these settings affect background images.
See also:
Thank you, cor-el, for your reply. I checked the above, and it isn't any of these. Also, my husband checked on his computer, and it also displays wrong on his.
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?
Did you check the Net log or the Network tab in the Web Console (Firefox/Tools > Web Developer) for errors?
Yes, here it is: http://192.185.83.158/~artsmali/what-we-believe/
The title is running up into the menu (should be 70px below menu), the background color and images for all three text widgets are missing, and the width of widgets is wrong. I just can't understand why this update would do this much damage to my site, when it is displaying perfectly on both Chrome and Safari and was displaying perfectly on FF this morning! It was when the update began that the problems started.
Background color from other pages is missing, and fonts are the wrong color, size, and placement, as well.
I looked through the list of CSS changes in FF 29, and I didn't see anything that should have affected it like this. I am really stumped, and if I can't get this fixed, I dont' know what I'm going to do. This is months of really hard work, a completely customized site built from a bare-bones developer theme.
Looks like an issue with the margin-top: -70px; rule that causes the header to get moved up in Firefox
- http://192.185.83.158/~artsmali/wp-content/themes/thematic-child/style.css?ver=3.9
#post-51 h1.entry-title {margin-top: -70px; margin-bottom: 20px; !important}
You can test this by right-clicking the header to open the Inspector and remove the checkmark on this rule.
Yes, cor-el, changing that margin in CSS will move that heading down. Thanks. Still trying to wrap my mind around the gobbledygook that the site shows as in FF 29.
Do you have access to an older Windows PC that is running WinXP and IE8.0?
The fault with What We Believe getting partially covered is identical in IE8.0 as it is in Firefox 28 and 29.
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)
Thank you all so much for your help. I feel very silly now, because the problem was one extra quotation mark in the CSS, which made the entire site go wonky, but only in FF. I will also check IE8, as the-edmeister suggested. Guess FF just doesn't handle CSS errors as well as the other browsers.