Forum Moderators: open

Message Too Old, No Replies

Scrollbar spacing?

         

madmatt69

2:14 pm on Oct 4, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi everyone -
I've noticed that even though I've got my tables set to a width and height of 100%, when there isn't enough content to warrant a scrollbar, the space on the page where the scrollbars go is blank....the table doesn't fill the space. Is there a way to do that? I've experimented by telling the table to be 102% or 103% but neither is very accurate, and changes between Netscape 4.x and IE5.5

Is there a workaround for this?

Thanks,

Matt..

grnidone

4:44 pm on Oct 4, 2001 (gmt 0)



Welcome to wmw, MadMatt.

Help me understand your question. It sounds like you are trying to extend your tables *over* the browser window..?

You are referring to the scrollbars on the scrollbars in the browser window..or something else?

IanKelley

9:54 pm on Oct 4, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I've encountered the same problem... I haven't been able to come up with anything. I'm fairly sure there isn't a workaround.

mivox

10:03 pm on Oct 4, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Matt, I get that same blank space on my 100% width pages... very aggravating.

What's even stranger is that some of my pages, which don't need ANY scroll bars will not only appear with blank space at the right-hand egde, but will have BOTH side & bottom scroll bars as well, allowing you to scroll over and down to see a few extra lines of dead white space...

I'm bookmarking this thread just in case someone comes up with a solution.

G- stickymail me, and I'll point you to an example URL... :)

madmatt69

8:27 am on Oct 5, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hey everyone,

Glad to hear that I'm not the only one with this problem. To clarify - When I have a table with 100% width, and no scroll bars in the window, the table does not expand to fill the page, despite the setting of width=100%. There is still left over room from where the scroll bars should be.

So yeah...I'm still no closer to finding a good solution. The best I can come up with is to set the width to 102% and that ALMOST covers the gap. But then it goofs up in Netscape (of course). So maybe I'll have to define the table using javascript, based on browser version. But that's a pain in the ass!

Anybody else have suggestions?

Matt..

idiotgirl

12:37 pm on Oct 5, 2001 (gmt 0)

10+ Year Member Top Contributors Of The Month



Mivox-

If you're sure your tables won't require any scrollbars (but would still otherwise leave the funky gap) couldn't you put your table or form in a layer or iframe, or multiple layers, and set your X and Y's to the exact margins - or minus 1, 2... whatever fits? Initially, it seems simple. Then again - how will it look if you need to go a-scrolling :(

Has anyone tried this?

madmatt69

2:52 pm on Oct 5, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That's a great idea........but then, as you mentioned, the page won't work if someone resizes the window, and suddenly a scroll bar is necessary :(

Good idea though...maybe theres a way you could CSS position a box in that area where the scrollbars should be?

Matt..

mivox

5:17 pm on Oct 5, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm personally willing to put up with the scrollbar oddities as long as they don't interfere with the function of the page. Any time I've tried some sort of elaborate workaround, it's endedd up causing much worse problems in other ways...

Scroll bar gaps and unnecessary white space are definitely the lesser of the available evils. ;)

IanKelley

8:06 pm on Oct 5, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If you REALLY hated scrollbars white space you could use javascript to reload your page in a new window with scrollbars turned off.

Microsoft wrote the problem into Active Desktop too... it's a bitch to design for :-)

madmatt69

8:15 am on Oct 8, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think I really don't have a choice but to put up with this wacky-ass bug! Thankfully it's not like it's going to make or break the page, but it'd be nice to somehow fix it!
Matt..

mivox

4:52 pm on Oct 8, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think I really don't have a choice

That was my conclusion too. :(
I was still hoping someone would pop in with something... maybe someone from W3C. ;)

JuniorHarris

5:55 pm on Oct 8, 2001 (gmt 0)

10+ Year Member



The only way I could fix a similar problem was by using Netscape!~ ;)

Just another Microsoft quirk we must tolerate...curious if it shows in IE 6?

madmatt69

8:13 am on Oct 9, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You actually managed to work around the bug using Netscape? That's crazy! Which version? What did you do?

And yes, please, anyone from the W3C out there have some thoughts on this?

GWJ

11:36 am on Oct 9, 2001 (gmt 0)



Hi,

Maybe I am reading the question wrong but have you tried...

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Brian

madmatt69

2:08 pm on Oct 9, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yep, that's all been stated in the BODY tag.

Carol

12:11 pm on May 7, 2002 (gmt 0)

10+ Year Member



Hi All,

I have been designing a new website which has a 'tramline' effect across the top of the page. The table is 100% and I forgot about the blank space for the scroll bar issue in NS4.x... until i started testing.

I found an answer, which works for my simple design, but is probably impractical for more complex designs, so may not suit everyone.

I used a background image in the style sheet to replicate the tramline effect and stopped it repeating in NS4 (background- repeat isn't supported in NS4) by using the .stylename{background:mycolor} to colour each table cell, which overwrote the repeat of the background. As a precaution for NS6 and IE6 i included background-repeat:repeat-x.

My explanation is probably poor, so go here, using NS4.x, to view with and without my workaround:-
without background [lankesterdesigns.com] and with background [lankesterdesigns.com]

Feel free to e-mail me for a better explanation... e-mail address on main website above.

(edited by: tedster at 2:12 pm (utc) on May 7, 2002)

gph

11:05 pm on May 7, 2002 (gmt 0)

10+ Year Member



This may or may not help you depending on your requirements.

The design I'm working on uses a left and right table, the left for navigation the right for content (images sized with JavaScript).

In IE the right content centered between the left table and the blank scrollbar but I didn't like the look of the blank scrollbar.

In NN4 the right table centered between the left table and the imaginary scrollbar area which made it look off center.

If I put a 12px wide shim on the left side of the right table NN4 looked centered but IE was out.

If I set overflow:auto for IE it was centered with no scrollbar but NN4 was still off. When the dynamically expanding menu in the left table made scrollbars necessary by pushing content down the page IE would produce a scrollbar and make the whole page appear to jump to the left.

What I finally did is below which makes IE act the same as NN4. Adding the 12px shim centers both. The Javascript is courtesy of help from this forum [freewarejava.com...]

In the CSS (where my background colour = #525252):

body {

scrollbar-face-color: #525252;

scrollbar-arrow-color: #525252;

scrollbar-highlight-color: #525252;

scrollbar-3dlight-color: #525252;

scrollbar-shadow-color: #525252;

scrollbar-darkshadow-color: #525252;}

External JavaScript:

if (document.getElementById)
function Scroll() {
if (document.body.scrollHeight < document.body.clientHeight) {
document.body.style.scrollbar3dLightColor = "#525252";
document.body.style.scrollbarArrowColor = "#525252";
document.body.style.scrollbarDarkShadowColor = "#525252";
document.body.style.scrollbarFaceColor = "#525252";
document.body.style.scrollbarHighlightColor = "#525252";
document.body.style.scrollbarShadowColor = "#525252";
} else {
document.body.style.scrollbar3dLightColor = "transparent";
document.body.style.scrollbarArrowColor = "transparent";
document.body.style.scrollbarBaseColor = "ButtonFace";
document.body.style.scrollbarDarkShadowColor = "transparent";
document.body.style.scrollbarFaceColor = "transparent";
document.body.style.scrollbarHighlightColor = "transparent";
document.body.style.scrollbarShadowColor = "transparent";
document.body.style.scrollbarTrackColor = "transparent";
}
}

In the body tag of the page:

onLoad="Scroll()" onResize="Scroll()"

In the menu:

onmousedown="Scroll()"

Because I'm using an image sized to window script in the 2nd table IE became confused and produced a blank scrollbar. The solution was setting table heights to 99.5%

NN4 declares a JavaScript error on the page in the statusbar regarding Scroll() but I'm sure it is my inability to exclude it from the script. I'm still working on that one.

Hope this helps

moonbiter

1:16 pm on May 8, 2002 (gmt 0)

10+ Year Member



Just another Microsoft quirk we must tolerate...curious if it shows in IE 6?

It does. The corporate intranet I do most of my designing for has a frameset, and the navigation frame has this problem. IE 6 here.

gph

8:42 pm on May 9, 2002 (gmt 0)

10+ Year Member



I think I solved my NN4 problem with the scroll script. I got the idea from the current Blur Links thread.

I changed the beginning of the script to this:

function Scroll() {
if (!document.getElementById) return;
if (document.body.scrollHeight < document.body.clientHeight) {
document.body.style.scrollbar3dLightColor = "#525252";

It seems to be working, could someone confirm that I'm doing this correctly?