This page doesn't load right but does with Edge. http://www.ign.com/
www.ign.com Won't load correctly with firefox but works just fine with microsoft edge. At one time firefox did not have this problem, top part is covered by the very top banner. Can you tell me why firefox now had this problem while edge works fine?
Solución elegida
I think it's the way your ad blocker removes not just the ad but the entire container element for the ad. That element has a rule to push it down below the header:
margin-top: 114px!important;
But the main body content doesn't have that so when the ad container is removed, it slides up behind the header. Not sure if there is a way to fix that with a setting in your ad blocker, or whether they will need to issue a fix.
In the meantime, if you visit this page a lot, you could consider creating a bookmarklet to hack the styling of the header. Here's how:
(1) Select and copy the following line of script:
javascript:void(document.querySelector('header#ign-header').style.position = 'static');
(2) Right-click a convenient place on your Bookmarks Toolbar or Bookmarks Menu and choose New Bookmark
(3) Click in the empty box next to Location and paste the script
(4) Assign a relevant name like IGNfix
(5) Click the Add Bookmark button
To test it out, after loading the page, click the button. The content should appear below the header.
If you want to automate this, either a styling extension (e.g., Stylus, Stylish) or a userscript extension (e.g., Greasemonkey, Tampermonkey) could be used.
Leer esta respuesta en su contexto 👍 1Todas las respuestas (4)
brianappj said
At one time firefox did not have this problem, top part is covered by the very top banner.
I'm not quite sure what you mean. The site has a fat header when you're at the top of the page, and when you scroll down, it changes to a thin header. Actually, this support site follows the same pattern. Is that not working as intended or is the problem something else?
Maybe a screenshot would help explain it. This article has tips on capturing the screen to an image: How do I create a screenshot of my problem? Please cut out or blur any sensitive information in the image before attaching the file to a reply.
And of course "the usual":
If a site is generally known to work in Firefox, these are general suggestions to try when it stops working:
Cache and Cookies: 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) Clear Firefox's Cache
See: How to clear the Firefox cache
If you have a large hard drive, this might take a few minutes. If you do not see the number going down on the page, you can reload it using Ctrl+r to check progress.
(2) Remove the site's cookies (save any pending work first). While viewing a page on the site, try either:
- right-click (on Mac Ctrl+click) a blank area of the page and choose View Page Info > Security > "View Cookies"
- (menu bar) Tools > Page Info > Security > "View Cookies"
- click the padlock or "i" icon in the address bar, then the ">" button, then More Information, and finally the "View Cookies" button
In the dialog that opens, the current site should be pre-filled in the search box at the top of the dialog so you can remove that site's cookies individually.
Then try reloading the page. Does that help?
Testing in Firefox's Safe Mode: In Safe Mode, Firefox temporarily deactivates extensions, hardware acceleration, and some other advanced features to help you assess whether these are causing the problem.
If Firefox is not running: Hold down the Shift key when starting Firefox.
If Firefox is running: You can restart Firefox in Safe Mode using either:
- "3-bar" menu button > "?" button > Restart with Add-ons Disabled
- Help menu > Restart with Add-ons Disabled
and OK the restart.
Both scenarios: A small dialog should appear. Click "Start in Safe Mode" (not Refresh).
Any improvement? (More info: Diagnose Firefox issues using Troubleshoot Mode)
Here is a screen shot of FF and edge. You will see the head in the picture and the navigation buttons are cutoff in firefox. In edge you can see the page with nothing blocking the picture or nav buttons. Scrolling the page up and down in firefox makes no difference in this. Firefox used to display this page properly. Something changed in FF or the page a few weeks ago and now firefox has a problem with it.
The edge page looks a little mess up right to left but that is a problem with paint only. The page is fine.
Solución elegida
I think it's the way your ad blocker removes not just the ad but the entire container element for the ad. That element has a rule to push it down below the header:
margin-top: 114px!important;
But the main body content doesn't have that so when the ad container is removed, it slides up behind the header. Not sure if there is a way to fix that with a setting in your ad blocker, or whether they will need to issue a fix.
In the meantime, if you visit this page a lot, you could consider creating a bookmarklet to hack the styling of the header. Here's how:
(1) Select and copy the following line of script:
javascript:void(document.querySelector('header#ign-header').style.position = 'static');
(2) Right-click a convenient place on your Bookmarks Toolbar or Bookmarks Menu and choose New Bookmark
(3) Click in the empty box next to Location and paste the script
(4) Assign a relevant name like IGNfix
(5) Click the Add Bookmark button
To test it out, after loading the page, click the button. The content should appear below the header.
If you want to automate this, either a styling extension (e.g., Stylus, Stylish) or a userscript extension (e.g., Greasemonkey, Tampermonkey) could be used.
That is it and the fix works. I doubt they will reformat their page to be ad blocker friendly but this works. I use the Avira pop up/ad blocker in firefox. I don't know who changed what but if they knew it would mess with ad blockers I don't think they would bother to take it out.
I don't know what Edge is doing but it is also blocking the same ads without the problem.