Remove body's scrollbar in IE4?
Moderator: General Moderators
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Remove body's scrollbar in IE4?
Does anyone know of any way to remove the body's vertical scrollbar in IE4? No frames and no overflow will work or are options. I was figuring JavaScript might work. Yes, I actually am working with IE4, it has very good CSS1 support (being released itself about one year after CSS1 was finalized). The new layout I'm making with CSS1 works without any hacks for all browsers IE4+, all Gecko, Opera 4+, Webkit, etc and is if one would believe it pixel perfect.
I know people are going to want to joke but please stay on topic, I'm having a lot of fun with the fundelmentals. 
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
This code will work fine in IE4 though it does not include my content/sidebar layout. Since I like to be cutting edge and have of recent been adding cross browser support for my personal site I've got no issues cloaking to remain true to the layout. Anyway if you need a standalone IE4 to test this out let me know. Presume the CSS in this file is only served (cloaking) to IE. For IE4 code look for if false as IE4 (and all non-IE browsers) are considered in conditional comments to be downlevel browsers. We can put a script element/scripts specific to IE4 there for example.
Also I was looking at the MSDN2's HTML/DHTML references to see if I could do this with JavaScript. Not sure what is/isn't supported for IE4 (though did get my site's menus to work haha)...
http://msdn2.microsoft.com/en-us/library/aa342519.aspx
Thanks for taking a look.
Also I was looking at the MSDN2's HTML/DHTML references to see if I could do this with JavaScript. Not sure what is/isn't supported for IE4 (though did get my site's menus to work haha)...
http://msdn2.microsoft.com/en-us/library/aa342519.aspx
Thanks for taking a look.
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height Divs</title>
<!--[if true]>
<style type="text/css">
/* IE5.5 */
/* IE5.5 */
/* IE5.5 */
/* IE5.5 */
body, html {
background: #000;
height: 100%; /* this is the key! */
margin: 4px 3px 0px 4px;
padding: 0;
overflow: hidden;
width: 100%;
}
#bodyouter {
background: #eee;
height: 99%; /* works only if parent container is assigned a height value */
left: 3;
border: #479 solid;
border-width: 40px 1px 1px 1px;
position: absolute;
top: 3;
width: 100%;
}
#bodyinner {
background: #ddd;
height: 100%; /* works only if parent container is assigned a height value */
width: 100%;
}
#content {
background: #ccc;
height: 100%; /* works only if parent container is assigned a height value */
overflow: auto;
width: 100%;
}
</style>
<!--[if true]>
<![endif]-->
<![if false]>
<style type="text/css">
/* IE4 */
/* IE4 */
/* IE4 */
/* IE4 */
body, html {
background: #000;
height: 100%; /* this is the key! */
margin: 4px 3px 3px 4px;
padding: 0;
width: 100%;
}
#bodyouter {
background: #eee;
height: 100%; /* works only if parent container is assigned a height value */
left: 3;
border: #f0f solid;
border-width: 40px 1px 1px 1px;
position: absolute;
top: 3;
width: 100%;
}
#bodyinner {
background: #ddd;
height: 100%; /* works only if parent container is assigned a height value */
overflow: auto;
width: 100%;
}
#content {
background: #ccc;
height: 100%; /* works only if parent container is assigned a height value */
left: 0;
padding: 0;
position: absolute;
top: 0;
width: auto;
}
</style>
<![endif]>
</head>
<body>
<div id="bodyouter">
<div id="bodyinner">
<div id="content">
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div><!-- /#content -->
</div><!-- /#bodyinner -->
</div><!-- /#bodyouter -->
</body>
</html> Ok, but what is it that you want to achieve?
The layout looks very weird in FF and Safari (mac), showing both horizontal and vertical scrollbars. is that on purpose?
I also looked in IE4 (yeah, first time ever I opened that browser
) and there you get some kind of internal scrollbar. The regular scroll bar doesn't work any more.
Maybe you could show us an image of what you'd like to achieve, so we can help.
The layout looks very weird in FF and Safari (mac), showing both horizontal and vertical scrollbars. is that on purpose?
I also looked in IE4 (yeah, first time ever I opened that browser
Maybe you could show us an image of what you'd like to achieve, so we can help.
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
I understand from your previous posts that you want your site to work on as many browsers as possible... but supporting IE4 is completely insane... why take hours of work to support .0001% of the audience??
Yes, I made up that .0001 figure, but only because I couldn't find any statistics that goes that far back, most stats sites stop listing things at less than .5%...
Yes, I made up that .0001 figure, but only because I couldn't find any statistics that goes that far back, most stats sites stop listing things at less than .5%...
http://www.w3schools.com/browsers/browsers_stats.asp
The Last Stat for IE4 was in July 2002, with 0.5%
The Last Stat for IE4 was in July 2002, with 0.5%
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
So it was at .5% as of FIVE years ago... Time to stop supporting it. As long as developers support old browsers, they will still be in use (granted, IE4 isnt used anymore, but the point still applies)Zoxive wrote:http://www.w3schools.com/browsers/browsers_stats.asp
The Last Stat for IE4 was in July 2002, with 0.5%
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Ha ha I was at work and got home late at that too tonight!
Remember that part about cloaking? Yeah, this CSS code is obviously not intended for anything but IE.
Ever visit my website in my signature? You'll catch on really quickly with what I'm trying to do. Visit the .net one which is my latest work.
Essentially if (within reason) a browser can use CSS good enough I patch it with a secondary stylesheet. I have just figured out how to do liquid layouts (private message for a private directory of screenshots). Not only does 100% of the stuff on my site (except the more cutting edge stuff like this layout / CSS2) work fine in IE4 with the new liquid layout but it also works perfectly fine (and pixel perfect too) in all Opera 4+, Gecko, and Webkit browsers period. It also resolves some issues in Gecko (activate an anchor on the latest news on the sidebar in Gecko on the .com version of my site for an example) where I'm not correctly using CSS1.
So if it works and only take an extra day or two on what I do in my spare time to begin with why the heck not say, my tableless pure CSS, fully standards, fully accessible, completely valid website works in IE4? I mean how many people can people can boast that?
So yeah I'm having a lot of fun with this! I want to get rid of the body element's vertical scrollbar and I haven't figured out anything yet. I was thinking JavaScript but there wasn't any decent examples in my previously linked page at MSDN2 in regards to the scrollbar property (nor is Google helping me much even with quotes and subtraction of unrelated terms).
So anyone have any ideas?
Remember that part about cloaking? Yeah, this CSS code is obviously not intended for anything but IE.
Ever visit my website in my signature? You'll catch on really quickly with what I'm trying to do. Visit the .net one which is my latest work.
Essentially if (within reason) a browser can use CSS good enough I patch it with a secondary stylesheet. I have just figured out how to do liquid layouts (private message for a private directory of screenshots). Not only does 100% of the stuff on my site (except the more cutting edge stuff like this layout / CSS2) work fine in IE4 with the new liquid layout but it also works perfectly fine (and pixel perfect too) in all Opera 4+, Gecko, and Webkit browsers period. It also resolves some issues in Gecko (activate an anchor on the latest news on the sidebar in Gecko on the .com version of my site for an example) where I'm not correctly using CSS1.
So if it works and only take an extra day or two on what I do in my spare time to begin with why the heck not say, my tableless pure CSS, fully standards, fully accessible, completely valid website works in IE4? I mean how many people can people can boast that?
So yeah I'm having a lot of fun with this! I want to get rid of the body element's vertical scrollbar and I haven't figured out anything yet. I was thinking JavaScript but there wasn't any decent examples in my previously linked page at MSDN2 in regards to the scrollbar property (nor is Google helping me much even with quotes and subtraction of unrelated terms).
So anyone have any ideas?
Yes I have some ideas.
First a more general remark. I visited your site (safari/ff) and am afraid it's not clear what you want to do. The site is not accessible, and not what I would call an example of a standards compliant site. At first entry I get a popup which completely disables any other function. With a message I don't understand. I have to make a choice between different settings I don't get, or I can take a "technical tour"? I'm more then average intelligent, so I would not want to know what that message does to cognitive disabled people or even regular, less then average intelligent people. The navigation does not work. I can get the drop downs, but there are no links to follow. I got confused by some sound suddenly playing, loudly.
So I wouldn't worry about the single visitor in IE4 you might some day have. The other 99.99% of your visitors with other, modern browsers should be your first priority.
Second, I still don't know what layout problem you're having. Removing the scrollbar?
This causes the scrollbar:
100% + 4px + 3px is still more then 100%, as far as I know. So removing that 100% will get rid of the scrollbar.
And last, I dare say that if you would use web standards and best practices building a website, you end up with a fully accessible website even in IE4, without even checking that browser. If the website doesn't look exactly the same as it does in other browsers: that is not important. Someone still browsing with that browser will be the last person on this planet who's going to complain about a header being off a few pixels in his browser compared to Firefox 2.03....
First a more general remark. I visited your site (safari/ff) and am afraid it's not clear what you want to do. The site is not accessible, and not what I would call an example of a standards compliant site. At first entry I get a popup which completely disables any other function. With a message I don't understand. I have to make a choice between different settings I don't get, or I can take a "technical tour"? I'm more then average intelligent, so I would not want to know what that message does to cognitive disabled people or even regular, less then average intelligent people. The navigation does not work. I can get the drop downs, but there are no links to follow. I got confused by some sound suddenly playing, loudly.
So I wouldn't worry about the single visitor in IE4 you might some day have. The other 99.99% of your visitors with other, modern browsers should be your first priority.
Second, I still don't know what layout problem you're having. Removing the scrollbar?
This causes the scrollbar:
Code: Select all
body, html {
background: #000;
height: 100%; /* this is the key! */
margin: 4px 3px 3px 4px;
padding: 0;
width: 100%;
}And last, I dare say that if you would use web standards and best practices building a website, you end up with a fully accessible website even in IE4, without even checking that browser. If the website doesn't look exactly the same as it does in other browsers: that is not important. Someone still browsing with that browser will be the last person on this planet who's going to complain about a header being off a few pixels in his browser compared to Firefox 2.03....
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Point One: Keyword Preview
Point Two: Press the tab key in a Gecko browser or Opera 9.5.
Point Three: If you read the beginning of the second paragraph at the very top of the page it explicitly explains that the menus don't link to anything.
Point Four: How long did you look at my site? If not long enough to read the second paragraph then I presume you missed the media type, the links to validate the XHTML, CSS, Section 508, and WAI AAA compliance.
Additionally if you've even bothered with IE4 you'll notice that even about:blank which contains absolutely nothing still displays the scrollbar. I also presume you didn't bother to look closely enough to figure out that the body's scrollbar doesn't actually scroll and since we're talking about IE4 with what is supposed to be a CSS2 based layout I am more then comfortable with reminding you about the implementation of cloaking. I am well aware of the bottom and top margin in addition to the height and width, perhaps though you've forgotten that we are working with IE4?
But none of this seems to matter does it? If it did you would have at most mentioned that you tried the methods but nothing seemed to work.
So, if we're done with the unrequested and unwelcomed design critiques the issue still exists and in no different of a state then it was when I originally posted.
Point Two: Press the tab key in a Gecko browser or Opera 9.5.
Point Three: If you read the beginning of the second paragraph at the very top of the page it explicitly explains that the menus don't link to anything.
Point Four: How long did you look at my site? If not long enough to read the second paragraph then I presume you missed the media type, the links to validate the XHTML, CSS, Section 508, and WAI AAA compliance.
Additionally if you've even bothered with IE4 you'll notice that even about:blank which contains absolutely nothing still displays the scrollbar. I also presume you didn't bother to look closely enough to figure out that the body's scrollbar doesn't actually scroll and since we're talking about IE4 with what is supposed to be a CSS2 based layout I am more then comfortable with reminding you about the implementation of cloaking. I am well aware of the bottom and top margin in addition to the height and width, perhaps though you've forgotten that we are working with IE4?
But none of this seems to matter does it? If it did you would have at most mentioned that you tried the methods but nothing seemed to work.
So, if we're done with the unrequested and unwelcomed design critiques the issue still exists and in no different of a state then it was when I originally posted.
I'm sorry if my comment came across as unwelcome. You mentioned your site and I just wanted to point out some issues, some of which are important accessibility-wise.So, if we're done with the unrequested and unwelcomed design critiques the issue still exists and in no different of a state then it was when I originally posted.
I don't understand?Point One: Keyword Preview
And then?Point Two: Press the tab key in a Gecko browser or Opera 9.5.
There was a popup blocking my view.Point Three: If you read the beginning of the second paragraph at the very top of the page it explicitly explains that the menus don't link to anything.
The thing is, accessibility and standards compliance is not (at all) only about some automatic check with some online tool. Your first and most important check is opening your site and seeing what is presented.Point Four: How long did you look at my site? If not long enough to read the second paragraph then I presume you missed the media type, the links to validate the XHTML, CSS, Section 508, and WAI AAA compliance.
And about the scrollbar issue: Why are you adding the margins to the 100%? As I said before, just remove those and you get rid of the scrollbars, in any browsers. Unless of course there's quite some vertical content. But then the scrollbar has it's function.
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Preview being it's not complete, like an alpha or beta. I am aware of the issue though PHP dynamically creates the JavaScript file that handles the window.onload event. So if this were not a preview but a "live" version of the site your point would be valid at that time.I don't understand?
The tab key once you make a choice on the welcome screen. I haven't yet added a script to give focus to the welcome layer (not a pop-up) and will probably do this with the fourth preview.And then?
Then if it's not an advertisement perhaps it has something important to do with my site.There was a popup blocking my view.
Fine but again negated because it's a preview. The preview is intended for the technically savvy, read the content, it's a bit obvious.The thing is...
IE4 just automatically displays the body scrollbar regardless of the content's vertical height inside of the body. IE4 also does not fully comply to the standards in regards to this particular layout which is fine (cloaking).
So the issue still remains, I hope this clarifies what I'm doing over there for you at least.
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Well someone mentioned to load the page within a frameset just to remove the scrollbar. While my site does use a frameset in the absence of super crazy complex AJAX support I was against the idea of using frames explicitly to resolve a visual issue. Still I suppose I could just redirect IE4 users to within the frameset as there are some other issues with advanced layout which works out fine anyway. The scrollbar is absent and there are no visual distortions between Gecko and IE4. 