Let's say that on our page or site we have contents that should be centered horizontally.
Everything works nice, but... when the contents of a page get longer than the viewable area of the browser,
a scrollbar appears on the right moving your contents a bit to the left.
Although that's not a BIG problem, it's a bit annoying.
Fortunately, there's a quick and nice solution using CSS:
html
{
overflow-y: scroll;
}
Thanks to the above, a scrollbar will be shown regardless of the length of the page.
So, even if the contents of your page gets shorter or longer, everything remains in its place
and is no longer shifted left and right.
Ok, that's easy to find on the web.
But there's a similar problem to which I couldn't find a solution as quickly.
Namely let's say that on your page there's a frame or iframe that shows the contents of another page.
Now, you want to fix the shifting problem in that frame...
A solution that I've been trying was to add CSS similar to the one above
to the frame itself. This almost works - but not in all browsers and not the same way.
Firefox handles this nicely, but in IE it looks like this (unfortunately) - the white area is the frame:
The solution here is to add the above piece of CSS to the page that you are showing inside the frame.
Obviously this works if you have access to the other page's contents
(and that's why I wrote "unfortunately" above - adding CSS to the frame would be, IMO, a much nicer solution).
Oh, and you can also add an overflow-x definition (or just use overflow to control both scrollbars).
In the image below, the following CSS was used to hide the horizontal scrollbar:
html
{
overflow-x: hidden;
overflow-y: scroll;
}
Then you should get something like this (in all main browsers):
HTH
Top
|
Texts
