CSS position problem in IE6_问答_开发者_运维开发者技术经验分享

I have some CSS code with a header, footer, left menu pane, and content. The layout is working on all browsers except IE6. In IE6 the linksPanel div does not render correctly within the masterContent div. I believe it has something to do with the position element. I've looked at a bunch of articles but have not been able to find a solution that works. Unfortunately I have to support IE6 and need a solution. Code is below. Any help would be greatly appreciated!

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
        .masterContent
        {
            position:fixed;
            top:178px;
            bottom:42px;
            left:0px; 
            right:0px; 
            overflow:auto; 
            background:#fff;
        } 
        .linksPanel
        {
            position:absolute; 
            top:0px;
            left:10px;
            bottom:0px;  
            width:254px;
            overflow:auto; 
            background:#f4f4f3;
            line-height:20px;
            padding:5px;
        }
        .mainPanel 
        {
            position:absolute; 
            top:5px;
            bottom:0px;
            right:10px;
            width:70%;
            overflow:auto;
            padding-left:10px;
            padding-bottom:0px;
        }    
        .footerPanel
        {
            position:absolute; 
            bottom:0px; 
            left:0px;
            padding:0px;
            margin:0px;
          开发者_Go百科  width:100%;
            height:44px;
            text-align:right;
            overflow:hidden;
            background:#f4f4f3;
            z-index:100;
        }            
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table border="0" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td valign="top">
                    <div class="headerPanel">    
                        <p>Header stuff here.</p>
                        <p>More header stuff here.</p>
                    </div>      
                </td>
            </tr>
        </table>                     
        <div class="masterContent">
            <div class="linksPanel">
                <p><a href="error.aspx">Link1</a></p>
                <p><a href="error.aspx">Link2</a></p>
                <p><a href="error.aspx">Link3</a></p>
                <p><a href="error.aspx">Link4</a></p>
                <p><a href="error.aspx">Link5</a></p>
                <p><a href="error.aspx">Link6</a></p>
                <p><a href="error.aspx">Link7</a></p>
                <p><a href="error.aspx">Link8</a></p>
                <p><a href="error.aspx">Link9</a></p>
                <p><a href="error.aspx">Link10</a></p>
                <p><a href="error.aspx">Link11</a></p>
                <p><a href="error.aspx">Link12</a></p>
                <p><a href="error.aspx">Link1</a></p>
                <p><a href="error.aspx">Link2</a></p>
                <p><a href="error.aspx">Link3</a></p>
                <p><a href="error.aspx">Link4</a></p>
                <p><a href="error.aspx">Link5</a></p>                
                <p><a href="error.aspx">Link6</a></p>
                <p><a href="error.aspx">Link7</a></p>
                <p><a href="error.aspx">Link8</a></p>
                <p><a href="error.aspx">Link9</a></p>
                <p><a href="error.aspx">Link10</a></p>
                <p><a href="error.aspx">Link11</a></p>
                <p><a href="error.aspx">Link12</a></p>                
            </div>
            <div class="mainPanel">
                <p>test content</p>
                <p>test more content</p>
                <p>test</p>
                <p>test</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>        
        </div>
        <table border="0" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td valign="top">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>        
                                <div class="footerPanel">    
                                    <p>Footer stuff here.</p>
                                </div>        
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>                                
    </form>
</body>
</html>

This is a very strange design and I have seen some strange designs indeed.

You are putting everthing in a <form> element and by everything, I mean everything including the header, div#masterContent and footer.
Than you are using tables and I have no idea why. Everying that you have done with tables can be done with divs.
You are giving you div.masterContent a position:fixed with a top:178px and bottom: 42px. Are you familiar with the positioning concepts in CSS? When you give any element a position of fixed, that element remains on the screen regardless if you scroll down. Is that what you want, and if you do, I can not imagine what kind of a page it will be.
You are giving your div.linksPanel a position of absolute with a top: 0, bottom: 0 and left: 10px. As i said this does not make sense in any way. How can it be 0 from the top as well as 0 from the bottom. These offset properties are set by using top-left, top-right or bottom-left, bottom-right.
Your div.mainPanel has the same issues.

I think, either you have totally missunderstood CSS Positioning and Layouts, or I have utterly failed to understand it. Maybe this is what you are looking for.

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

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">

 <head runat="server">
 <title>Document Template</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <link rel="stylesheet" type="text/css" href="basic.css" />
 </head>

 <body>

<div id="wrapper">

    <form id="form1" runat="server">

        <div id="header">
            <p>Header Stuff Here</p>
            <p>More Header Stuff Here</p>
        </div>

        <div id="content">
            <div id="links_panel">
                <p><a href="error.aspx">Link1</a></p>
                <p><a href="error.aspx">Link2</a></p>
                <p><a href="error.aspx">Link3</a></p>
                <p><a href="error.aspx">Link4</a></p>
                <p><a href="error.aspx">Link5</a></p>
                <p><a href="error.aspx">Link6</a></p>
                <p><a href="error.aspx">Link7</a></p>
                <p><a href="error.aspx">Link8</a></p>
                <p><a href="error.aspx">Link9</a></p>
                <p><a href="error.aspx">Link10</a></p>
                <p><a href="error.aspx">Link11</a></p>
                <p><a href="error.aspx">Link12</a></p>
                <p><a href="error.aspx">Link1</a></p>
                <p><a href="error.aspx">Link2</a></p>
                <p><a href="error.aspx">Link3</a></p>
                <p><a href="error.aspx">Link4</a></p>
                <p><a href="error.aspx">Link5</a></p>
                <p><a href="error.aspx">Link6</a></p>
                <p><a href="error.aspx">Link7</a></p>
                <p><a href="error.aspx">Link8</a></p>
                <p><a href="error.aspx">Link9</a></p>
                <p><a href="error.aspx">Link10</a></p>
                <p><a href="error.aspx">Link11</a></p>
                <p><a href="error.aspx">Link12</a></p>
            </div>

            <div id="main_panel">
                <p>test content</p>
                <p>test more content</p>
                <p>test</p>
                <p>test</p>
                <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem
                </p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>

            </div>

            <br />
        </div>

        <div id="footer_panel">
            <p>Footer stuff here.</p>
        </div>
    </form>
</div>

With the following CSS

/* START - BASIC CSS */

/* START - CSS Reset */
*
{
margin: 0;
padding: 0;
}

p
{
line-height: 20px;
margin: 20px 0;
}
/* END - CSS Reset */

/* START - div wrapper */
div#wrapper
{
margin: 0 auto;
width: 960px;
border: 1px solid black;
}
/* END - div wrapper */

/* START - hack for "margin: auto" for IE6*/
body
{
text-align: center;
}

div#wrapper
{
text-align: left;
}
/* END - hack for "margin: auto" for IE6*/

/* START - form form1 */
form#form1
{
}
/* END - form form1 */

/* START - div header */
div#header
{
border: 1px solid black;
}
/* END - div header */

/* START - div content */
div#content
{
border: 1px solid black;
height: 500px;

}
/* END - div content */

/* START - div links_panel */
div#links_panel
{
width: 250px;
float: left;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div links_panel */

/* START - div main_panel */
div#main_panel
{
width: 704px;
float: right;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div main_panel */

/* START - div footer_panel */
div#footer_panel
{
clear: both;
border: 1px solid black;
}
/* END - div main_panel */

/* END - BASIC CSS */

Basically you want a header, followed by a linkspanel on the left which should have a scroolbar, followed by a mainPanel which should also have a scroolbar and it has to be to the right of the linksPanle and lastly followed by a fotter.