Resizing Div In IE 6

The following is a version of some code I'm having trouble running in IE version 6. It seems to work fine in IE 7, IE 8, FireFox, and Google Chrome. But in IE 6, when I expand and collapse nodes in the treeview, the SurroundingWrapper div resizes, but the message at the bottom stays glued in place (I'd prefer it stayed glued to the bottom of the div SurroundingWrapper). Can someone please tell my why this code falls apart in IE 6?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title>Test Page</title>

    <style type="text/css">

        #SurroundingWrapper
        {
            position: relative;
            border: 1px solid #D0D0D0;
            width: 800px;
            min-height: 20px;
            margin-top: 10px;
            margin-bottom: 20px;
            padding: 20px;
            background-color: White;
            line-height: 1.2em;
        }

        .Message
        {
            position: absolute;
            display: block;
            width: 100%;
            text-align: center;
            font-size: 11px;
            color: Gray;
            bottom: 2px;
            min-height: 0px;
        }

    </style>

    <!--[if lte IE 7]>
        <style type="text/css">

            #SurroundingWrapper
            {
                height: auto !important;
                height: 20px;
            }

            .MessageIe6and7Fix
            {
                width: 100%;
            }

        </style>
    <![endif]-->

    <!--[if lt IE 7]>
        <style type="text/css">

            .MessageIe6Fix
            {
                height: 1px;
            }

        </style>
    <![endif]-->

</head>
<body>
    <form id="form1" runat="server">
    <div id="SurroundingWrapper">
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
        </asp:TreeView>
        <div class="Message MessageIe6and7Fix MessageIe6Fix">
            This is a message at the bottom of the page.</div>
    </div>
    </form>
</body>
</html>

Also, here's the associated sitemap file for the treeview:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/Default.aspx" title="Level 1"  description="">
    <siteMapNode url="~/A.aspx" title="Level A"  description="">
      <siteMapNode url="~/a1.aspx" title="Level a"  description="" />
      <siteMapNode url="~/b1.aspx" title="Level b"  description="" />
    </siteMapNode>
    <siteMapNode url="~/B.aspx" title="Level B"  description="">
      <siteMapNode url="~/a2.aspx" title="Level a"  description="" />
      <siteMapNode url="~/b2.aspx" title="Level b"  description="" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

Many thanks in advance!

Andrew

Ok, after much pain and frustration, I finally achieved the following workable solution:

<div id="SurroundingWrapper"> 
    <div id="SurroundingWrapperWithoutMessage">
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> 
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"> 
        </asp:TreeView> 
    </div>

    <div class="Message"> 
        This is a message at the bottom of the page.</div> 
</div>

I then gave the SurroundingWrapperWithoutMessage div a minimum height, and let the SurroundingWrapper div shrink to contain it and the message at the bottom of the page. This works even for IE 6.

Also, since IE 6 doesn't recognize min-height in CSS, I just used height to specify the vertical dimension of the SurroundingWrapperWithoutMessage div.

Cheers,

Andrew

ansaurus

tags:

views:

answers:

Resizing Div In IE 6

related questions