Forum Moderators: not2easy
+------------------+
¦+------------------------+
¦¦.................¦,,,,¦^¦
¦¦.................¦,,,,¦:¦
¦¦.................¦,,,,¦:¦
¦¦.................¦,,,,¦:¦
¦¦.................¦,,,,¦:¦
+------------------+,,,,¦:¦
¦,,,,,,,,,,,,,,,,,,,,,,¦:¦
¦,,,,,,,,,,,,,,,,,,,,,,¦:¦
¦______________________¦V¦
¦<::::::::::::::::::::>¦X¦
+------------------------+
In the diagram above:
. = visible content area
, = hidden content area
: = hidden scrollbar
The problem is that for Firefox on the Mac, the scrollbar shows through even though it is hidden. It works correctly in IE and Firefox on the PC, it is only on the Mac where this is a problem. Does anyone know of a workaround? Below is the test case. Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<style type="text/css">
#mask {
position: relative;
background-color: #ccc;
width: 100px;
height: 100px;
overflow: hidden;
}
#scrollableContent {
position: absolute;
top: 0;
left: 0;
width: 120px; /* big enough to hide scrollbar */
height: 120px; /* big enough to hide scrollbar */
overflow: auto;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="mask">
<div id="scrollableContent">
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
</div>
</div>
</body>
</html>
+-----------------+
¦1. ...~~~~~~~~~~~¦
¦2. ...~~~~~~~~~~~¦
¦3. ...~~~~~~~~~~~¦
¦4. ...~~~~~~~~~~~¦
¦5. ...~~~~~~~~~~~¦
¦6. ...~~~~~~~~~~~¦
+-----------------+
I see something like this (on the Mac only):
+-----------------+
¦1. ...~~~~~~~~~~~¦ ¦^¦
¦2. ...~~~~~~~~~~~¦ ¦:¦
¦3. ...~~~~~~~~~~~¦ ¦:¦
¦4. ...~~~~~~~~~~~¦ ¦:¦
¦5. ...~~~~~~~~~~~¦ ¦:¦
¦6. ...~~~~~~~~~~~¦ ¦:¦
+-----------------+ ¦:¦
,,,,,,,,,,,,,,,,,,,,¦V¦
have you tried using a right/bottom border of 20px (on #mask) instead of the extra width/height to see if that covers the scrollbar? Though it's just a thought I don't think it will make a difference but might be worth a try. I wonder if this a z-index thing (for the scroll bar) - like IE's windowed controls, but how to get the scrollable div under the mask and still have it scroll?
maybe placing the mask on top of the scrollbar (enforced by z-index) would do it, but unless the scroll still works through the transparency not hopeful for that either
I'll give your border suggestion a try tomorrow. Thanks for the suggestion.
