Hi.
I am trying to create a 3 panel layout with css. It has a left pane for nav
links, a bottom panel for a copyright notice and a right scrollable panel
for the sites main content. When it is viewed in Firefox 2 or later, the
layout/design works like a dream (you have the blue panel on the left, the
green one at the bottom and the red one extends from the top of the page to
the edges of the blue and green panels). When I run it in IE 6, 7 or 8 it is
sort of broken. In IE, the panel for the main content shows up like a red
strip that goes across the top of the screen and leaves a huge white blank
space where the red content is supposed to be at (refer to the Firefox
layout above). To see the differences between the 2 browsers, go to
www.test.eternityrecords.org/index2.aspx and remember the IE version is
supposed to look like the Firefox version. Would anybody have any ideas on
how to make all browsers show this layout like firefox does?
Here is the CSS code that I have in question. I put the entire section of
css code here in case something might be wrong with a part I'm not seeing
somehow.
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#LeftPanel, #Footer {
position: absolute;
top: 0;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#Footer{
top: auto;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
width: auto;
bottom: 0;
right: 0;
height: 120px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}
#MainContent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
bottom: 120px; /*Set bottom value to HeightOfTopFrameDiv*/
overflow: auto;
background-color: red;
color: white;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
margin-top: 0;
}
* html body{ /*IE6 hack*/
padding: 0 0 120px 200px; /*Set value to (0 0 HeightOfTopFrameDiv
WidthOfLeftFrameDiv)*/
}
* html #MainContent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
* html #Footer{ /*IE6 hack*/
width: 100%;
}
Now, to put the CSS above into context, here is the asp.net 3.5 master page
(html code for it anyways):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title></title>
<link href="Styles/StyleSheet.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div
id="LeftPanel">
<div class="innertube">
This is the left panel
</div>
</div>
<div id="MainContent">
<div class="innertube">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="Footer">
<div class="innertube">
Bottom panel
<!--<asp:Label ID="CopyrightLabel"
runat="server" Text="Label" Font-Names="Arial"></asp:Label>-->
</div>
</div>
</form>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
