Я пытаюсь обновить код UI и подумал, что я взгляну на идеи одного из главных ресурсов Интернета: A List Apart . Я нашел эту статью о создании макета с фиксированным заголовком, левой панелью и главной панелью с использованием фиксированных позиций. Я реализовал эту идею в MasterPage, но теперь получаю очень странные результаты: когда страница отображается, заголовок и основной div просто не отображаются в IE 7. Когда я изменяю размеры даже до минимальной степени, все становится на свои места должным образом. У FireFox такой проблемы нет.
Вот CSS (я поместил каждую запись в строку, чтобы сохранить вертикальное пространство):
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; }
Вот 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>
Как видите, это довольно простое применение идей. Я играл с этим часами. Я изменил настройки переполнения с автоматического на скрытый и т. Д., Поэтому я не думаю, что это так. Как ни странно, вариант этого подхода с заголовком и основной областью прекрасно работает в другой части сайта, но этот вариант не работал на этой странице, даже после того, как я удалил практически весь контент! Эта часть сайта находится в подкаталоге, но , что не должно иметь значения.
Любая помощь будет принята с благодарностью! Опять же, я чувствую, что я на расстоянии 1 мм: он отлично работает в Firefox и выглядит хорошо, когда я изменяю размер окна в любом направлении, независимо от того, насколько он незначителен.