Internet explorer css overflow Problem

Question

Hi all,

I wanted to know if there was a way to fix scrollbar issue i'm having with ie7.

Here is my CSS

.gridContainer
{
height: 500px; 
width: 410px;
background-color:#fff;
border:1px solid #6699CC;
overflow:auto; 
}
.Grid {background-color:#fff;width:100%;}
.Grid td
{
border-top:1px solid #C4DDFF;
height:13px;
min-width:30px;
text-align:left;
padding-left:5px;
}
.GridHeader
{
font-weight: bold;
height:20px;
text-align:left;
padding-left:10px;
min-width:30px;
background-color:#F0F0F0;
border-bottom:#999;
}

and here is the html

<div class="gridContainer">
            <asp:GridView ID="GridView2" runat="server" GridLines="None" CssClass="Grid"  AutoGenerateColumns="False" 
                AllowSorting="True" onsorting="GridView2_Sorting">
                <RowStyle CssClass="GridItem" />
                <Columns>
                    <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSelect" runat="server" />
                    </ItemTemplate>
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkSelectAll" runat="server" onclick="SelectAll2(this);" />
                    </HeaderTemplate>
                </asp:TemplateField>                    
                    <asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="True" 
                        SortExpression="Name" />
                    <asp:BoundField DataField="Position Type" HeaderText="Position Type" 
                        SortExpression="Position Type" />
                </Columns>
                <HeaderStyle CssClass="GridHeader" />
                <AlternatingRowStyle CssClass="GridAltItem" />
            </asp:GridView>
        </div>

It works fine in other browsers, but for some reason not in ie7.

Edited for clarification: Heres what i'm trying to accomplish. There is a div with a fixed width and height and inside of the div there is a gridview. If the gridview's width or height exceeds the fixed length/ width of the div i'd like the scroll bars to appear on the div.

Thanks in advance

Answer 1

In your .gridContainer class set overflow: scroll;

This will add scroll bars to the div if the inside content grows past its set width or height.