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">
<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.