2
我幾乎已經完成了這個網站，現在我只是想讓它跨瀏覽器。除了IE6以外，它的功能都很棒。我已經解決了它的兩個問題，但是在最後一個問題上失敗了。當窗口重新調整大小到800px左右時，左側邊欄向右移動。重新調整的越多，移動得越多，最終會覆蓋內容。這似乎也會通過縮小標題來影響標題。標題是一個小問題，但大多隻是一個煩惱。IE窗口大小調整太小時移動div
我已經嘗試了一些修補程序，但沒有做任何事。我能找到的唯一線索涉及到這個，提到jQuery可能會影響它，但我沒有在該div上設置jQuery。我希望得到任何幫助，因爲我的截止日期即將到來。
我的HTML是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="file:///C:/resources/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../_script/textShorten.js"></script>
<script type="text/javascript" src="file:///C:/Users/Matt/Desktop/Coding/Framed/framed_over.js"></script>
<link rel="stylesheet" href="file:///C:/Users/Matt/Desktop/Coding/Framed/framed.css" type="text/css" />
<link rel="stylesheet" href="../../_script/css.css" type="text/css" />
<style type="text/css">
_#wrapper { height: 600px; }
/* Photo Styles */
#wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
</style>
</head>
<body>
<div id="header"><img src="../../_images/logo.png" alt=" " id="logo" /></div>
<div id="wrapper">
<!-- START CONTENT -->
<div id="content" class="column">
<img src="-photo-images/thumb__zimmerman-thomas_01.jpg" class="framed" alt="Glasgow Necropolis 1">
<img src="-photo-images/thumb__zimmerman-thomas_02.jpg" class="framed" alt="Glasgow Necropolis 2">
<img src="-photo-images/thumb__zimmerman-thomas_03.jpg" class="framed" alt="Mother (II)">
</div>
<!-- END CONTENT -->
<div id="sidebar" class="column">
<div id="top"><!-- EMPTY DIV --></div>
<a href="index.html/">Home</a><br />
<a href="archives.html/" id="none" >Archives</a><br />
<a href="about.html">About Us</a><br />
<a href="submit.html">Submit Your Work</a><br />
<hr />
<h2>January 2011</h2>
<h3>Poets</h3>
<ul>
<li><a href="../-lit/valentina-cano.html">Valentina Cano</a></li>
<li><a href="../-lit/ricky-garni.html">Ricky Garni</a></li>
<li><a href="../-lit/kyle-hemmings.html">Kyle Hemmings</a></li>
<li><a href="../-lit/paulus-kapteyn.html">Paulus Kapteyn</a></li>
<li><a href="../-lit/tammy-ho.html">Tammy Ho Lai-Ming</a></li>
<li><a href="../-lit/laura-lehew.html">Laura LeHew</a></li>
<li><a href="../-lit/rhonda-maness.html">Rhonda Maness</a></li>
<li><a href="../-lit/anita-mcqueen.html">Anita McQueen</a></li>
<li><a href="../-lit/rodney-nelson.html">Rodney Nelson</a></li>
<li><a href="../-lit/lise-phillips.html">Lise Phillips</a></li>
<li><a href="../-lit/changming-yuan.html">Changming Yuan</a></li>
<li><a href="../-lit/desmond-kon.html">Desmond Kon Zhicheng-Mingdé</a></li>
</ul>
<br />
<h3>Photographers</h3>
<ul>
<li><a href="../-photo/leila-fortier.html">Leila Fortier</a></li>
<li><a href="../-photo/tammy-ho.html">Tammy Ho Lai-Ming</a></li>
<li><a href="../-photo/allicia-strickland.html">Allicia Strickland</a></li>
<li><a href="../-photo/jump-study.html">Jump Study Photography</a></li>
<li><a href="../-photo/thomas-zimmerman.html">Thomas Zimmerman</a></li>
</ul>
</div>
<div id="infobar" class="column">
<h1 id="author">Thomas Zimmerman</h1>
<br />
<!-- Poem List -->
<h4>Poems</h4>
<ul id="submitList">
<li>Glasgow Necropolis 1</li>
<li>Glasgow Necropolis 2</li>
<li>Mother (II)</li>
</ul><br />
<!-- Issue Features -->
<h4>Featured in Issues:</h4>
<ul>
<li><a href="../../2011-march/-photo/zimmerman-thomas.html/">March 2011</a></li>
</ul>
<!-- Biography Start -->
<h1 id="mark">Biography</h1>
<p id="Bio">
Thomas Zimmerman teaches English, directs the Writing Center, and edits three literary magazines at Washtenaw Community College, in Ann Arbor, MI. Photographs of his have appeared recently in the small magazines Bete Noire and Muscle & Blood.
</p>
</div>
</div>
<script type="text/javascript">$("#infobar li").ellipsis();</script> <!-- For FireFox -->
</body>
我的CSS：
/* Poetry Styles */
/* #wrapper { padding-right: 301px; }
#sidebar { right: 276px; }
#infobar { margin-right: -301px; }
#content { padding: 20px 50px; }
*/
/* Photo Styles */
/* #wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
*/
html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img,
small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option
{ margin: 0; padding: 0; border: 0; outline: 0;
text-align: left; vertical-align: middle;
text-decoration: none; list-style: none; zoom: 1;
}
/* Layout styles */
body { min-width: 900px; }
div#wrapper { min-height: 600px; padding-left: 176px; padding-right: 301px; overflow: hidden !important; }
div.column { float: left; position: relative; padding-bottom: 20020px !important; margin-bottom: -20000px !important; }
div#content { width: 100%; min-width: 400px; }
div#sidebar { right: 276px; margin-left: -100%; _left: 201px; }
div#infobar { margin-right: -301px; }
/* Layout Styles End */
body
{ background: rgb(20, 20, 20) url("../_images/bg_main.png");
font-family: palitno linotype; color: white; font-size: 12px;
}
h1 { font-size: 20px; font-weight: normal; } h2 { font-size: 18px; font-weight: normal; } h3 { font-size: 16px; font-weight: normal; } h4 { font-size: 14px; font-weight: normal; } h5 { font-size: 12px; font-weight: normal; } h6 { font-size: 10px; font-weight: normal; }
a { color: white; position: relative; }
a:link { color: white; }
a:visited { color: rgb(205, 205, 205); }
a:hover { color: white; left: 3px; }
div#content a:hover { left: 0; }
a:active { color: white; }
a[href="index.html"], a#none, a[href="about.html"], a[href="submit.html"]
{ font-size: 14px; }
div#header
{ height: 80px;
background: rgb(27, 27, 27) url("../_images/bg_head.png") repeat-x;
border-bottom: 1px solid rgb(136, 0, 0);
overflow: hidden;
padding: 10px 40px;
} img#logo { float: left; margin-right: 100px; display: inline; }
div#content { padding: 20px 50px; text-align: center; }
h1.poemTitle { margin-bottom: 10px; text-align: left; }
p.poem { font-size: 14px; text-align: left; margin: 20px 0; line-height: 1.5; }
div#content img { margin: 10px; border: 1px solid rgb(136, 0, 0); }
div#sidebar
{ width: 150px; /* 175 - Padding-left, -right */
background: rgb(27, 27, 27);
border-right: 1px solid rgb(136, 0, 0);
padding: 10px 5px 10px 20px;
font-style: italic;
background: transparent url("../_images/bg_sidebar.png") repeat-y;
z-index: 0;
}
div#sidebar div#top
{ width: 175px; height: 200px;
position: absolute; top: 0px; left: 0; z-index: -1;
background: transparent url("../_images/bg_sidebar-top.png") no-repeat;
}
div#sidebar hr { margin: 8px -5px 8px -20px; border-top: 1px solid transparent; _border-top: 1px solid rgb(100, 0, 0); _border-bottom: 1px solid rgb(136, 0, 0); }
div#sidebar h2 { font-size: 16px; position: relative; left: -8px; }
div#sidebar h3 { font-size: 14px; }
div#sidebar li { position: relative; left: 15px; text-indent: -7px; _text-indent: 0; } /* Sets Wrap Indent. left=8+!'text-indent'; MAX 15px/-7px; */
div#sidebar ul { font-style: normal; }
div#infobar
{ width: 160px;
padding: 10px 20px;
border-left: 1px solid rgb(136, 0, 0);
background: rgb(27, 27, 27) url("../_images/bg_info.png") repeat-y;
} h1#author { position: relative; left: -10px;}
div#infobar h4 { }
div#infobar ul { position: relative; left: 10px; }
div#infobar li { white-space: normal; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; _margin-bottom: 5px; }
h1#mark { position: relative; left: -10px; margin-top: 75px; margin-bottom: 10px; }
p#Bio { max-height: 450px; white-space: normal; }
微軟正在乞求用戶不再使用IE6。所以忽略它。 （只是在開玩笑：D） – 2011-03-19 20:25:06