One of My Web Pages Shows a Funny Font and Corrects When I Refresh
Firefox incorrectly displays webpage on browser refresh
When I go to my website www.dylandavenport.com it displays incorrectly. The navigation items in the header section as well as any text is shoved up to the top of the view port and cannot be seen. It will display properly once in a while but if I refresh the page or exit the browser the navigation items and text move to the top. I have cleared the browser cache and stored data and no luck. I have inspected my code in the dev tools and viewed the source code for the style.css file and everything looks ok. When I inspect the css file it will sometimes show a 304 error. I'm assuming this is because that data has already been cahced but I am unsure... I need this resolved as quickly as possible it's driving me crazy haha. Thanks for your help! I have attached links to 2 images (this help page will not upload my images -_-), one showing how the content should be laid out and one that shows what happens when I refresh the browser.
Image 1: [Correct Display] (https://drive.google.com/file/d/1d4qfp0bXJOP6M2Wcq22f7T9myTjYmv4w/view?usp=sharing)
Image 2: [Incorrect Display] (https://drive.google.com/file/d/1NVc_SX8qPOzi8d9GCp1FLcYJ9eZ3LQUz/view?usp=sharing)
When I go to my website www.dylandavenport.com it displays incorrectly. The navigation items in the header section as well as any text is shoved up to the top of the view port and cannot be seen. It will display properly once in a while but if I refresh the page or exit the browser the navigation items and text move to the top. I have cleared the browser cache and stored data and no luck. I have inspected my code in the dev tools and viewed the source code for the style.css file and everything looks ok. When I inspect the css file it will sometimes show a 304 error. I'm assuming this is because that data has already been cahced but I am unsure... I need this resolved as quickly as possible it's driving me crazy haha. Thanks for your help! I have attached links to 2 images (this help page will not upload my images -_-), one showing how the content should be laid out and one that shows what happens when I refresh the browser. Image 1: [Correct Display] (https://drive.google.com/file/d/1d4qfp0bXJOP6M2Wcq22f7T9myTjYmv4w/view?usp=sharing) Image 2: [Incorrect Display] (https://drive.google.com/file/d/1NVc_SX8qPOzi8d9GCp1FLcYJ9eZ3LQUz/view?usp=sharing)
Chosen solution
I FIGURED IT OUT!! FINALLY!! What I did was I changed some of my CSS around and made the nav wrapper display: flex; and centered the content. I also assigned a height of 75% to the wrapper to ensure that it would be tall enough to hold the content but not be tall enough to allow the nav items to move any higher up the page. Thanks for all your help everyone. I really appreciate all the help figuring this out. It was quite the puzzle haha. But that's what makes it fun!
Read this answer in context 👍 0
All Replies (11)
Many site issues can be caused by corrupt cookies or cache.
- Clear the Cache and
- Remove Cookies
Warning ! ! This will log you out of sites you're logged in to. You may also lose any settings for that website.
Type about:preferences<enter> in the address bar.
- Cookies; Select Privacy. Under History, select
Firefox will Use Custom Settings. Press the button on the right side called Show Cookies. Use the search bar to look for the site. Note; There may be more than one entry. Remove All of them.
- Cache; Select Advanced > Network.
[v57+] Select Privacy. Across from Cached Web Content, Press Clear Now.
If there is still a problem, Start Firefox in Safe Mode https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode
A small dialog should appear. Click Start In Safe Mode (not Refresh). Did this help?
While you are in safe mode;
Try disabling graphics hardware acceleration in Firefox. Since this feature was added to Firefox it has gradually improved but there are still a few glitches.
How to disable Hardware Acceleration {web link}
Many site issues can be caused by corrupt cookies or cache. * Clear the Cache and * Remove Cookies '''Warning ! ! ''' This will log you out of sites you're logged in to. You may also lose any settings for that website. Type '''about:preferences'''<enter> in the address bar. * '''Cookies; ''' Select '''Privacy. ''' Under '''History, ''' select Firefox will '''Use Custom Settings. ''' Press the button on the right side called '''Show Cookies. ''' Use the search bar to look for the site. Note; There may be more than one entry. Remove '''All''' of them. * '''Cache; ''' Select '''Advanced > Network. ''' [v57+] Select '''Privacy. ''' Across from '''Cached Web Content, ''' Press '''Clear Now. ''' If there is still a problem, '''Start Firefox in Safe Mode''' https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode A small dialog should appear. Click '''Start In Safe Mode''' (not Refresh). Did this help? While you are in safe mode; Try disabling graphics hardware acceleration in Firefox. Since this feature was added to Firefox it has gradually improved but there are still a few glitches. ''[https://support.mozilla.org/en-US/kb/forum-response-disable-hardware-acceleration How to disable Hardware Acceleration]'' {web link}
I had already tried clearing my browser cache earlier with no luck. I tried the suggested solutions and still had the same problem. I'm not sure if it is a compatibility issue with my code? My site displays fine in Chrome but not in Fire Fox.
I had already tried clearing my browser cache earlier with no luck. I tried the suggested solutions and still had the same problem. I'm not sure if it is a compatibility issue with my code? My site displays fine in Chrome but not in Fire Fox.
Try fixing the CSS Error and see what happens. https://validator.w3.org/ HTML = 0 errors https://jigsaw.w3.org/css-validator/ CSS Error = 1 https://jigsaw.w3.org/css-validator/validator?uri=+www.dylandavenport.com&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en Please let us know if this solved your issue or if need further assistance.
I can see this as well. It could be a problem with @media rules because when I resize the width then the menu shifts into the correct position. I do notice other issues when I make the window so small that the menu is hidden and a Menu text appears. When I click this button then nothing happens because no JavaScript seems to be present.
- ReferenceError: showMenu is not defined
If I use the Inspector and the Style editor to test the @media rules then it works properly. It is only the initial load. On older browsers there there is no menu at all. Really bad things happen if I zoom the page in or out and then reset the zoom. The Down arrow also doesn't have an event handler attached, only <a href="#">
Are you still in the design stage?
Maybe ask advice at the Stack Overflow forum site.
- http://stackoverflow.com/questions/
- https://support.mozilla.org/en-US/kb/where-go-developer-support
I can see this as well. It could be a problem with @media rules because when I resize the width then the menu shifts into the correct position. I do notice other issues when I make the window so small that the menu is hidden and a Menu text appears. When I click this button then nothing happens because no JavaScript seems to be present. * ReferenceError: showMenu is not defined If I use the Inspector and the Style editor to test the @media rules then it works properly. It is only the initial load. On older browsers there there is no menu at all. Really bad things happen if I zoom the page in or out and then reset the zoom. The Down arrow also doesn't have an event handler attached, only <a href="#"> Are you still in the design stage? Maybe ask advice at the Stack Overflow forum site. *http://stackoverflow.com/questions/ *https://support.mozilla.org/en-US/kb/where-go-developer-support
Thanks for the help everybody. @Pkshadow, so the validator shows the errors are being caused by an auto prefixer in Sublime Text 3. I looked online and found that validators view prefixes are "incorrect" code because it is proprietary and isn't standard CSS. @cor-el, yeah I'm still working on the layout. I didn't want to move on to the Javascript and such until this issue is resolved. I assumed it was an issue with the media queries but wasn't sure because in other browsers it shows up fine (Unless I hit refresh, then the nav items shoot to the top. Then if I resize the browser and then maximize it the layout goes back to normal???) I'll look into all of these suggestions and get back to you guys. Thanks a bunch!
Thanks for the help everybody. @Pkshadow, so the validator shows the errors are being caused by an auto prefixer in Sublime Text 3. I looked online and found that validators view prefixes are "incorrect" code because it is proprietary and isn't standard CSS. @cor-el, yeah I'm still working on the layout. I didn't want to move on to the Javascript and such until this issue is resolved. I assumed it was an issue with the media queries but wasn't sure because in other browsers it shows up fine (Unless I hit refresh, then the nav items shoot to the top. Then if I resize the browser and then maximize it the layout goes back to normal???) I'll look into all of these suggestions and get back to you guys. Thanks a bunch!
Modified by DRD161
Still no luck everyone. I have tried css resets I have tried normalize.css and still the same issue. The page will initially load fine with the exception of the down arrow being lower than it is in Chrome (the padding is way off) and the text at the bottom that is right above the footer is closer together (Also seems to be a padding issue...) Once the page loads if I move the browser window at all whether refreshing or making the windows smaller the problem appears! I'm new to web development so this is really confusing. I've added browser prefixes and everything I can think of to ensure that different browsers render the page GENERALLY the same. Creating different style sheets for different browser is not ideal but I can't figure this out :(
Still no luck everyone. I have tried css resets I have tried normalize.css and still the same issue. The page will initially load fine with the exception of the down arrow being lower than it is in Chrome (the padding is way off) and the text at the bottom that is right above the footer is closer together (Also seems to be a padding issue...) Once the page loads if I move the browser window at all whether refreshing or making the windows smaller the problem appears! I'm new to web development so this is really confusing. I've added browser prefixes and everything I can think of to ensure that different browsers render the page GENERALLY the same. Creating different style sheets for different browser is not ideal but I can't figure this out :(
The ul.nav-items element has align-self: center.
My guess is that Firefox computes the vertical position of ul.nav-items when the height of the header element is zero -- it's definitely before the image loads -- and that's why the ul is vertically centered around the top of the page.
Does it help to assign a determinate height to the header element?
The ul.nav-items element has align-self: center. My guess is that Firefox computes the vertical position of ul.nav-items when the height of the header element is zero -- it's definitely before the image loads -- and that's why the ul is vertically centered around the top of the page. Does it help to assign a determinate height to the header element?
@jscher2000 Sadly setting a height for the header didn't help :( The page loads fine ...then if I do ANYTHING, (move the browser window, resize it, refresh it) it goes crazy. For instance, it'll load, I hit refresh, the nav content shoots to the top, the arrow disappears. Then I move the browser window around, the layout goes back to how it's supposed to be, BUT the down arrow moves up like an inch but stays inline vertically where it's supposed to be. Then I reduce the size of the browser window (using the top button in the right hand corner. Or the left if your on Mac...I think) then the layout displays the way it should and all is well in the universe. Phew I've never felt like I was being too detailed, I just gotta figure this out.
@jscher2000 Sadly setting a height for the header didn't help :( The page loads fine ...then if I do ANYTHING, (move the browser window, resize it, refresh it) it goes crazy. For instance, it'll load, I hit refresh, the nav content shoots to the top, the arrow disappears. Then I move the browser window around, the layout goes back to how it's supposed to be, BUT the down arrow moves up like an inch but stays inline vertically where it's supposed to be. Then I reduce the size of the browser window (using the top button in the right hand corner. Or the left if your on Mac...I think) then the layout displays the way it should and all is well in the universe. Phew I've never felt like I was being too detailed, I just gotta figure this out.
Modified by DRD161
What's puzzling is, if I use Save Page As and use the Complete format, then open the page locally, I can reload all I like without any problem. ??
Edit: It's not as consistent as I thought. Still glitchy.
What's puzzling is, if I use Save Page As and use the Complete format, then open the page locally, I can reload all I like without any problem. ?? '''Edit:''' It's not as consistent as I thought. Still glitchy.
Modified by jscher2000 - Support Volunteer
Yeah I can't figure out where the actual problem is. At first I though it was an issue due with a media query break point but I feel as though if that were the case the page would respond the same way across other browsers. I've also tried to open the page on multiple devices (2 different laptops, and 2 different desktops) and the issue is the same ONLY in FF. Even a css reset or css normalize didn't help any. The only other thing I can think of trying is to comment out each break point one by one and see if one of them is badly written (which is very possible since I'm new to web development) or just create a separate style sheet for the FF browser. I don't really want to do the latter due to the fact that it will add extra load time that in most cases is unnecessary.
Yeah I can't figure out where the actual problem is. At first I though it was an issue due with a media query break point but I feel as though if that were the case the page would respond the same way across other browsers. I've also tried to open the page on multiple devices (2 different laptops, and 2 different desktops) and the issue is the same ONLY in FF. Even a css reset or css normalize didn't help any. The only other thing I can think of trying is to comment out each break point one by one and see if one of them is badly written (which is very possible since I'm new to web development) or just create a separate style sheet for the FF browser. I don't really want to do the latter due to the fact that it will add extra load time that in most cases is unnecessary.
Chosen Solution
I FIGURED IT OUT!! FINALLY!! What I did was I changed some of my CSS around and made the nav wrapper display: flex; and centered the content. I also assigned a height of 75% to the wrapper to ensure that it would be tall enough to hold the content but not be tall enough to allow the nav items to move any higher up the page. Thanks for all your help everyone. I really appreciate all the help figuring this out. It was quite the puzzle haha. But that's what makes it fun!
I FIGURED IT OUT!! FINALLY!! What I did was I changed some of my CSS around and made the nav wrapper display: flex; and centered the content. I also assigned a height of 75% to the wrapper to ensure that it would be tall enough to hold the content but not be tall enough to allow the nav items to move any higher up the page. Thanks for all your help everyone. I really appreciate all the help figuring this out. It was quite the puzzle haha. But that's what makes it fun!
Source: https://support.mozilla.org/en-US/questions/1198575
0 Response to "One of My Web Pages Shows a Funny Font and Corrects When I Refresh"
Post a Comment