Get rid of scroll bars in IE strict

#1 August 17th, 2008, 07:25 AM

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

#2 August 17th, 2008, 12:45 PM

bgold12 wrote:

Quote:

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

#3 August 17th, 2008, 06:55 PM

On 2008-08-17, Jukka K. Korpela <jkorpela@cs.tut.fiwrote:

Quote:

bgold12 wrote:
>

Quote:

>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.

Quote:

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.

#4 August 17th, 2008, 06:55 PM

On 08/16/08 11:22 pm, bgold12 wrote:

Quote:

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)

#5 August 17th, 2008, 07:25 PM

Jim Moe wrote:

Quote:

>
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

#6 August 17th, 2008, 09:15 PM

Jim Moe wrote:

Quote:

> <body style="overflow:auto">

- -

Quote:

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

#7 August 22nd, 2008, 01:55 AM

In article <slrngagm36.9s5.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggswrote:

Quote:

On 2008-08-17, Jukka K. Korpela <jkorpela@cs.tut.fiwrote:

Quote:

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

What is Bytes?

Popular Articles