PDA

Click to See Complete Forum and Search --> : Applying style to <html> and <body> in IE

Stefan
12-07-2002, 06:18 PM
Hello.

I'm trying to remove the pointless, greyed out, scrollbar on pages that fit on 1 screen in IE 5 and 6.

The CSS to do it is
html, body {overflow-y:auto} however that is invalid CSS so I would like to do it via JS instead specifically for IE.

document.getElementById('blabla').style.overflow = 'auto';

would work (at least on the <div> I tried it on), but I'd like to avoid having to specify ID attributes for the <body> (IE 5.x) and <html> (IE 6) tags on every page.

So how would I do that most easily?

Since this is an IE specific "bugfix" proprietary code will work just fine :)
gil davis
12-07-2002, 06:52 PM
body {overflow: auto}

gets rid of the greyed out bar in IE 5.5, and is valid syntax.
Stefan
12-07-2002, 07:02 PM
Originally posted by Dave Clark
[B]Are you saying that this is invalid?

<body style="overflow:auto;">


No, but unfortunately it breaks in some browsers, not showing aeg positioned parts at the bottom of the page.
And the <html style="overflow:auto;"> is even nastier, and makes the entire page go away in some browse/cases :(.


document.body.style.overflow = "auto";


Duh, should have figured that out by my self :rolleyes:
I'll blame it on that it's 2am right now for me :D

Thanks anyway.
gil davis
12-07-2002, 07:14 PM
I've been looking for a way to modify a stylesheet before the object is rendered without much success.

All my ideas (and Dave's script) only work after the body tag has been rendered. You have call it onload, or insert the script after the closing body tag.

The W3C DOM way would be

document.getElementsByTagName("body")[0].style.overflow = "auto";
Stefan
12-07-2002, 07:33 PM
Originally posted by gil davis

document.getElementsByTagName("body")[0].style.overflow = "auto";

Ahh great, forgot the array [0] stuff when I tried getting it to work earlier.

document.html.style.overflow = "auto"; didn't work in IE 6 so I came back to ask what to try next :)

You have call it onload, or insert the script after the closing body tag.

Yeah, I'm using the following script to work around IE's bugs in positioning relative screen bottom, triggering by onload anyway :)

function IEbugfix()
{
if (document.all && document.getElementById)
{
var totheight = parseInt(document.body.clientHeight); mainHeight = totheight-200-55;
document.getElementById('scrollbox').style.height = mainHeight + 'px';
// IE pointless scrollbar remover
document.body.style.overflow = "auto";
document.getElementsByTagName("html")[0].style.overflow = "auto";
}
}

onresize = function() {IEbugfix();}
Stefan
12-07-2002, 07:36 PM
BTW, how is compability with
document.getElementsByTagName("body")[0].style.overflow = "auto";

in the IE 5.x series?
gil davis
12-07-2002, 07:47 PM
Originally posted by Stefan
BTW, how is compability with
document.getElementsByTagName("body")[0].style.overflow = "auto";
in the IE 5.x series?

I tested it in IE 5.5/Windows '98 before I posted. I don't have 5.0 any more.
Stefan
12-07-2002, 07:53 PM
Originally posted by gil davis
I tested it in IE 5.5/Windows '98 before I posted. I don't have 5.0 any more.

Same problem here.
Only got IE 6 and 5.5 available.

Curse MS for not allowing multiple version on the box without extra software.

A real pain when you have hitrates from IE somewhere along
IE 6 50%
IE 5.5 25%
IE 5.0 25%
on the net
gil davis
12-07-2002, 07:57 PM
Originally posted by Dave Clark
Have you seen this?
http://forums.webdeveloper.com/showthread.php?s=&threadid=156
...
you ought to be able to reference the elements within the stylesheet

Yes. It confirms my trauma.

In NS4, you can get to the current styles using javascript. Either

document.tags["body"]

or

document.classes["mybody"]

All style sheets are "glued" into one big one. You have to make any changes *before* the object is rendered.

In IE, each occurrence of a <STYLE> tag is a stylesheet and they can be disabled. So you have to hunt for the one that is enabled and then hunt for the rule in the cssText. Something like:

document.styleSheets[n].rules[n].style

I was hoping it would be a little more direct.
Stefan
12-07-2002, 07:59 PM
Originally posted by Dave Clark
Why are you trying to apply a style to the HTML tag element?

Dave

Becuse in IE 6 you need to apply the CSS to the <html> element to remove the greyed out scrollbar.

<html> takes other styles too like background and margins etc (in a correctly working browser).
It's one of the CSS bugs MS finaly managed to fix with IE 6 (in pre IE 6 you can't style <html> at all IIRC)
Stefan
12-07-2002, 08:30 PM
Originally posted by Dave Clark
Have you tried this?


Nope, I was trying to avoid classes and ID's compleatly (I'm lazy when I code :D)

Anyway what gil posted worked just fine in IE 6
document.getElementsByTagName("html")[0].style.overflow = "auto";

That was what I tried myself before I asked on this forum except I forgot the [0] part :rolleyes:
It's always the small things that get you :D