views:

202

answers:

3

I'm looking to do a refresh on some UI code and thought I would take a look at ideas on one of the Web's premier resources: A List Apart. I found this article on creating a layout with a fixed header, a left panel and a main panel using fixed positions. I implemented the idea in a MasterPage but am now having very odd results: when the page renders, the header and main div simply don't show up in IE 7. When I resize to even the smallest degree, everything pops into place properly. FireFox suffers no such problem.

Here's the CSS (I've put each entry on a line to save vertical space):

html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; font: 0.8em Verdana, sans-serif; line-height: 1.25; color: #333; background-color: White; }
#coachheader { padding: 0; margin: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 96px; overflow: hidden; }
#side { padding: 0; margin: 0; position: absolute; top: 100px; left: 20px; bottom: 20px; overflow: auto; width: 200px; }
#main {padding: 0; margin: 0; position: absolute; top: 100px; left: 240px; right: 20px; bottom: 20px; overflow: auto; }
a.SM { color:#666666; text-decoration:none; padding-left: 10px; padding-right:10px; margin-left:2px; margin-right:2px; vertical-align:middle; }
img.SM { height: 20px; vertical-align:middle; }

Here is the HTML:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Coach.master.cs" Inherits="FitnessCompanion.Coach" %>
<!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" >
<head id="Head1" runat="server">
    <title>My Title</title>
    <link rel="stylesheet" href="../../stylesheetforstaff.css" type="text/css" />
    <!--[if lt IE 7]>
    <style type="text/css">
        #side { height:expression(document.body.clientHeight-120); }
        #main { height:expression(document.body.clientHeight-120); width:expression(document.body.clientWidth-260); }
    </style>
    <![endif]-->
</head>
<body runat="server" id="body1">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="coachheader">  <!-- This div does NOT show up initially -->
        <div style="text-align:left; float:left; margin-left:6px;">
            <img src="/images/BSDILogoWeb.png" alt="BSDI" />
        </div>
        <!-- The Menu -->
        <div style="float:right; margin-right:6px;">
           <a menu table...>
        </div>
    </div>
    <div id="side">
        <menu output for the side - this div shows up!>
    </div>
    <div id="main">
        <!-- Main Page - this Div does not show up. Contents: just a table -->
        <div>
        <asp:contentplaceholder id="ContentBody" runat="server">
        </asp:contentplaceholder>
        </div>
    </div>
    </form>
</body>
</html>

As you can see, this is a pretty straightforward application of the ideas. I have played with this for hours. I've changed the overflow settings from auto to hidden, etc. so I don't think it is that. Oddly enough, a variant of this approach with just a header and the main area works fine in another part of the site but that variant didn't work on this page either even after I eliminated essentially all of the content! This portion of the site is down in a subdirectory but that shouldn't matter.

Any help would be appreciated! Again, I feel like I am 1 mm away: it works fine in Firefox and looks fine once I resize the window in any direction no matter how slightly.

+1  A: 

try putting this:

<!--[if lt IE 7]>
    <style type="text/css">
        #side { height:expression(document.body.clientHeight-120); }
        #main { height:expression(document.body.clientHeight-120); width:expression(document.body.clientWidth-260); }
    </style>
<![endif]-->

at the bottom just before your </body> tag.

Im not sure that will work but im thinking the expression is being calculated inline and the document.body isn't there yet.

John Boker
+1 For the try - unfortunately, this did not help.
Mark Brittingham
+1  A: 

Yes, IE does have problems with vanishing elements sometimes.

However, when I try your code in IE7 the elements show up just fine, but that may be because I gave them background colors.

There are some tricks to make the page more stable in IE, like adding position:relative; to turn an element into a layer, adding display:inline; on a floating element, adding background to an element, or specifying a fixed size on the element.

Guffa
+1 for helpful advice but that didn't solve the problem either. I'm not surprised that you aren't seeing the problem. As I say, in another area of the site, a slight variant of this code works fine. Thanks for the other good advice though!
Mark Brittingham
A: 

Thanks to John and Guffa for trying to help. I've kept playing with the code and found that it is apparently a flaw in IE's ability to compute sizing. If I changed the IE conditional code to include IE 7 so that the sizing is calculated in Javascript, the page now works all the time. The original article said that the sizing flaw was fixed in IE 7 but apparently, in some releases (I'm on 7.0.5730.11) the browser still has trouble with this basic CSS.

Here's the updated section of the page:

<!--[if lt IE 8]>
<style type="text/css">
    #side { height:expression(document.body.clientHeight-120); }
    #main { height:expression(document.body.clientHeight-120); width:expression(document.body.clientWidth-260); }
</style>
<![endif]-->

Notice the "8" instead of the 7 in the if test.

Mark Brittingham