Menu
I have a problem with IE7.
I have a fixed layout for keeping the header and a sidepanel fixed on a page leaving only the "main content" area switch can happily scroll it's content.
layout on Twitpic http://twitpic.com/show/thumb/e32q7.png
This layout works perfectly fine for IE6 and IE8, but sometimes one page may start "hiding" the content that should be showing in the "main content" area.
The page finishes loading just fine. For a split second IE7 will render the main content just fine and then it will immediately hide it from view.. somewhere.. It would also seem that it only experiences this problem when there is enough content to force the "main content" area to scroll.
By resizing the window or switching to another open tab and back again will cause IE7 to show the page as it was intended.
Note the same problem does occur with IE8 in compatibility mode, but the page is rendered correctly in IE8 mode.
If need be I can attach the basic CSS styling I use, but I first want to see if this is a known issue with IE7.
Does IE7 have issues with positioned layout and overflow scrolling that is sometimes likes to forgot to finish rendering the page correctly until some window redraw event forces to finish rendering?
Please remember, this exact same layout is used across multiple pages in the site as it is set up in a master page. It is just (in this case) one page that is experiencing this problem.
Other pages with the exact same layout do render correctly. Even if the main content is full enough to also scroll.
UPDATE: A related question which doesn't have an answer at this point.
LATE UPDATE: Adding example masterpage and css
Please note this same layout is the same for all the pages in the application. My problem with IE7 only occurs on one such page. All other pages have happily render correctly in IE7. Just one page, using the exact same layout, has issues where it sometimes hides the content in the "work-space" div.
The master page
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="shared_templates_MasterPage" %>
<!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>
<link rel="Stylesheet" type="text/css" href="~/common/yui/2.7.0/build/reset-fonts/reset-fonts.css" runat="server" />
<link rel="Stylesheet" type="text/css" href="~/shared/css/layout.css" runat="server" />
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="app-header">
</div>
<div id="side-panel">
</div>
<div id="work-space">
<asp:ContentPlaceHolder ID="WorkSpaceContentPlaceHolder" runat="server" />
</div>
<div id="status-bar">
<asp:ContentPlaceHolder ID="StatusBarContentPlaceHolder" runat="server" />
</div>
</form>
</body>
</html>
The layout.css
html {
overflow: hidden;
}
body {
overflow: hidden;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: white;
}
body, table, td, th, select, textarea, input {
font-family: Tahoma, Arial, Sans-Serif;
font-size: 9pt;
}
p {
padding-left: 1em;
margin-bottom: 1em;
}
#app-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #dcdcdc;
border-bottom: solid 4px #000;
}
#side-panel {
position: absolute;
top: 84px;
left: 0px;
bottom: 0px;
overflow: auto;
padding: 0;
margin: 0;
width: 227px;
background-color: #AABCCA;
border-right: solid 1px black;
background-repeat: repeat-x;
padding-top: 5px;
}
#work-space {
position: absolute;
top: 84px;
left: 232px;
right: 0px;
padding: 0;
margin: 0;
bottom: 22px;
overflow: auto;
background-color: White;
}
#status-bar {
position: absolute;
height: 20px;
left: 228px;
right: 0px;
padding: 0;
margin: 0;
bottom: 0px;
border-top: solid 1px #c0c0c0;
background-color: #f0f0f0;
}
The Default.aspx
<%@ Page Title="Test" Language="VB" MasterPageFile="~/shared/templates/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="WorkspaceContent" ContentPlaceHolderID="WorkSpaceContentPlaceHolder" Runat="Server">
Workspace
<asp:ListView ID="DemoListView" runat="server"
DataSourceID="DemoObjectDataSource"
ItemPlaceholderID="DemoPlaceHolder">
<LayoutTemplate>
<table style="border: 1px solid #a0a0a0; width: 600px">
<colgroup>
<col width="80" />
<col />
<col width="80" />
<col width="120" />
</colgroup>
<tbody>
<asp:PlaceHolder ID="DemoPlaceHolder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<th><%#Eval("ID")%></th>
<td><%#Eval("Name")%></td>
<td><%#Eval("Size")%></td>
<td><%#Eval("CreatedOn", "{0:yyyy-MM-dd HH:mm:ss}")%></td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:ObjectDataSource ID="DemoObjectDataSource" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="DemoLogic">
<SelectParameters>
<asp:Parameter Name="path" Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
</asp:Content>
<asp:Content ID="StatusContent" ContentPlaceHolderID="StatusBarContentPlaceHolder" Runat="Server">
Ready OK.
</asp:Content>
240
One theory:
Your CSS is declared after the main content area (which causes what's called a "flash of unstyled content"), and in your CSS there's an IE7 bug (could be the peekaboo bug) that causes the content to become hidden.
Try adding:
position: relative; min-width: 0;
To the content that's disappearing.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
