horizontal scrollbar

**Pinny** · Dec 29, 2003, 13:17

Hey Guys,

I've almost killed myself trying to figure out why i'm getting a horizontal scrollbar on this layout. Before I put in the PHP tags, etc. I didn't have one, and now I do.

The old template:
http://www.cstorenovelty.com/Ethan Dawe

The new PHP tagged template:
http://www.cstorenovelty.com

Can anyone figure out why this is happening ?

Thanks

**dbalsdon** · Dec 29, 2003, 13:48

When i view both pages in Mozilla, i dont get a horizontal scrollbar???

**Pinny** · Dec 29, 2003, 13:57

oh sorry

, I meant in IE 6. Can anyone figure out why ?

**dbalsdon** · Dec 29, 2003, 14:37

Code:

 <table width="100%" border="0" cellpadding="0" cellspacing="0" height="590">

maybe try lowering the table width from 100% to 99%

**Pinny** · Dec 29, 2003, 15:04

the table width was 780 before, ( the viewable area on a 800x600 screen ) and it still had this scrollbar. I don't know why this thing keeps happening. Now when it's 100% instead, it narrows the page until i refresh again.

**LiquidReflex** · Dec 29, 2003, 15:46

Originally Posted by Pinny

the table width was 780 before, ( the viewable area on a 800x600 screen ) and it still had this scrollbar. I don't know why this thing keeps happening. Now when it's 100% instead, it narrows the page until i refresh again.

Well, I can't see the scrollbar (IE 5.1.5 on a Mac) but the table width on an 800x600 screen to ensure no scrollbar is actually 760 wide (755 to be extra safe) not 780.

**Pinny** · Dec 29, 2003, 16:05

760 leaves a lot of open whitespace though :-(

**dbalsdon** · Dec 29, 2003, 16:26

a possible option is CSS

Code:

 body
 {
 overflow-x: hidden;
 }

**Pinny** · Dec 29, 2003, 17:31

i'm trying to find a "natural" way for it to work

.

**Keriam** · Dec 29, 2003, 19:31

Originally Posted by Pinny

i'm trying to find a "natural" way for it to work

.

CSS is "unnatural"?

Umm, anyhow... did you fix it? I do not see it in IE6 at 800x600 if I have the favs column turned off. It is there if favs are on.

**Pinny** · Dec 29, 2003, 22:43

aren't the favorites a horizontal thing and not a vertical thing?

**Keriam** · Dec 30, 2003, 00:06

Originally Posted by Pinny

aren't the favorites a horizontal thing and not a vertical thing?

Favorites run down the left side of my screen in IE6, therefore they often force a horizontal scroll when on. At 1024 I do not see the horizontal scroll with or without them on.

**Pinny** · Dec 30, 2003, 00:12

but can anyone figure out why they appear in 800x600 ?

**DS51** · Dec 30, 2003, 01:27

Pinny,

Here are two pages that will show you some of the differences between the two pages as well as warnings and errors. Notice the PHP page has to many errors to completely validate until some of it is fixed.

HTML Page

PHP page

If you fix the errors you see on these pages and still have a problem post or PM me and I'll dig a bit more for you into your code and fix it.

**Keriam** · Dec 30, 2003, 09:05

Originally Posted by Pinny

but can anyone figure out why they appear in 800x600 ?

Leaving aside all the validation issues that DS51 pointed out, you originally stated that you are seeing a horizontal scroll in IE6 on the new template and not the old. Correct?

From my perspective using IE6:

Both old and new have NO horizontal scroll when viewed at 1024x768 or higher.

BOTH old and new DO HAVE a horizontal scroll when viewed at 800x600 at anything less than a full screen view. In other words, if I have favorites, media, or search turned on (which park themselves at the left of the browser window thus reducing viewing area for the site) OR the browser is less than full screen for any other reason.

Therefore I do not see what the issue is. The browser is simply doing its job by allowing me, the viewer, to see the whole page by presenting a horizontal scroll when the area to be presented is greater than the available viewing area.

Now in the new template you have

Code:

<table width="778" border="0" cellpadding="0" cellspacing="0" height="590">

778 is pretty much the maximum width you can have for 800x600 in full screen view. So you can reduce the table width (which may mess up the rest of the layout), you can change the table width to a percentage making it more fluid (which may also mess up the rest of the layout) or you can simply not worry about it and let the browser do its job.

**Pinny** · Dec 30, 2003, 13:27

I don't have anything on the left or right side of my browser, as most people don't. Therefore i'm just trying to make that work fine in 780 width or 100%. can you tell me if you take off all the left side stuff if you have a horizontal scrollbar still ?

**r937** · Dec 30, 2003, 13:43

Originally Posted by Pinny

I don't have anything on the left or right side of my browser, as most people don't.

no offence, but that is anecdotal at best

i've never seen any studies to that effect, and i'd appreciate knowing of any

someone on a completely different forum today posted this:

Plus, it is great to keep in mind that many more users than you might think are using odd resolutions. With AOL 9.0 maximized on an 800x600 display (which is quite common among home users), you wind up with a default browser window of 716x414 (inner measurements). So, if you're designing a rigid (non-liquid) page layout for a minimum resolution of 800x600 and assuming you'll have 780 pixels in width to work with (as it is in IE full-screened at 800x600)... you're gonna wind up with a horizontal scroll bar.

i would say -- anecdotally, of course

-- that most pages "designed" for 800x600 resoution, even allowing 24 pixels for the chrome, are going to have horizontal scrollbars in aol9

**Pinny** · Dec 30, 2003, 14:01

oy yoy yoy , i'm trying to fix the problem, not to feel better about it.

**Keriam** · Dec 30, 2003, 14:44

I thought I did answer that question.

Originally Posted by Keriam

BOTH old and new DO HAVE a horizontal scroll when viewed at 800x600 at anything less than a full screen view. In other words, if I have favorites, media, or search turned on (which park themselves at the left of the browser window thus reducing viewing area for the site) OR the browser is less than full screen for any other reason.

If you want to try to eliminate the horizontal scroll, do as r937 suggested and cut the width down more (716 may indeed be reasonable) or use a percentage (99%, not 100, IE likes that better for some reason).

Originally Posted by r937

i've never seen any studies to that effect, and i'd appreciate knowing of any

I don't know of any either.... may we should put up a non-scientific poll here at sitepoint

**Pinny** · Dec 30, 2003, 14:47

well i have worked with many others and the standard IE look is a 20 pixel chrome/vertical scrollbar.

**DS51** · Dec 30, 2003, 15:21

716 is far from reasonable as is AOL 9.0 restraints. If your going to worry about some of the items brought up here we may as well go back to 640x480

You can't be all things to all conditions and you can't build a page that will work in all browsers unless it uses the very basic of coding or you build your pages for every possible condition and redirect the user to the one that suits. No one has even mentioned monitor size which will affect all of the conditions mentiond.

Target your audience and then build for the widest platform possible. If that's AOL then 716 is what your stuck with. Look around, there's very few site that will render properly on AOL, heck even at 1024x768 I run into major sites all the time that I have a horizontal scroll to deal with.

The question here has not really been addressed which is why in IE6 at 800x600 full screen res is he getting a horizontal scroll bar. Pinny I don't run IE6 or I'd help more. I don't see this problem in on my system.

I do agree that building in % is the best way to achieve the best possible solution to res and monitor conditions but even then you'll have some that will have this problem.

**Keriam** · Dec 30, 2003, 16:02

Originally Posted by DS51

You can't be all things to all conditions and you can't build a page that will work in all browsers unless it uses the very basic of coding or you build your pages for every possible condition and redirect the user to the one that suits. No one has even mentioned monitor size which will affect all of the conditions mentiond.

Amen to the fact that you can not build a site that will support every resolution and browser without some extra work! I will take exception to monitor size having an impact to his stated problem. 800x600 resolution on a 15" monitor and 800x600 resolution on a 21" monitor will still both be 800 pixels wide by 600 pixels high. A page will display the same on both. Of course, the bigger monitor will present a larger image, but it will still only be 800x600.

Originally Posted by DS51

The question here has not really been addressed which is why in IE6 at 800x600 full screen res is he getting a horizontal scroll bar.

I did address the issue, I had no horizontal scroll. I say 'had' because when the table width was 778 I didn't. Now that table width is 780, I do. Widening the table will not reduce the chance having the scroll. The fix to the problem is to reduce the table width or go to a fluid design.

**DS51** · Dec 30, 2003, 17:04

Originally Posted by Keriam

I will take exception to monitor size having an impact to his stated problem. 800x600 resolution on a 15" monitor and 800x600 resolution on a 21" monitor will still both be 800 pixels wide by 600 pixels high.

.

I agree Keriam, my point and I should have clarified it was, that if we are going to worry about every condition of rendering our design do we concern ourselves with those that are using old systems or technology to surf the web. A 13" or 14" monitor will not render this page as with a 15" or larger screen and are most likely running at 640x480, but even if they were running at 800x600 it would still be a problem.

I have several old systems that I use to test with and this has been my finding.

Originally Posted by Keriam

I did address the issue, I had no horizontal scroll. I say 'had' because when the table width was 778 I didn't. Now that table width is 780, I do. Widening the table will not reduce the chance having the scroll. The fix to the problem is to reduce the table width or go to a fluid design.

My apologies... yea 780 is just a bit to much, but interestingly I have found (and I'm not sure why) with some designs I've done 780 works, kind of wired...

So, Keriam using IE6 has no issues, and Pinny using IE6 does ? interesting.

Pinny, look at the maximize button on your browser do you see one square image or a cascade of two square images. If you see two your not full screen. This has caused me a head scratch a couple of times. You might have been somewhere that made changes to your default setting and that can cause this to happen. Pisses me off when it happends.

**Pinny** · Dec 30, 2003, 17:20

no i got am sure i had it maximized. we just switched the html for now to be 100%, so maybe thats why he got it without a horizontal scrollbar . the problem is now the top table isn't reaching all the way to the end. if we refresh then it does.