-
Problem with scrollbar on FF
I decided to open a new thread for this, since it's not related to the fixed/liquid layout that was being discussed on the first thread.
Well, I found some solutions for the problem with the vertical scrollbar on FF, but I haven't tested them since they're not standard (overflow-x: hidden; and overflow: -moz-scrollbars-vertical;, for IE and FF, respectively). I also read that the IE solution works on FF (as I've been noticing, FF decided to understand some IE proprietary solutions). But, again, these are not standard and I'm not going to make it easier for me and screw up the users that don't use the latest versions of IE or FF.
I came up with something that actually does what I need, but it's not very good and intuitive for the user: apply the overflow: hidden; to the body. It doesn't actually hide the vertical scrollbar on IE7 (I don't know about previous versions), but hides for FF. The layout works as needed, the content flows the same way as before, as it's not controlled by the overflow property, but by the dimensions and the #footer. The problem is that, without the scrollbar, some users might think the page is cropping the content. I can't expect them to know that using the keyboard directional arrows, they'll be able to see the rest of the content, although it's a very elementary thing to me.
So I thought about using JavaScript to create a scrollbar inside the page somehow. I don't know if it's possible, it just occurred to me as a solution. But I don't know if it's the best solution, since JavaScript might be disabled/not accessible somehow.
So far, these are the options:
- Using overflow: scroll; and leaving the ugly and useless horizontal scrollbar just lying there, doing nothing but polluting the look;
- Using the non-standard solutions (can anybody tell me if they work on other browsers than IE/FF?);
- Using overflow: hidden; and assuming a) the risk of compromising the usability/navigability of the website, b) that most of the users would recur to the keyboard directioning arrows.
- In the last case, using JavaScript to generate an internal scrollbar, if possible.
- ???
What do you think?
-
-
have you tried overflow: auto ?
and also why don't you make your page to not scroll horizontally on 800x600 browsers? use percentages rather than explicit widths.
-
I am using percentages for widths. The only column that doesn't have a % width is the #content.
I do want the page to be scrolled in lower resolutions. I just didn't want to apply overflow: scroll; and have the horizontal scrollbar always there.
Here's what I just did, and solved things temporarily, including the problem with widths:
1) Applied min-width: 800px; to the #container - this really surprised me, because I wasn't expecting it to work on IE. But it does. At least on IE7. Solves the problem with the #content trying to fill the space under the menu when the resolution is low, and also the problem with the width being too small in low res.
2) Applied overflow: scroll; and overflow-x: auto; to the body - solves my problem with the weird FF interpretation of the nature of a scrollbar; by always having a vertical scrollbar, the page doesn't keep moving when the user navigates between pages that don't need a scrollbar and need a scrollbar.
3) Applied overflow: visible; to the body as a CC for IE - the step #2 above creates a weird vertical scrollbar on IE, and doesn't allow the pages to be visible when in low res. This fix the problem.
I know this is not a 100% good solution, as it probably doesn't do any good to users with older browsers. But I'm coming to the conclusion that it's better, for now, for the sake of my sanity, that I stop trying to be Mother Teresa of Calcutta.
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks