Accordion scroll bar missing in IE6

Question

As soon as I specify a width for an accordion- .Accordion {
width:275px;} -, the vertical scroll bars disappear. Why is
that and
what can be done about it?

Answer 1

I was able to find the problem, which I believe is an IE6
overflow
issue. By default, SpryAccordion.css sets the Accordion
container to
overflow:hidden; and in IE6 as soon as you specify a width,
scrollbars
are also hidden. So to overcome this problem I needed to
remove
overflow:hidden; from the Accordion container but leave
overflow:auto;
on for AccordionPanelContent.
That solved the problem of not seeing the scrollbars and I
was now able
to control the width of the accordion. However, because IE6
places the
scrollbar outside of the container it is scrolling, the
scrollbar was
hanging out to the right of the accordion and the panel tabs
ended
abruptly at the scrollbar left edge. This meant that the
background
color of the panel tabs stopped before reaching the edge of
the
accordion div. I solved this issue by setting the right
margin of the
AccordionPanelTab to -16px only for IE6 and below using the
underscore
hack. Here's an excerpt of my AccordionPanelTab declarations:
margin: 0; /* for compliant browsers */
_margin: 0 -16px 0 0; /* to fix for ie6 & below */
Of course this is not a perfect solution because the
accordions have
different widths depending on whether or not they have
scrollbars, but
this is the best solution given the shortcomings of IE6. I
hope this
helps others.