0

i have a problem with overflow:hidden and the body tag. Here is a little exmaple

Body version (dont work) 

<body style="border: 1px solid #ff0000; width:100%; height:200px; overflow:hidden;">
    <div style="width:50px; height:50px; border: 1px solid #0000ff; position:absolute; top-10px;"></div>
</body>

http://jsfiddle.net/5hGSp/13/

DIV version (works) 

    <div style="border: 1px solid #ff0000; width:100%; height:200px; overflow:hidden;">
        <div style="width:50px; height:50px; border: 1px solid #0000ff; position:absolute; top-10px;"></div>
</div>

http://jsfiddle.net/5hGSp/12/

What is the problem?
When you click (middle mousekey) into the red area -> the mouse-software start the scrollfunction. enter image description here

... but only in the "body version" !

Hope someone can help me.

Thanks in advance!
Peter



EDIT:
Sry, it is very hard to me to explain it in english. But i try it again.

1) Copy the code into an .*html file.
2) Open the file and click (middle mousekey) into the body tag (red area).
3) Did the mousescroll function start? ...did you see an scroll icon (for example from the logitech software?)
4a) if not, everything works fine
4b) you see the icon? You know how to disable? -> write a comment pls 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
    border: 1px solid #ff0000;
    width:100%;
    height:200px;
    overflow:hidden;
}
</style>
</head>

<body>
<div style="width:50px; height:50px; border: 1px solid #0000ff; position:absolute; top:-10px;"></div>
</body>
</html>
Josh Darnell
  • 11,304
  • 9
  • 38
  • 66
Peter
  • 11,413
  • 31
  • 100
  • 152
  • 3
    You should not put `` tags in jsfiddle. It will already embed everything in `` tags, so you have two nested `` tags now. Don't know how the browsers handle this. Create a version by using CSS rules (besides that, nothing is scrolling for me and I don't really understand why your problem is a problem ;)). – Felix Kling Feb 15 '11 at 12:25
  • Hi Felix King. Thx for you fast answer! Did you use any special mousesoftware? Like Logitech – Peter Feb 15 '11 at 13:15
  • Body is not a block element. You can specify the overflow if you don't want to see scrollbars, but neither height or border will work. – Nabab Feb 15 '11 at 13:16
  • 1
    Is there a reason you need it to work with ``? From what I understand, it's not really meant for this kind of use - why not just use a `
    `?
     – Jeriko Feb 15 '11 at 13:17
  • 1
    @Peter: No, I tried it in Google Chrome. This functionally does not seem supported in Chrome (at least for Mac OS X). – Felix Kling Feb 15 '11 at 13:46
  • (to not see the wood for the trees)Hei Jeriko, the simple DIV solution works fine. Thank you very much for the fast answer! – Peter Feb 15 '11 at 13:47
  • I know it's rather offtopic, but seriously, what's up with all the people today wanting to do styling on the `body` element? I barely saw these kinds of questions at all, and today I saw 5! – Madara's Ghost Jan 03 '12 at 20:29
  • Unless this was another one of Chrome's bugs, Nabab's comment is incorrect. `body` is most definitely a block element and can be styled with height or borders just fine. See examples [here](http://stackoverflow.com/questions/15461967/div-and-body-different-behavior) and [here](http://stackoverflow.com/questions/27679150/css-apply-overflow-hidden-to-body). – BoltClock Dec 29 '14 at 03:49

1 Answers1

-1

Nabab wrote:

Body is not a block element.

Peter
  • 11,413
  • 31
  • 100
  • 152