Question

I’ve got a weird problem in IE7 (I mean IE8 compatibility mode) where the scrollbars in a div appear behind the its content. It’s in a jQueryUI modal dialog that takes up most of the screen and has a lot of stuff in it. The div contains an ASP:Repeater that renders customized rows in a grid-style layout.

The full markup for the div is this:

<div style='max-height:250px; overflow-y:scroll;
border:1px solid #AAAAAA; border-top-width:0; margin-left:auto;
margin-right:auto;'>
  <asp:Repeater ID="myRepeater" runat="server">
     <ItemTemplate>
        <asp:Panel ID="pnlItem" runat="server" style='padding-top:5px;
           padding-bottom:5px; position:relative;'>
           .....
        </asp:Panel>
     </ItemTemplate>
  </asp:Repeater>
</div>

Here is a screenshot of the problem. The gray that covers the vertical scrollbar is the alternating background color set via a class on pnlItem. The text below (“H.S. Gym”) is part of the bottom pnlItem in the repeater. Additionally, when I move one of the scrollbars, the content doesn’t move until I move the modal dialog around.

I don’t know what to do here. It seems like a really random rendering bug that will have an equally random solution. Google has not been of any help. What’s going on here?

EDIT 10/7/2011: I solved the overlapping scrollbars issue by setting an explicit width on the div. Now the vertical scrollbar appears properly in IE7, but when I use it to scroll, the scroll position of the content doesn’t update until I grab the modal by its title bar and move it within the browser screen. I’ve updated the title of this question to reflect this.

Answer 1

Turns out that the problem was position:relative on the pnlItem control at the root of each Repeater item. In IE7, that causes the scrollbar to not work. I had that set so I could get some layout stuff inside each pnlItem to work, but I ended up doing it differently and so was able to remove that style attribute and make it work.