Hi,
I'm having a strange problem getting some simple code to work on Firefox (Mac). It works fine in Safari and all major PC browsers...
I have a hidden DIV that is full of scrolling content and I have set "overflow: auto" so that it scrolls within the div. The DIV hides fine on all browsers but Firefox where the scrollbar (but none of the content) displays.
I have searched everywhere online for an answer but can't seem to find any bugs reported about Firefox displaying the scrollbars of hidden DIVs. I expect there's something fundamental wrong with my code. I'd be very grateful for any pointers. Below is the code I'm having trouble with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
.content {
color: white;
padding: 10px 10px 10px 10px;
height: 300px;
width: 300px;
visibility: hidden;
background-color: green;
overflow: auto;
}
-->
</style>
<script type="text/javascript">
<!--
function showhide(sublink) {
if(document.getElementById(sublink).style.visibility == 'hidden')
{
document.getElementById(sublink).style.visibility = 'visible';
}
else
{
document.getElementById(sublink).style.visibility = 'hidden';
}
}
// -->
</script>
<title>Mac Scrollbar Firefox Issue with hidden div, overflow: auto</title>
</head>
<body>
<a href="Javascript:showhide('divtest')">Click to show hidden div</a>
<div id="divtest" class="content" style="visibility: hidden;">
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac?? On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
</div>
</body>
</html>
I'm having a strange problem getting some simple code to work on Firefox (Mac). It works fine in Safari and all major PC browsers...
I have a hidden DIV that is full of scrolling content and I have set "overflow: auto" so that it scrolls within the div. The DIV hides fine on all browsers but Firefox where the scrollbar (but none of the content) displays.
I have searched everywhere online for an answer but can't seem to find any bugs reported about Firefox displaying the scrollbars of hidden DIVs. I expect there's something fundamental wrong with my code. I'd be very grateful for any pointers. Below is the code I'm having trouble with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
.content {
color: white;
padding: 10px 10px 10px 10px;
height: 300px;
width: 300px;
visibility: hidden;
background-color: green;
overflow: auto;
}
-->
</style>
<script type="text/javascript">
<!--
function showhide(sublink) {
if(document.getElementById(sublink).style.visibility == 'hidden')
{
document.getElementById(sublink).style.visibility = 'visible';
}
else
{
document.getElementById(sublink).style.visibility = 'hidden';
}
}
// -->
</script>
<title>Mac Scrollbar Firefox Issue with hidden div, overflow: auto</title>
</head>
<body>
<a href="Javascript:showhide('divtest')">Click to show hidden div</a>
<div id="divtest" class="content" style="visibility: hidden;">
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac?? On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
On the PC (Firefox, Opera, IE) and Safari for the Mac, this div is hidden and the scrollbar is hidden too. How do I stop a disembodied scrollbar from appearing on Firefox for Mac??
</div>
</body>
</html>