Forum Moderators: open
Is there a workaround for this?
Thanks,
Matt..
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?
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... :)
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..
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?
Scroll bar gaps and unnecessary white space are definitely the lesser of the available evils. ;)
Maybe I am reading the question wrong but have you tried...
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Brian
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)
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
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?