W3C-body overflow:hidden

JavaScript
1

the css line
body { overflow:hidden }

doesn’t work with the W3C standards

is there another way I can get rid of the scroll-bars on the body of the document, and still be W3C compliant?

2

Sure it does.

I’m assuming you only validated it against CSS1 spec, right?

Any particular reason?

body { overflow: hidden; } is part of the CSS2 spec which it really what you should be validating against.
It’s a basic component of CSS2 and as such is supported by (almost?) all modern browsers.

3

Its my first day at trying to make it W3C compliant (I should have done it during, but Eh! too late now)

I put this in my top line

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

My overflow:hidden on a div still works, but not on the body element.

Wrong line? I tried the strict, but it has the same affect…

4

Hmmm, I normally use XHTML but tried it out with the HTML 4.01 Transitional DTD and it still works fine for me.

Can you post your code in context?
Maybe the problem isn’t directly with the css itself.

5

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<body style=“overflow:hidden”>

6

I’m assuming that the code does not appear as you have posted it (with the <body> tag line directly after the DTD)…

Could you post the entire code up until the end of the opening <body> tag, please?


<!DOCTYPE...
...
...
...
...
<body...>

There must be something elsewhere in the code that is causing the css to be ignored.
I’m guessing that the problem is hiding somewhere in the header.

7

The line I gave doesn’t work on its own, but does without the DTD?

I have put the overflow:hidden on the body in an external css
body {overflow:hidden}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[http://www.w3.org/TR/html4/loose.dtd](http://www.w3.org/TR/html4/loose.dtd)">
<html>
<head>
<title>UnitingRhythms Percussion Tutorial Homepage</title>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<META NAME="robots" CONTENT="index follow">
<meta name="keywords" content="uniting rhythms, didgeridoo, didjuridoo, yidaki, drums, hand-drums, handdrums, djembe, charminster, england, great britain, handmade, african, interactivity">
<meta name="description" content="Welcome to the UnitingRhythms percussion tutorial pages. These pages are ideal for people just starting to play percussive instruments. You will find easy to understand animated tutorials on drumming and didjeridoo playing, including how to look after your instruments. We also supply the didjeridoo and d'jembe, as well as other instruments including the marimba and shakers, to the south UK. Based in Bournemouth, UK."> 
<link href="../csspos.css" rel="stylesheet" type="text/css">
<script src="jsindex.js" language="javascript" type="text/javascript">
</script>
</head>
<body onload="bring4wrd('main')" style="overflow:hidden">

I as you can see I have put it in 2 places

8

:confused:

Nope. I can’t see anything there that would cause the overflow declaration to be ignored. It’s all valid and fine.

What browser/version are you using to view it?

I’m stumped.

9

IE6, No available updates
Do those lines work stand alone for you?

10

They do.

I am actually on a mac, so cannot say for sure, but I’ve not heard of any issue with css body overflow on IE6.

I’m sorry that I can’t be more help.

11

Cheers anyway. If those lines work on yours, but not mine, then it must be IE on the PC.

Another quick question. I used to use top.location instead of top.location.href and a friend with a mac couldn’t change page. Was this the only problem? Does the mac NEED top.location.href???

Thanks for you help again…

12

I checked both methods* in IE5.2.2 Mac and Camino 0.7 Mac and they both worked fine.
(* with and without the .href element)

I also played around with both those versions a while back (with specific regard to targeting iframes) and found that some browsers wouldn’t work with the href version.

I think this is the post containing the link to the browser support article:
http://www.sitepointforums.com/showthread.php?postid=545473

I’m not sure if it only referred to use with iframes, but it’s worth reading anyway.

Fwiw, the href version is preferable (where possible) as it should ensure that page changes are logged to the browser history so can therefore be navigated through the back/forward buttons.
Some browser don’t require the href to log page changes to history, but some do.

I hope I haven’t confused you even further. :wink: