/    Sign up×
Community /Pin to ProfileBookmark

Scrollbars

Copy linkTweet thisAlerts:
Jul 29.2003

Can someone go [URL=http://kd7pyo.infinitypages.com/]here[/URL] and click on the “Portfolio” link and look at how it’s adding the bottom scrollbar and then tell me how to fix it? I have this is my external CSS file:

[COLOR=blue][B]body { overflow-x: hidden }[/B][/COLOR]

But for some reason it’s adding the bottom scrollbar to this page? I think it’s possible it could have something to do with my source too so someone can look there too! How do I fix it so it dosn’t have that bottom scrollbar? Thanks. ?

to post a comment
CSS

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJul 29.2003 — I viewed your site in IE 5/Mac OS 9 and I don't see the scroll bars. What browser and what OS are you using to view your site?

It just may be some browsers' buggy support for the CSS property you described in the post above.

You may want to try:

overflow: auto;

instead of overflow-x. I know for a fact that IE for Windows and Mac will only put in scroll bars if there is enough content. Mozilla-based browsers (Moz 1.0 and NS 6.x and 7.x) will throw in the scroll bars anyway. Opera 6 and 7 behaves like IE.

You may also be seeing this as a "bug" when in fact it is a result of the browser working in quirks mode. Your pages do not have complete doctype tags at the beginning, which forces newer browsers out of standards compliance mode and into quirks mode. Browsers can sometimes behave in a dramatically different fashion from the standards set up by the W3C.

Try getting your pages to validate as HTM 4.01 Transitional and make sure your CSS validates as CSS 1 or CSS 2 before you go chasing browser bugs.
Copy linkTweet thisAlerts:
@JickauthorJul 29.2003 — I'm validating my external CSS file through W3C and I got it all down to just these last errors but, I can't figure out what a "Generic Font" is? Here are all the last errors I'm getting:

[COLOR=blue][B]Line : 25 font-family: You are encouraged to offer a generic family as a last alternative

Line : 31 font-family: You are encouraged to offer a generic family as a last alternative

Line : 37 font-family: You are encouraged to offer a generic family as a last alternative

Line : 44 font-family: You are encouraged to offer a generic family as a last alternative

Line : 52 font-family: You are encouraged to offer a generic family as a last alternative

Line : 58 font-family: You are encouraged to offer a generic family as a last alternative

Line : 65 font-family: You are encouraged to offer a generic family as a last alternative

Line : 71 font-family: You are encouraged to offer a generic family as a last alternative[/B][/COLOR]

Can anybody tell me how to fix these errors? Thanks. ?
Copy linkTweet thisAlerts:
@pyroJul 29.2003 — You should always specify a generic font when you specify font-family. On the site I am currently working on, which uses the verdana font, I use this:

font-family: verdana, arial, sans-serif

sans-serif is the generic font. The reason this is needed is because not everyone has the same fonts installed on their computer...
Copy linkTweet thisAlerts:
@pyroJul 29.2003 — Also, if you are going to put the Valid HTML 4.01 Transitional logo on your site, be sure it actually is valid:

http://validator.w3.org/check?uri=http%3A%2F%2Fkd7pyo.infinitypages.com
Copy linkTweet thisAlerts:
@JickauthorJul 29.2003 — Pyro,

Yeah I know about that. A while back it was valid but now I did some updates and I need to fix it all again. Thanks.

I fixed all my CSS and now it's all valid but it's still adding the bottom scrollbar for some reson? I'm viewing the page with:

[COLOR=blue][B]------------------------

Windows 98 SE

Internet Explorer 6.0

1024 x 768

------------------------[/COLOR][/B]

Does any body know how I can fix this problem?
Copy linkTweet thisAlerts:
@PeOfEoJul 29.2003 — Is pyro hosting you or just letting you use his domain?
Copy linkTweet thisAlerts:
@pyroJul 29.2003 — He's coasting along on a freebe account... for now ?
Copy linkTweet thisAlerts:
@PeOfEoJul 29.2003 — hahaha, I just found out that my cable provider comcast gives me free web space ? I just found a new spot to shove all of my downloads so they dont clutter my working accounts!!! ?
Copy linkTweet thisAlerts:
@JickauthorJul 30.2003 — I don't think any of those replys answered my question? Does anybody know how to fix my scrollbar problem? Thanks. ?
Copy linkTweet thisAlerts:
@JickauthorJul 30.2003 — I just noticed that this scrollbar problem only seems to affect my pages which require them for example my "About Us" page dosn't need scrollbars because it's short and every thing looks fine on that page but pages like "Portfolio" and "Prices" that do require scrollbars since they are long do have the scrollbar problem. What could be wrong? I still want to allow the right hand side scrollbar so the user can scroll up and down but I just DON'T want to allow the bottom scrollbar which would allow them to scroll left and right. The overflow:x thingy dosn't work. What can I do here?
Copy linkTweet thisAlerts:
@pyroJul 30.2003 — The problem is caused by this part of your CSS (in the body { } part) MARGIN: 35px; removing that makes the page work correctly. Note that it already worked correctly in Mozilla...
Copy linkTweet thisAlerts:
@JickauthorJul 30.2003 — Ok, I removed the margin like you said and it fixed some pages but still for pages that are long it puts the bottom scrollbar? How should I fix this?
Copy linkTweet thisAlerts:
@JickauthorJul 31.2003 — Did you guys forget about me? I really need help with this. Please someone tell me how to make it so the bottom scrollbar dosn't show up like it is right now. ?
Copy linkTweet thisAlerts:
@toicontienJul 31.2003 — I've been chewing on this problem for a while. I was working on www.cm-life.com using a css layout. Some work required that a table of info be encased in a DIV with its overflow property set to auto.

If info crossed either the horizontal or vertical bounds, both horizontal and vertical scroll bars appeared, even if one of the scroll bars wasn't needed.

It seems to be an intrinsic behavior when dealing with the overflow property.

So basically what I'm saying is that there's nothing you can do about it. It's just how browsers work right now.

I visited your site in Moz 1/PC and IE 6/Win XP, and Moz didn't have horizontal scroll bars while IE did. You have to remember that IE has pretty lackluster support for CSS compared to Mozilla and Opera.

It also might be that the vertical scroll bars take up some width and the table cell is not resizing the width allotted to the content of the cell, and thus the content plus the vertical scroll bars take up more width than is allotted to the table cell.
×

Success!

Help @Jick spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...