This scrolling Div is not working in Firefox. What's weird is that I've not had this problem before, so I'm sure it's just some typo I can't see.
Here's the link:http://www.stansight.com/tmp.html
Here's the code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.scrollContent {
height:24px;
width:200px;
border:1px solid black;
overflow-x:hidden;
overflow-y:scroll;
}
.checkBoxContainer {
height:24px;
width:200px;
border:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="scrollContent">
<form action="junk.jsp">
<table class="checkBoxContainer">
<tr><td><input type="checkbox" name="BlahBlah1" value="1">Check Me 1</td></tr>
<tr><td><input type="checkbox" name="BlahBlah2" value="2">Check Me 2</td></tr>
<tr><td><input type="checkbox" name="BlahBlah3" value="3">Check Me 3</td></tr>
<tr><td><input type="checkbox" name="BlahBlah4" value="4">Check Me 4</td></tr>
<tr><td><input type="checkbox" name="BlahBlah5" value="5">Check Me 5</td></tr>
</table>
</form>
</div>
</body>
</html>I thought overflow-x and overflow-y where css3 properties not yet supported ?Either that, or bear in mind that a scrollbar-controller is more than 24-pixels tall (a scrollbar is by default, 20-pixels tall), so declaring a height of 24-px is asking for an 'up arrow' that is 12-px tall, and a 'down arrow' that is 12-px tall, -something that is not possible for Firefox to give you (while IE on the otherhand, obliges to do it wrong to please you).
Try this instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.scrollContent {
position:relative; display:block;
height:40px;
width:200px;
border:1px solid black;
overflow-x:hidden;
overflow-y:auto;
}
.checkBoxContainer {
position:relative; display:block;
height:40px;
width:200px;
border:0
padding:0px;
overflow-x:hidden;
overflow-y:auto;
}
</style>
</head>
<body>
<div class="scrollContent" >
<form action="junk.jsp">
<table class="checkBoxContainer">
<tr><td><input type="checkbox" name="BlahBlah1" value="1">Check Me 1</td></tr>
<tr><td><input type="checkbox" name="BlahBlah2" value="2">Check Me 2</td></tr>
<tr><td><input type="checkbox" name="BlahBlah3" value="3">Check Me 3</td></tr>
<tr><td><input type="checkbox" name="BlahBlah4" value="4">Check Me 4</td></tr>
<tr><td><input type="checkbox" name="BlahBlah5" value="5">Check Me 5</td></tr>
<!-- I added some more ROWS -->
<tr><td><input type="checkbox" name="BlahBlah3" value="3">Check Me 6</td></tr>
<tr><td><input type="checkbox" name="BlahBlah4" value="4">Check Me 7</td></tr>
<tr><td><input type="checkbox" name="BlahBlah5" value="5">Check Me 8</td></tr>
</table>
</form>
</div>
</body>...so declaring a height of 24-px is asking for an 'up arrow' that is 12-px tall, and a 'down arrow' that is 12-px tall, -something that is not possible for Firefox to give you (while IE on the otherhand, obliges to do it wrong to please you)....
That was it. The magic number seems to be 32. Any smaller and Firefox will *not* show a scroll bar.
I don't think that IE does it *wrong* because I'm not aware of anything in the W3 recommendations that mandate specific heights for scroll bar controls. IE simple shrinks the controls to fit. More of a liquid layout concept that will work better with all the different device types out there in the cell phone world.
I wonder what Opera and Safari do ? (Opera Mini is currently a popular cell phone browser and Safari will be used by Apples new iPhones)...I don't think that IE does it *wrong* because I'm not aware of anything in the W3 recommendations that mandate specific heights for scroll bar controls. IE simple shrinks the controls to fit. ...-and IE incorrectly expands a container to contain text that 'overflows', -even if coded incorrectly.
I would not bet for nor against that IE 'is doing it correctly', but given IE's history, I'd lean towards them having it wrong (despite the results pleasing the inept coder).
-Example" Try putting the STYLE body {margin-bottom:50px;} on IE, for intance. You will not get it to work. IE refuses to accept a "bottom margin" on "body", so you are forced to use "padding-bottom:50px;" on BODY instead (which ALL browsers will accept). This is incorrect behaviour on the part of IE and (amongst, -oh I dunno... -a hundred and one more things I could probably name) works to tarnish their reputation as being the buggiest browser out there.
IE isn't alone... other browsers do unexpected things too. Netscape seemed to add the width of the vertical scrollbar to the width of the body, often causing a mysterious 20-pixel discrepancy in real-estate-tight designs...
I too doubt if W3C cares about controller-height/width. This is governed by the specific browser's shell or chrome, and possibly stating something less-than their ("browser's") smallest default causes an 'overflow error' or something, resulting in a negated output (??, -I mean by this, size too little returns "0" or "null", so you get "nothing")
Anyway, ~32-px. -Yes (I tried that more after I signed-off), around 32-px seems to be the cut-off point whether Fx showed or didn't show the scrollbar controller arrows)....Try putting the STYLE body {margin-bottom:50px;} on IE, for intance. You will not get it to work. IE refuses to accept a "bottom margin" on "body",...Strange - works same way for me in Firefox and IE7 - <!-- m --><a class="postlink" href="http://localhost/stansight/tmp2.html">http://localhost/stansight/tmp2.html</a><!-- m -->
You scroll down the page and see 50 pixels of white space on the bottom of the page after the scroll bar goes down as far as it can.Strange - works same way for me in Firefox and IE7 - <!-- m --><a class="postlink" href="http://localhost/stansight/tmp2.html">http://localhost/stansight/tmp2.html</a><!-- m -->
You scroll down the page and see 50 pixels of white space on the bottom of the page after the scroll bar goes down as far as it can.
Hurrah! -MS/IE finally fixed something.
Try it in IE6 and under...
I had IE7 for about 3-hours and it was messing up bad enough that I un-installed it (and again, -hurrah for MS/IE for they finally included an un-installer, -and it actually worked. Typically, any 'upgrade' from the will not uninstall unless you go into registry and other 'hidden folder' and take it out yourself...).
Here's the link:http://www.stansight.com/tmp.html
Here's the code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.scrollContent {
height:24px;
width:200px;
border:1px solid black;
overflow-x:hidden;
overflow-y:scroll;
}
.checkBoxContainer {
height:24px;
width:200px;
border:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="scrollContent">
<form action="junk.jsp">
<table class="checkBoxContainer">
<tr><td><input type="checkbox" name="BlahBlah1" value="1">Check Me 1</td></tr>
<tr><td><input type="checkbox" name="BlahBlah2" value="2">Check Me 2</td></tr>
<tr><td><input type="checkbox" name="BlahBlah3" value="3">Check Me 3</td></tr>
<tr><td><input type="checkbox" name="BlahBlah4" value="4">Check Me 4</td></tr>
<tr><td><input type="checkbox" name="BlahBlah5" value="5">Check Me 5</td></tr>
</table>
</form>
</div>
</body>
</html>I thought overflow-x and overflow-y where css3 properties not yet supported ?Either that, or bear in mind that a scrollbar-controller is more than 24-pixels tall (a scrollbar is by default, 20-pixels tall), so declaring a height of 24-px is asking for an 'up arrow' that is 12-px tall, and a 'down arrow' that is 12-px tall, -something that is not possible for Firefox to give you (while IE on the otherhand, obliges to do it wrong to please you).
Try this instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.scrollContent {
position:relative; display:block;
height:40px;
width:200px;
border:1px solid black;
overflow-x:hidden;
overflow-y:auto;
}
.checkBoxContainer {
position:relative; display:block;
height:40px;
width:200px;
border:0
padding:0px;
overflow-x:hidden;
overflow-y:auto;
}
</style>
</head>
<body>
<div class="scrollContent" >
<form action="junk.jsp">
<table class="checkBoxContainer">
<tr><td><input type="checkbox" name="BlahBlah1" value="1">Check Me 1</td></tr>
<tr><td><input type="checkbox" name="BlahBlah2" value="2">Check Me 2</td></tr>
<tr><td><input type="checkbox" name="BlahBlah3" value="3">Check Me 3</td></tr>
<tr><td><input type="checkbox" name="BlahBlah4" value="4">Check Me 4</td></tr>
<tr><td><input type="checkbox" name="BlahBlah5" value="5">Check Me 5</td></tr>
<!-- I added some more ROWS -->
<tr><td><input type="checkbox" name="BlahBlah3" value="3">Check Me 6</td></tr>
<tr><td><input type="checkbox" name="BlahBlah4" value="4">Check Me 7</td></tr>
<tr><td><input type="checkbox" name="BlahBlah5" value="5">Check Me 8</td></tr>
</table>
</form>
</div>
</body>...so declaring a height of 24-px is asking for an 'up arrow' that is 12-px tall, and a 'down arrow' that is 12-px tall, -something that is not possible for Firefox to give you (while IE on the otherhand, obliges to do it wrong to please you)....
That was it. The magic number seems to be 32. Any smaller and Firefox will *not* show a scroll bar.
I don't think that IE does it *wrong* because I'm not aware of anything in the W3 recommendations that mandate specific heights for scroll bar controls. IE simple shrinks the controls to fit. More of a liquid layout concept that will work better with all the different device types out there in the cell phone world.
I wonder what Opera and Safari do ? (Opera Mini is currently a popular cell phone browser and Safari will be used by Apples new iPhones)...I don't think that IE does it *wrong* because I'm not aware of anything in the W3 recommendations that mandate specific heights for scroll bar controls. IE simple shrinks the controls to fit. ...-and IE incorrectly expands a container to contain text that 'overflows', -even if coded incorrectly.
I would not bet for nor against that IE 'is doing it correctly', but given IE's history, I'd lean towards them having it wrong (despite the results pleasing the inept coder).
-Example" Try putting the STYLE body {margin-bottom:50px;} on IE, for intance. You will not get it to work. IE refuses to accept a "bottom margin" on "body", so you are forced to use "padding-bottom:50px;" on BODY instead (which ALL browsers will accept). This is incorrect behaviour on the part of IE and (amongst, -oh I dunno... -a hundred and one more things I could probably name) works to tarnish their reputation as being the buggiest browser out there.
IE isn't alone... other browsers do unexpected things too. Netscape seemed to add the width of the vertical scrollbar to the width of the body, often causing a mysterious 20-pixel discrepancy in real-estate-tight designs...
I too doubt if W3C cares about controller-height/width. This is governed by the specific browser's shell or chrome, and possibly stating something less-than their ("browser's") smallest default causes an 'overflow error' or something, resulting in a negated output (??, -I mean by this, size too little returns "0" or "null", so you get "nothing")
Anyway, ~32-px. -Yes (I tried that more after I signed-off), around 32-px seems to be the cut-off point whether Fx showed or didn't show the scrollbar controller arrows)....Try putting the STYLE body {margin-bottom:50px;} on IE, for intance. You will not get it to work. IE refuses to accept a "bottom margin" on "body",...Strange - works same way for me in Firefox and IE7 - <!-- m --><a class="postlink" href="http://localhost/stansight/tmp2.html">http://localhost/stansight/tmp2.html</a><!-- m -->
You scroll down the page and see 50 pixels of white space on the bottom of the page after the scroll bar goes down as far as it can.Strange - works same way for me in Firefox and IE7 - <!-- m --><a class="postlink" href="http://localhost/stansight/tmp2.html">http://localhost/stansight/tmp2.html</a><!-- m -->
You scroll down the page and see 50 pixels of white space on the bottom of the page after the scroll bar goes down as far as it can.
Hurrah! -MS/IE finally fixed something.
Try it in IE6 and under...I had IE7 for about 3-hours and it was messing up bad enough that I un-installed it (and again, -hurrah for MS/IE for they finally included an un-installer, -and it actually worked. Typically, any 'upgrade' from the will not uninstall unless you go into registry and other 'hidden folder' and take it out yourself...).