Computing.Net > Forums > Web Development > Unwanted horizontal scrollbar

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

Unwanted horizontal scrollbar

Reply to Message Icon

Name: Zenno
Date: June 9, 2004 at 12:49:15 Pacific
OS: Windows XP
CPU/Ram: P4 1.8 / 1.5 G
Comment:

Suppose you have a very basic web page (no frame at all) with just one graphic (not the background image) that is bigger than 800x600.

Of course, at 800x600 or lower resolution, scrollbars will appear.

Is there a way to allow only the vertical scrollbar to appear ? I know that i won't be able to see the graphic completely horizontally in that manner but it's only an example to simplify my question.

Thanks.



Sponsored Link
Ads by Google

Response Number 1
Name: b0red
Date: June 9, 2004 at 13:14:11 Pacific
Reply:

You may be able to do this with the overflow css property.

http://www.w3schools.com/css/pr_pos_overflow.asp


0

Response Number 2
Name: Zenno
Date: June 9, 2004 at 13:37:33 Pacific
Reply:

Thanks but this doesn't solves my problem. I want to keep the vertical scrollbar but not the horizontal.


0

Response Number 3
Name: FBI Agent
Date: June 9, 2004 at 16:27:04 Pacific
Reply:

correct me if im wrong, but that picture doesnt need to be 800x600 does it? i'd say about 99.9% of people that matter that have computers use a res of at least 640x480 (a pick of 600x400 would probably fit in their browser fairly well), so if you changed the res of your pic to that much, then it wouldnt be a problem at all. (or cut the side part off since its not a big deal as you said and make it 600x600)


second solution. are you actually just showing a pic or you want some other stuff? if you are just showing a pic, you could make a link straight to the picture like,

http://www.your-webserver.com/images/pic25.jpg


im not sure if that would work, but its an idea


FBI_Agent


0

Response Number 4
Name: Zenno
Date: June 9, 2004 at 18:45:37 Pacific
Reply:

Ok, look, i have a web page that is much more complicated than that, with iframes, css and everything, so i guess i'm an experienced user.

I just use the example of a simple web page with one big picture inside just to ask ONLY what i was interested in and not to confuse anyone.

It's just that i can't find anywhere on the web that winning script that could allow to have only a vertical scrollbar even if i do need an horizontal one.

I want this scrollbar thing to apply on my main page only NOT my iframe or other frames inside my main page.

Thanks.


0

Response Number 5
Name: SN
Date: June 9, 2004 at 19:13:37 Pacific
Reply:

b0red was actually on the right track...The overflow property is shorthand for the overflow-x and overflow-y properties. You can set them individually just like you set the overflow property (auto, scroll, hidden, inherit etc.)

I don't know which browsers support them...You can test that yourself. It seems to be part of the CSS2 standard though. I know for sure IE6 supports it.

-SN


0

Related Posts

See More



Response Number 6
Name: Zenno
Date: June 9, 2004 at 20:21:49 Pacific
Reply:

hmm. ok thanks SN, i'll do some more research about these overflow properties and their syntax.

Zenno.


0

Response Number 7
Name: SN
Date: June 9, 2004 at 20:34:35 Pacific
Reply:

Zenno-
My guess is that you're trying to do this to an i-frame? If so, you should put something like
<STYLE>
HTML { overflow-x: hidden; overflow-y: auto;}
</STYLE>

in the page that is being framed, not the one that contains the iframe.

Search for overflow-x on msdn.microsoft.com and you'll get some more info on how IE6 handles it.

-SN


0

Response Number 8
Name: Zenno
Date: June 9, 2004 at 21:45:19 Pacific
Reply:

Nope ! Sorry, as i mentionned in my second post above, this is for my main page and not for any of my iframes.

Sorry SN.

p.s. I already knew about that method for iframe.

Zenno


0

Response Number 9
Name: Zenno
Date: June 10, 2004 at 16:25:18 Pacific
Reply:

Ok guys, this doesn't work.

here's the code i'm using, can someone tell me what's wrong:

html {
overflow-x:hidden;
overflow-y:auto;
}

And finally, here is the web page:
http://www.familleboutet.com/familleboutet.com/

Watch it in 800x600.

I know that my graphic is 780 pixels wide which is allright but there is extra space making the horizontal scrollbar appear that is caused by the fact that my graphic is presented in a table and that this table has a few extra empty cells at the right necessary to make the whole thing holding up together correctly.

So as you can see, the problem is on my main page, and my main page is not an iframe so i cannot use this script:

html {
overflow-x:hidden;
overflow-y:auto;
}

It just doesn't work.

Can somebody help me with this ?

Thanks

Zenno.



0

Response Number 10
Name: SN
Date: June 10, 2004 at 17:43:45 Pacific
Reply:

Zenno-
This one is my fault. I misread MSDN's documentation. I thought that it was saying that overflow applied to the HTML object (which I thought was strange) but really it was just referring to the CSS as HTML...

Anyhow, it should be BODY {overflow-x: hidden; overflow-y: auto;} rather than HTML. I tested it with an 830x200 image, and it worked in IE6, but not in NS 7.1. It seems to be a part of CSS3, so it will hopefully be fully supported soon.

Sorry for the error.

-SN


0

Response Number 11
Name: Zenno
Date: June 10, 2004 at 18:33:38 Pacific
Reply:

Hmm... i just tried it.

Since i'm not home right now, the only browser i've got to test the "body instead of html" you mentionned is IE 5.5 and it does not work.

I'll keep you posted.

Thanks a lot.


0

Response Number 12
Name: Zenno
Date: June 10, 2004 at 19:52:22 Pacific
Reply:

Ok, it doesn't work, and i tested it on IE 6.0.2800

Here's the link again so you can see by yourself:

http://www.familleboutet.com/familleboutet.com/

Thanks.

Zenno


0

Response Number 13
Name: SN
Date: June 10, 2004 at 20:04:28 Pacific
Reply:

Zenno-
This time it's not my fault :-) You left overflow: auto in the body CSS, which is overriding the overflow-x and overflow-y properties declared earlier. Take out overflow: auto and it works.

-SN


0

Response Number 14
Name: Zenno
Date: June 11, 2004 at 04:18:09 Pacific
Reply:

Yes !!

It's working perfectly now.

Thanks again. You've been a great help.

Zenno.


0

Sponsored Link
Ads by Google
Reply to Message Icon






Post Locked

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.


Go to Web Development Forum Home


Sponsored links

Ads by Google


Results for: Unwanted horizontal scrollbar

horizontal scrollbar problem www.computing.net/answers/webdevel/horizontal-scrollbar-problem-/3250.html

Get rid of horizontal scroll bar IE www.computing.net/answers/webdevel/get-rid-of-horizontal-scroll-bar-ie/2635.html

horizontal scroll bar in IEpc www.computing.net/answers/webdevel/horizontal-scroll-bar-in-iepc/3108.html