My web site is appearing fine in other browsers and hasn't been edited in months, but it suddenly appears with header elements in all the wrong places on FF.
The site in question is www.dctalktherapy.com. It appears fine in Safari; however, in Firefox, there is space between the navbar and the video, and the secondary navbar, which should be right next to the slideshow is justified all the way to the right. In short, there are several elements aligned improperly. The site is designed in Wordpress.
All Replies (6)
In the header area I see an image switcher that rotates between photos, with four buttons to the right. No gaps. Is that how it's supposed to look?
When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.
1. Bypass Firefox's Cache
Edit: On Mac, it's Command + Shift + r
Use Ctrl+Shift+r to reload the page fresh from the server. Any difference? If not...
2. Clear Firefox's Cache Completely
Edit: On Mac, it's Firefox > Preferences > Advanced
orange Firefox button or Tools menu > Options > Advanced
On the Network mini-tab > Cached Web Content : "Clear Now"
3. If needed, remove the site's cookies in this dialog
Edit: On Mac, you can use Tools > Page Info > Security > "View Cookies"
While viewing a page on the site, right-click and choose View Page Info > Security > "View Cookies"
Then try reloading the page. Does that help?
Okulungisiwe
No, it didn't help. Below are links to screen shots I just uploaded to my own site for your reference.
Here is what it should look like (this is a screen shot I took in Safari, although the background is white on the actual site):
http://www.cadigancreative.com/Safari.png
Here is what I am seeing on Firefox (another screenshot):
http://www.cadigancreative.com/Firefox.png
Thanks again.
Okulungisiwe
Sorry - those links didn't work b/c of an extra parentheses...here they are again:
I can get a similar display if I do the following:
- Change Zoom from the default full page zoom to Zoom Text Only
Not sure where this is on Mac, but try here:
View menu > Zoom > Zoom Text Only
- Zoom the page one step larger
That worked! Thanks so much :)
Most can be fixed by these two clearing rules:
div.headcontent, div.content { clear: both; }
The div.menu container can also use a clearing div and have its height removed.