Guide by: Nathan Payne

 

Have you noticed that when you create a web page that is small than the window firefox wont display scroll bars? well, that has caused alot of problems, because when you change pages from, let's say the home page to contacts page the scroll bars may come up and knock the full layout off.

 

I have noticed this a few time and by adding a simple few lines to your CSS this will be solved.

 

 

before creating the layout put this in the CSS

 

 

CODE

/*Forces scroll bar on in firefox*/
html
{
height:100%;
margin-bottom: 1px;
}

 

It forces the scroll bars on therefore the layout will not change from one page to another

Why would you want to do this? Having scroll bars on a page that doesn't need them is going against the default behaviour for many browsers, and is counter intuitive for the user experience, as well.

I don't understand why you'd want to do this either. My site goes from pages that scroll to pages that don't and I get a bit of a shift left and right, but it doesn't amke me want to force the browser to have a scroll bar on pages that don't need it. Why bother...that's my question!

It does actually bother some folks, I've seen the question asked a lot in various forums- they've gotta have stuff working like IE!!!

 

Useful post though Ben, another one to link to rather than typing out an explaination!

I'm sure that it is the 'web developers' that it bothers, and not the actual users. I've never come across someone who has been bothered, or even noticed, the miniscule change in width when the scroll bar kicks in.

 

I'm actually fairly certain that forcing scroll bars in this way, will bother people more than the original issue. I can see people wondering why there is an active scroll bar on the side, but no where to scroll too. It might make some novices believe that there is a problem with their browsers. I had to do website support in my previous job, and you'd be surprised!

I'm sure that it is the 'web developers' that it bothers, and not the actual users. I've never come across someone who has been bothered, or even noticed, the miniscule change in width when the scroll bar kicks in.

 

I'm actually fairly certain that forcing scroll bars in this way, will bother people more than the original issue. I can see people wondering why there is an active scroll bar on the side, but no where to scroll too. It might make some novices believe that there is a problem with their browsers. I had to do website support in my previous job, and you'd be surprised!

 

I've always had the feeling it's more the "amateur" types that tend to ask about it.

 

I bet you have a whole list of "idiot" questions from your support days - care to share a few?

People disabling / not knowing about cookies was probably the main issue: "Help, your website is broken, it won't remember me if I login!!!"

 

If I had a pound for every time I had to walk people through how to enable them....

 

The other classic was when someone would ring up, and state that he/she can't login, and thus our website is crap. When I asked them if they are entering their password correctly, they ensure me that they are, so I ask them to do it one more time, and what do you know, it works! They then proceed to make a list of excuses: "What did you fix?", "Oh, it must have changed!", *insert anything that isn't their fault, here*

 

It taught me a lot though, you have to treat your visitors as 'stupid'. If you make your website as simple to use/understand as possible, people appreciate it. Not all designers/developers (the "amateurs") realise this, and they make their websites function how a web developer / techy person would use it, not how the general public would.

ha, know what you mean by the login ones - mine were more often than not people forgetting their logins which needed a reset from us (it was a closed Unix/Oracle network with specialist apps).

 

The favourite one was "my mouse isn't working - I move it but the cursor won't move" - we used to have a laugh with this one telling them it was a faulty mousemat, and advising them to try a different one. On occasions this used to work for a while but a couple of days later they'd ring back "I've tried three mousemats and they're all faulty - but I can't understand it becasue it works on other computers" - we'd then send them out a new mat... eventually we'd let on that their mouse ball was covered in bumfluff and they'd have to clean it out

 

On the other side of the coin for normal PC stuff we had to rely on the PC helpdesk monkies. Our iT dept set up an intranet where we could access certain specific info that was relevent to our work but it needed the Flash plugin so we could see the pretty graphs etc. As the companies PC's were locked down we couldn't download/install ourselves so it was a support request to PC support...

 

Me: Hi I need the flash plugin installed on my PC

Helpdesk: What's your job role?

Me: Systems Manager at dah dah dah

Helpdesk: Sorry, Macromedia Flash is not available for your job status

Me: No I don't need the full app, just the plugin so I can view stuff

Helpdesk: I don't have a Flash plugin listed... what is it?

Me: You just download from macromedia and install it

Helpdesk: Sorry it's not available

Me: All you do is visit www.macromedia.com and download it, the file is about 200k... [snip]

Helpdesk: Sorry macromedia flash is not....

Me: Can I speak to your manager please?

Helpdesk: I am the manager, sorry but....

 

So next time Dave the PC support tecchy is in the office, I tell him the problem... "f****n morons, I'll be round in 5 mins and install it for you".

 

Not all support staff are monkies but we had a lot of them!

Haha, sounds exactly like the IT dept at my place (we only did the websites, they did all the hardware/software). Nothing ever got done; one problem wasn't fixed in the 7 months I was there, and still hasn't been fixed! There was one dude that had his head screwed on, though, I tried my best to get all my requests forwarded to him.

 

I swear most IT techies have bugger all real experience with computers.

if you create a layout based totally on exact measures then firefox may break your layout if your page goes over the normal height.

 

I had to design a website for a uni project and this bugged me for a while as every thing moved out of place.

 

It makes no difference to a user if scroll bars are there, as IE forces scroll bars on every page.

Well, it does make a difference, because not everyone wants to use things 'because IE does it that way'. They will be used to the way Firefox works, and seeing it act differently will make them think something is wrong, or that there is something to scroll.

 

As for it breaking your layout, there are many ways of avoiding the issue. If you could show me the problem/code, then I'm sure I can show you how you can overcome it without resorting to browser hacks.

 

Rob

Well, it does make a difference, because not everyone wants to use things 'because IE does it that way'. They will be used to the way Firefox works, and seeing it act differently will make them think something is wrong, or that there is something to scroll.

 

As for it breaking your layout, there are many ways of avoiding the issue. If you could show me the problem/code, then I'm sure I can show you how you can overcome it without resorting to browser hacks.

 

Rob

 

yeah thats very true, I agree but at uni we have to make sure everything works in all browsers so I wasn't wanting to spend hours making IE look the same when I didnt get any more marks for either rewriting my code or doing something else. the dead line was tight so I experimented with heights lol...

 

When you use it the websites shows a scroll bar but it wont allow it to move example (thats my simple layout, the grade wasn't for the design it was for the coldfusion code behind the scene's got a B+ which is good considering lol).

Ok, I see the scroll bar stuff. So what happened when the scroll bars were left off? (what broke?)

thats just an example, I dont have the other site online. If i remember I will upload it on monday, its on the uni computer.

 

It was a design made purely with graphics and it was crap to say the least but when ever it switched to a page that needed a scroll bar then the graphics would move and then one would be on top of another etc all very annoying things to a student that needs things to work perfectly haha.

Sounds funky! I'm sure it was either a positioning problem, or the widths were mucked up somewhere. The scroll bars would only have shrunk the area of the website, not moved anything itself, it would be the same as resizing the browser window.

It was one of my first websites so didnt have a clue about widths and jazz. But the images fitted a browser window of an exact monitor resolution which I now know is very bad! but when the browser was moved or made smaller nothing broke but when the scroll bars activated then all hell broke loose...

 

I have seen a few people with a similar problem so I though i would make the tutorial a while back

I'm sure that it is the 'web developers' that it bothers, and not the actual users. I've never come across someone who has been bothered, or even noticed, the miniscule change in width when the scroll bar kicks in.

 

I'm actually fairly certain that forcing scroll bars in this way, will bother people more than the original issue. I can see people wondering why there is an active scroll bar on the side, but no where to scroll too. It might make some novices believe that there is a problem with their browsers. I had to do website support in my previous job, and you'd be surprised!

Yea, I agree with this. I'm generally in favour of not changing the native way browsers present UI controls. People who want Firefox to look and behave like IE are usually IE users.

 

And if a scrollbar throws off the layout, then how is different resolution going to do with it? It sounds like the side effect of a position problem.

Hi!

 

Scroll Bars are very useful for all!

Thanks!

Yea, I agree with this. I'm generally in favour of not changing the native way browsers present UI controls. People who want Firefox to look and behave like IE are usually IE users.

 

And if a scrollbar throws off the layout, then how is different resolution going to do with it? It sounds like the side effect of a position problem.

 

Im not an IE user, I use it for making sure things work. But it was a lecturer testing my site that noticed it, and it made a big difference, it meant the difference between a A or B lol...

I'm all in favour of this trick.

 

Essentially there's two comepting issues -

 

The user thinking the pages are poorly designed as the page jumps 5 pixels or so when changing page. I got feedback when testing from a number of users that this made them think the site was poorly built.

 

VERSUS

 

A minor, minor IMHO usability issue of 1 px being added to suggest in the most miniscule way possible that there is scrolling to take place.

 

Personally I'll add the 1px, fairly safe in the knowledge that the added scrollbar is not really an issue except in the minds of over dogmatic developers

 

Web design is a constant balance between aesthetics, usability, accessibility and content.

 

Some designers completely ignore anything but aesthetics.

 

Some developers ignore all but usability, code and accessibility.

 

Playing devils advocate....

 

This would suggest the designers ignoring anything apart from aesthetics don't understand accessibility and usability.

 

And the devlopers ignoring aesthetics don't understand visuals.

 

Being dogmatic and rigid isn't the best practice imo.

 

As a sidenote on this one.

 

One of my tutors last year is a complete CSS, XHTML, computer whizz - in fact I think he's even a Doctor of Computer Science. At the same time he adheres to the notion that the only things that count are accessibility, usability, not forcing browser behaviour etc. All very scientific.

 

I had quite a debate with him on this exact subject, he of course said 'why bother'.

 

My partner, god bless her, was a Graphics Designer for over 15 years, a good one too - winning international awards etc. Now she's the opposite and thinks people who'd let a page jump 5 pixels rather than have a 1 pixel scrollbar are just plain mad. Typical arty farty type

 

For me I see both sides, but repeated testing with users who weren't web savvy - design or development, showed me that the 5 pixel jump was an issue whereas the 1 px scrollbar wasn't. Many said 'why does the page keep jumping', none said 'whys this unnecessary scrollbar here'.

 

Anecdotal and hardly scientific eveidence, but it helps me justify my stance

I don't think you should be changing the way a browser works, simply because a few users are unhappy with it. It isn't up to you to force everyone else to have this 'unusual' experience. It isn't a minor issue, it's fairly major because you are taking control completely out of the hands of the user. I'm sure there will be an equal (or more) amount of users complaining about the fact that there is an active scroll bar appearing, but there is nothing to scroll to.

 

If anything, you should be educating the people in the user test why this behaviour is happening, in my opinion.

I don't think you should be changing the way a browser works, simply because a few users are unhappy with it. It isn't up to you to force everyone else to have this 'unusual' experience. It isn't a minor issue, it's fairly major because you are taking control completely out of the hands of the user. I'm sure there will be an equal (or more) amount of users complaining about the fact that there is an active scroll bar appearing, but there is nothing to scroll to.

 

If anything, you should be educating the people in the user test why this behaviour is happening, in my opinion.

 

But it is a *minor* issue, it's hardly taking control 'completely' out of the hands of the user is it? Really?

 

Adding a 1 pixel scroll, it'd take the user 0.00001 of a second to realise it goes nowhere.

 

With all respect this is where I think people take usability too far.

 

If it meant the scrollbar did the opposite i.e. scrolling down meant the page scrolled up then you'd have a more than valid point. But it's a minor thing we're talking here, most if not all users will not even try and scroll down the page as there is no space showing under the actual scroll block.

 

Personally I think a centred site/page that hops around when changing pages looks broken. As a designer I see it as my responsibility to resolve this.

 

If you were having a new kitchen fitted and the builders/designer left one cupboard and door say 8 inches (pro-rata probably less than 5 pixels) out from the others you'd say blimey that's broke.

 

If they then turned round and said actually it's like that as to follow the instructions on the box we couldn't actually align it with the other cupboards...what would you say?

Rules are made to be broken. When we break them we must try and understand why we are doing so, even justify it.

 

I think this is a perfect example of when breaking a rule, the gains outweight the losses.

its all down to personal opinion.

 

It doesn't effect anyone's web experience, not in a way that they think.. meh I'm not going on that site again!

I agree with Headcoat on this, I don't see how it effects usability and if it helps stop the design from shifting (should that be something that irritates you) then doing this to prevent it doesn't take anything away from the site at all.

 

 

Also not to be bitter or anything but when did Nathan publish this as it would have saved me a lot of trouble back in December when I was helping out someone who wanted rid of this (see here for my solution which is virtually the same)...it took me a quite a while and a lot of trial and error to come up with this solution, so if this tutorial was around back then I may cry

I find quite a few clients that use Firefox complaining about the page shift.

 

I used to the use the margin-bottom trick, but I found this one to be much neater:

 

html{
overflow-y:scroll;
}

I find quite a few clients that use Firefox complaining about the page shift.

 

I used to the use the margin-bottom trick, but I found this one to be much neater:

 

html{
overflow-y:scroll;
}

 

 

But it's not neater as that bit of code would make your css invalid.

I'm still amazed at all these clients that get bugged by the "shift", I'm yet to run across any!

I'm still amazed at all these clients that get bugged by the "shift", I'm yet to run across any!

 

 

A couple of clients of mine were at first and then I showed and explained the reason for the shift and they weren't all that fussed about it any more.

I'm so glad you did that instead of pandering to their demands at the cost of changing the browser behaviour for every other user.

I first found this trick in a PhpBB3 style sheet. I then applied the concept to my website. The content is centered and going from one page to another used to shift the layouts left if the the height overflows. I found it annoying.

 

Compare : ambitionsnowskates.com/

With: ambitionsnowskates.com/error

 

From the error page to the homepage, the layout remains at its position. If feels solid and in my opinion, it has nothing to do with changing the behaviour of the browser. I would never apply this trick to a layout that is left-centered. For a centered template though, I find this very handy. Why PhpBB used it is unknown to me. Is anyone really bothered with the extra pixel? If you see that the page doesn't span over the window's height... why would you think there is more content below, hence believing that your "browser is broken"? That argument doesn't hold up against the fact that a layout at a fixed position feels much stronger than one which shifts.