Bastien MOYET wrote:
> I have a box A of 300px (div for instance) with the overflow set to
> auto, which contains an other box B of 100%. If the height of B is
> lesser than A no scrollbar are displayed, which is OK. However if its
> height is greater than A, a scrollbar appears, which is still OK. But
> in firefox the B clientWidth is normally set to 283px (as stated in
> http://www.quirksmode.org/dom/w3c_cssom.html#t41, this property
> excludes scrollbar) so the B content is reduced, whereas in IE, the
> clientWidth also set to 283px, the B content isn't resized. So some
> content goes under the scrollbar and an horizontal scrollbar appears.
> You can find my test page at the adress
> http://www.fallengalaxy.com/~fedaykin/bloc.html or simply a picture of
> this bug at http://fallengalaxy.com/~fedaykin/scrollbar.png.
> If somebody has some tips to avoid this appearance I would appreciate.
Remove the 'width:100%' and leave the default 'display:block' and
'width:auto' on the div. This will automatically make room for the
scrollbar on the outer div.
If you need to use a table, wrap the table in a div and set the table's
width to 100%, but leave the wrapper div width at auto.
Like this:
~~~
<div style='border:1px solid black;height:200px;overflow:auto;'>
<div style='height:150%;'><!-- Do not set width! -->
<p>Content here will scroll...</p>
</div>
</div>
<div style='border:1px solid black;height:200px;overflow:auto;'>
<div style='height:150%;'><!-- Do not set width! -->
<table style='width:100%;'>
<tbody>
<tr>
<td>Content here will scroll...</td>
</tr>
</tbody>
</table>
</div>
</div>
~~~
Hope it helps.
--Bill
--
<!--
! Bill Brown <macnim...@gmail.com>
! Web Developologist, WebDevelopedia.com
-->
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
