CSS position problem in IE6

Question

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;
            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>

You are using tables for layout. Is a CSS based layout an acceptable answer. Also your .linksPanel has an position of absolte with both a value of top:0px and bottom: 0px; - Does not make any sense. Remove either one of the two. When you say "it does not render correctly", you have to be more specific. How does it appear, what is wrong with it and how you want it to appear. It looks the same in IE9 and IE6 — Jawad, Jun 13 '11 at 20:16
Why are you setting top and bottom, both offset properties, on all positioned element. The rule that will be low in the code will win over the previous upper code. — Jawad, Jun 13 '11 at 20:21
Jawad, "it does not render correctly" means in IE6 the linksPanel is not contained in the masterContent div and is not rendering with a scrollbar. The contents of the linksPanel div overflows the footer and increase the size of the page. The correct rendering of the linksPanel should have it contained in the masterContent div and because the contents of the div are higher than the browser window, it should render with a scrollbar. See this link for a screenshot of what I'm seeing in IE6. http://img3.imageshack.us/img3/7210/screenshotege.jpg — John81, Jun 14 '11 at 12:49
If I take out bottom: 0px then the linksPanel div does not get a scrollbar but the mainPanel div does. That is not right. I need the linksPanel div to have a scrollbar. — John81, Jun 14 '11 at 13:12
I pity the fool who requires his developer to still support IE6. — Wex, Jun 14 '11 at 18:16
@John: As stated, you cannot position something off the top and the bottom simultaneously. It's a perfect programming contradiction. That's almost like saying you're in Chicago while you're in Paris, or your shirt needs to be a size small while also being an extra-large, or the light is off while it's on. This is web programming, not quantum physics. — Sparky, Jun 14 '11 at 18:23
@Wex: This would probably work fine in IE6 if it wasn't full of so many weird programming mistakes. — Sparky, Jun 14 '11 at 18:24
@Wex: We would be saying the same to IE9 in , hmmmmmmmm, ..... about a year!? — Jawad, Jun 14 '11 at 19:10
@Sparky672, @Jawad: `top:0; bottom:0` makes perfect sense. An old article on the subject: http://www.alistapart.com/articles/conflictingabsolutepositions/ — thirtydot, Jun 15 '11 at 01:12
@thirtydot: I've been thinking about this and can't help but come to the same conclusions as originally. When you simply position it only from the top with an unspecified height, the div expands along with content. However, if you specify both top & bottom position, not only can you not specify a height (another contradiction), what happens when content exceeds the div? Will it try to expand (breaking one of the two position rules), overflow (as if it's fixed height), or some unpredictable result? It may be allowed but I respectfully disagree that it makes _"perfect"_ sense. — Sparky, Jun 16 '11 at 18:18
@Sparky672: I agree that it's somewhat counter-intuitive, but it is what it is. When you use it, you don't *want* to specify a height. It's gotten me plenty of accepts/votes, which means it was a good technique to use: [1](http://stackoverflow.com/q/6286186), [2](http://stackoverflow.com/q/5097732), [3](http://stackoverflow.com/q/5225718), [4](http://stackoverflow.com/q/5104447), [5](http://stackoverflow.com/q/4557015), [6](http://stackoverflow.com/q/5070238), [7](http://stackoverflow.com/q/5422739) .. I can has upvote? :) — thirtydot, Jun 16 '11 at 18:40
@thirtydot: Don't get me wrong... it seems that you've proven it's valid, however, just not my preferred approach. What about my question: I agree you can't specify a height... again, but what happens when content exceeds the div? Normally when height is omitted, div just expands. In this case, will it "try to expand" and just fail? How will it fail? Overflow? Will this failure be the same across browsers? I honestly don't know... but if behavior is not the same across browsers, I have to at least question the approach. — Sparky, Jun 16 '11 at 18:56
@Sparky672: Text will just overflow out. Too much text will never change the "height" of the element. The "failure" will be consistent between "all browsers". Check this in whichever browsers you wish: http://fiddle.jshell.net/RGNxm/show/light/ - make the window relatively small so that the text spills out. — thirtydot, Jun 16 '11 at 19:01
@thirtydot: Ok, thank-you. I was playing with a fiddle but I did not have easy access to IE. Yeah, I'm never a fan of designs that break this way... I like my divs to expand/contract for changing content. It seems like the desired effect from this "top/bottom position thing" could be achieved better with other methods like margins or padding. — Sparky, Jun 16 '11 at 19:11
@Sparky672: It's no problem. You *wouldn't use* this technique for something like that demo I just made. I've already shown you some instances in which you would use it. The trick is knowing when to use it. In some cases, it's a beautiful and eloquent solution. In other cases, it's a terrible choice. — thirtydot, Jun 16 '11 at 19:15
@Sparky672, @thirtydot: Howcome I missed all these comments. Never showed up in my inbox. Have read about this in the book "CSS: The Missing Manual". — Jawad, Jun 20 '11 at 19:44
@Jawad: Because none of the comments started with "@Jawad". Only the OP and the person addressed by the `@` symbol get a notification. — Sparky, Jun 20 '11 at 19:52

Jawad · Answer 1 · 2011-06-14T18:58:39.223

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.

I have totally redesigned you page. Have included a form element which should not to there. It now does not include any tables. It is a float based layout as opposed to positioned based layout. It is also fixed width but can be easly changed to liquid or elastic with the div#wrapper. Includes a basic CSS reset which should be replaced with a proper one. Also includes a hack to center the layout in IE6. A proper meta tag is also included along with XHTML. Nothing fancy, just a simple design without all those table, td and tr elements. — Jawad, Jun 14 '11 at 19:07

CSS position problem in IE6

1 Answers1