Question

I ran into the alignment issues with IE6.Code works just fine with IE8.I have no other option but to support IE6.

Description:

My web page contains two pages.

Issue with page1(IE6):

I have two panels in the page1 which carry a grid view each.I want to place the panels with some grouping text in the page .As the grid view data keeps growing i want to keep the both panels aligned horizontally one at left side of the page and one at right side of the page.So it works exactly in IE8 but when i switch to IE6 the panels are aligning themselves vertically on above the other.

Here is the code

<div>
     <div style="float: left">
            <table width="100%">
                <tr>
                    <td>
                        <asp:Panel ID="pnlUsers" runat="server" GroupingText="UserDetails "Wrap="true">

                        </asp:Panel>
                    </td>
                </tr>
            </table>

        </div>



 <div style="float: right">
            <table align="center" width="100%">
                <tr>
                    <td>
                        <asp:Panel ID="pnlLocation" runat="server" GroupingText="Location Details" Wrap="true">

                        </asp:Panel>
                    </td>
                </tr>
            </table>
        </div>
</div>

Issue with Page2(IE6)

So in this page the max height of the panel is not taken and its extends vertically irrespective of the max height set to the panel!!!

    <asp:Panel ID="pnlAge" runat="server"  ScrollBars="Vertical" Width="100%"
            HorizontalAlign="Center" CssClass="pnlAlignmentClass">

            <asp:GridView runat="server" ID="gvages" AutoGenerateColumns="False" CellPadding="4"  Width="100%">
</asp:GridView>

        </asp:Panel>

CSS:

.pnlAlignmentClass
    {
        max-height: 310px;
        overflow: auto;
    }

I would appreciate if some one can suggest the right path .

Answer 1

IE6 does not support max-height. You can use regular height, but in IE6 it actually behaves like min-height.

To do max-height in ie6, follow this link: http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

* html div#division { 
   height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}

div#division {
   max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}