473,385 Members | 1,720 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Get rid of scroll bars in IE strict

I was using quirks mode (without a doctype) and set the overflow CSS
property to :auto for the body tag like so:

<body style="overflow:auto">

And it worked; it got rid of IE's default scroll bars. However, when I
tried to add any doctype at all (HTML strict, HTML loose, XHTML
transitional, XHTML strict, etc.), it stopped working. Do I have any
control over IE's scroll bars when using doctypes?

bgold12
Aug 17 '08 #1
6 4587
bgold12 wrote:
I was using quirks mode (without a doctype) and set the overflow CSS
property to :auto for the body tag like so:

<body style="overflow:auto">

And it worked; it got rid of IE's default scroll bars. However, when I
tried to add any doctype at all (HTML strict, HTML loose, XHTML
transitional, XHTML strict, etc.), it stopped working. Do I have any
control over IE's scroll bars when using doctypes?
This sounds like a CSS question rather than an HTML issue, but it's really
gray area.

In the broken mode of operation of old IE browsers, still emulated in newer
versions of the browser (including IE 7) in "quirks" mode, the <body>
element is treated as the root element for purposes of rendering. In the
correct mode, <htmlis the root element.

In the correct mode, the scrollbars you see relate to the <htmlelement.
You can see this by using an IE-specific nonstandard CSS property:
html { background: green; scrollbar-base-color: red }
(In "standards" mode, IE still recognizes such nonstandard properties.)

By default, IE uses a vertical scroll bar for the root element. This is not
describable in standard CSS, which does not distinguish between vertical and
horizontal overflow, but it is still overridable in standard CSS by setting
e.g. overflow: auto, as you have done. Yet, to make this work in "standards"
mode as well, you need to add
html { overflow: auto; }
into your style sheet, because in "standards" mode, <htmlis the root.

Beware that this is just one of many, many differences between quirks and
"standard" mode, and this one wasn't even described in my longish list at
http://www.cs.tut.fi/~jkorpela/quirks-mode.html
though I will add it there.

The bottom line is:
1) Use a standards-conforming doctype for new documents, triggering
"standards" mode.
2) Don't touch old documents by just putting a doctype there, unless you
know what you are doing and you are prepared to spending quite some time
with layout problems.

Yucca

Aug 17 '08 #2
On 2008-08-17, Jukka K. Korpela <jk******@cs.tut.fiwrote:
bgold12 wrote:
>I was using quirks mode (without a doctype) and set the overflow CSS
property to :auto for the body tag like so:

<body style="overflow:auto">

And it worked; it got rid of IE's default scroll bars. However, when I
tried to add any doctype at all (HTML strict, HTML loose, XHTML
transitional, XHTML strict, etc.), it stopped working. Do I have any
control over IE's scroll bars when using doctypes?

This sounds like a CSS question rather than an HTML issue, but it's really
gray area.

In the broken mode of operation of old IE browsers, still emulated in newer
versions of the browser (including IE 7) in "quirks" mode, the <body>
element is treated as the root element for purposes of rendering. In the
correct mode, <htmlis the root element.

In the correct mode, the scrollbars you see relate to the <htmlelement.
They relate to the viewport really. The thing you are really trying to
set overflow on is the viewport, but since the viewport doesn't have an
element, there is a special rule that overflow on the root element is
applied to the viewport instead (you need some way to get certain styles
onto the viewport).

You can't actually set overflow on the root element if you want to.
Consider a document like this:

<html style="border: 10px solid blue; overflow: scroll">
<body style="width: 10000px">
hello
</body>
</html>

You can see that the scrollbars aren't associated with the blue box but
are on the browser viewport. You could put scrollbars on that blue box
if it were a DIV or any normal element, but since it's the root element,
you can't.

Overflow on BODY means overflow on the viewport if overflow on the HTML
element computes to visible (this should happen even in strict mode).

But you are probably right there are some quirks involved here too, and
I'm not familiar with the behaviour of IE.
You can see this by using an IE-specific nonstandard CSS property:
html { background: green; scrollbar-base-color: red }
(In "standards" mode, IE still recognizes such nonstandard properties.)

By default, IE uses a vertical scroll bar for the root element.
[...]

I'm fairly sure you mean for the viewport, not for the root element.
Aug 17 '08 #3
On 08/16/08 11:22 pm, bgold12 wrote:
I was using quirks mode (without a doctype) and set the overflow CSS
property to :auto for the body tag like so:

<body style="overflow:auto">

And it worked; it got rid of IE's default scroll bars. However, when I
tried to add any doctype at all (HTML strict, HTML loose, XHTML
transitional, XHTML strict, etc.), it stopped working. Do I have any
control over IE's scroll bars when using doctypes?
I am not clear why you want to get rid of the scroll bars. If the page
does not fit into the viewport, how is a visitor to see the overflowing
part of the page? Especially scroll down?
If the reason is that the scroll bars are always there regardless of the
size of the viewport, you need to fix your layout.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Aug 17 '08 #4

Jim Moe wrote:
>
I am not clear why you want to get rid of the scroll bars.
The only reason I can see for it is something like a kiosk, where the
visitor doesn't have any browser control at all.

--
Berg
Aug 17 '08 #5
Jim Moe wrote:
> <body style="overflow:auto">
- -
I am not clear why you want to get rid of the scroll bars. If the
page does not fit into the viewport, how is a visitor to see the
overflowing part of the page?
The declaration overflow:auto does not simply remove the scroll bars. It
makes them appear if and only if they are needed. Specifically, it prevents
IE from using an inactive (gray) scrollbar on the right.

Whether it's a good idea is debatable, but it's not at all as bad as e.g.
removing scroll bars and normal browser controls from a new window when
opening it via JavaScript...

Yucca

Aug 17 '08 #6
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-08-17, Jukka K. Korpela <jk******@cs.tut.fiwrote:
In the correct mode, the scrollbars you see relate to the <htmlelement.

They relate to the viewport really. The thing you are really trying to
set overflow on is the viewport, but since the viewport doesn't have an
element, there is a special rule that overflow on the root element is
applied to the viewport instead (you need some way to get certain styles
onto the viewport).

You can't actually set overflow on the root element if you want to.
Consider a document like this:

<html style="border: 10px solid blue; overflow: scroll">
<body style="width: 10000px">
hello
</body>
</html>

You can see that the scrollbars aren't associated with the blue box but
are on the browser viewport. You could put scrollbars on that blue box
if it were a DIV or any normal element, but since it's the root element,
you can't.

Overflow on BODY means overflow on the viewport if overflow on the HTML
element computes to visible (this should happen even in strict mode).

Yes, even if you want scrollbars on the HTML element, you can't get them
as far as I know. It is an illusion when it *seems* to happen. The bars
go on VIEWPORT (to elevate its logical status with the capital letters).

But at least on BODY in some browsers you can get scrollbars to stick -
not so easy in many browsers - and be pinch proof, try this in FF:

<http://netweaver.com.au/alt/browserElement2.html>

--
dorayme
Aug 22 '08 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Arlie Rahn | last post by:
I would like to ad a custom scroll bar control to my app that has a customizable and "flat" look to it (not the normal VB look). Does anyone have any ideas on where to find a good one?
0
by: syed_saqib_ali | last post by:
Please take a look at and run the code snippet shown below. It creates a canvas with vertical & Horizontal scroll-bars. If you shrink the window to smaller than the area of the canvas, the...
4
by: justdummy | last post by:
Hi, I am struggling with a problem for sometimes. I need to display a table in a html and if the height of the table goes beyond 200 px then a vertical scrollbar should alone appear without any...
2
by: Stephen Costanzo | last post by:
I have noticed that if I have a data grid with scrollbars and scroll it off screen and back again that the scroll bars are missing. Thinking that this was just a repaint issue, I attempted to...
0
by: Eric | last post by:
I have a TableLayout that I'm having problems with. I am placing controls in it that have scroll bars. When I put enough of them on the control to make the TableLayout's scroll bars appear the...
2
by: usenet | last post by:
When I open a form design window in Access 2003 it *always* has scroll bars, this is even when the form itself is tiny. It's as if the 'page' on which the form is being designed is very large. ...
69
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...
3
by: zazu | last post by:
We have a database that can be accessed by a small number of users on a small network. The database is on the server. One form has a combo box with a large number of selections. Usually there is a...
1
by: David_from_Chicago | last post by:
I am developing an application in Access 2000 (A2K) which has multiple forms and subforms. Until now, all subforms displayed scroll bars properly (according to the subform's property setting). ...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.