Make these websites usable again please
March 16, 2013 1:28 PM   Subscribe

Lots of websites have headers/footers that block text below them, but when you hit page down, they act as if the entire page was visible and go too far. The headers are often blog headers, the footers are often "share this" kind of footers. How do I make PageUp/PageDown work properly? This is a problem for both Firefox and Chrome, but I use Firefox mostly, in Windows.

One sample blog that has the header AND the footer problem is this one, but there are many, many more. News sites often have this problem too, though of course I cannot think of any offhand.
posted by jeather to Computers & Internet (11 answers total) 4 users marked this as a favorite
If I interpret your question correctly, the issue is usually that those bits have their css set to "position: fixed." It does pretty much exactly what it sounds like it would do- keeps them fixed no matter how you scroll the page.

You could use a custom css add-on to take away that property, but the results might be funky.

Honestly, I just cut out all the cruft and use something like Readability when reading blogs and such.
posted by drjimmy11 at 2:34 PM on March 16, 2013 [1 favorite]

readability Firefox add on.
posted by Lanark at 2:37 PM on March 16, 2013

I just locate and block the offending elements with adBlock. Then they don't appear anymore.
posted by procrastination at 2:59 PM on March 16, 2013 [2 favorites]

Response by poster: Readability won't fix a home page for me, only article by article, so it's not useful.

I can't figure out how to block specific CSS elements on one specific page at a time -- it's not an image that's the problem, which is what AdBlock does.

I'd actually prefer not to have to hide the header, where actual content lives -- the footers are fine -- if there is some way that scrolling could work instead.
posted by jeather at 4:37 PM on March 16, 2013

I guess I'm not entirely understanding the problem. I build sites that sometimes have fixed headers and footers (usually with menus on them, much like Twitter's fixed top bar); my understanding was that people could just scroll up or down with a scroll wheel or the arrow keys to again see the content that slides behind the header or footer. Doing that works on the site you linked in Firefox on my end. (I'm on a Mac, though, and I don't have Page Up and Page Down buttons on my keyboard—maybe there's some nuance I'm missing?)

Could you clarify what you don't like about the content sliding underneath that type of header or footer, so I could better understand how to recommend a solution?
posted by limeonaire at 5:57 PM on March 16, 2013

The problem is if you scroll a page at a time (either by setting your mouse wheel that way or with page up page down buttons) a single wheel click or button press obscures text equal to the height of the header/footer bar. Then you need to either grab the thumb or use your arrow keys to read those sentences. It's annoying as single mosquito buzzing around when you are trying to get to sleep. I pretty much just close sites that use this broken navigation method.
posted by Mitheral at 6:17 PM on March 16, 2013 [1 favorite]

Response by poster: Limeonaire, what Mitheral said is exactly it. PageUp/PageDown scroll one screen height at a time, but the header/footer obscure part of that, so my scrolling goes too far. Arrows go line by line, which is a huge pain on a large screen with text in a small font.

Apparently you can recreate the functionality of PageUp/PageDown with fn+up/fn+down on a Mac.

More and more sites are using this stupid method, at least by having footer bars that are several lines high at the bottom.
posted by jeather at 6:35 PM on March 16, 2013 [1 favorite]

Best answer: AdBlock Plus can get rid of these, it's not just for images. It can be a bit unobvious and tricky until you get used to it.

Check the AdBlock menu for 'Select an element to hide', on mine there's a shortcut 'Ctrl+Shift+F3'. Either way, activate that and move your mouse around the page. You should see a red box outline that goes around different things as you move the mouse around. Finagle the selection until the box is around one of the annoying top sections and click. You'll get a dialog, tell it to block it and presto, no annoying top section. I had to do this twice on the page you gave because there didn't seem to be a container around both the blue bar thing and the masthead. Once you block both of those life is good.
posted by zengargoyle at 6:46 PM on March 16, 2013 [2 favorites]

There was a recently fixed Firefox bug for this problem. It looks like the fix made it in for Firefox 17, so it should at least fix this problem for some sites. Doesn't look like it fixes the one in your question, though. Maybe you could comment in that thread with your example.
posted by zsazsa at 10:12 PM on March 16, 2013

fwiw this bugs me to no end too. I'm interested to see they're trying to address it in ff.
posted by jepler at 10:54 AM on March 17, 2013

Response by poster: Ctrl-Shift+F3 is a reasonably adequate solution. It's great for the footer, which is always useless, and though it removes the actual useful navigation in the header, it's . . . good enough, and less annoying than the stupid fixed headers.

I'd support addressing it by preventing people who create webpages that have this problem from ever going online again, but that seems unlikely.
posted by jeather at 7:35 AM on March 18, 2013

« Older What to do with 2 smallish pieces of pork belly?   |   Handling accusations of long-past misbehavior?... Newer »
This thread is closed to new comments.