2009-07-09 7 views
0

私はASP.NETで小さな掲示板のサイトを書いてきましたが、私はIE6で正しく動作させることはできません。メインページにはヘッダーDIVがあり、その下にコンテンツ領域があります。この領域にはさらに3つの領域があり、左上の検索機能、その下の通知のリスト、およびこれらの2つの右側の現在表示されている通知があります。検索および通知リストの領域は240ピクセル幅で、表示された通知領域は残りの幅を占めます。問題は、コンテンツが表示された領域(オーバーフロー:自動スタイル)より大きい場合、通知リストと表示された通知領域が両方ともスクロールする必要がありますが、これはIE6では発生しません。他のすべてはうまく表示されます。レイアウトは次のとおりです。CSSでIE6のスクロールDIVs

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head runat="server"> 
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> 
    <title>Notice Board</title> 
    <style type="text/css"> 
     body 
     { 
     margin:0; 
     border:0; 
     padding:0; 
     height:100%; 
     max-height: 100%; 
     overflow: hidden; 
     } 

     #header 
     { 
     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:130px; 
     overflow:hidden; 
     } 

     #footer 
     { 
     position:absolute; 
     bottom:0; 
     left:0; 
     width:100%; 
     height:0px; 
     overflow:hidden; 
     } 

     #content 
     { 
     position:absolute; 
     top:130px; 
     left:0; 
     bottom:0px; 
     right:0; 
     overflow:hidden; 
     } 

     * html body 
     { 
     padding:130px 0 0 0; 
     } 

     * html #content 
     { 
     height:100%; 
     width:100%; 
     } 

     #leftdiv 
     { 
     position:absolute; 
     left:0; 
     width:240px; 
     top:0; 
     height:100px; 
     overflow:hidden; 
     } 

     #listdiv 
     { 
     position:absolute; 
     left:0; 
     width:240px; 
     top:100px; 
     bottom:0px; 
     overflow:auto; 
     } 

     #noticediv 
     { 
     position:absolute; 
     left: 270px; 
     right:0; 
     top:0; 
     bottom:0; 
     overflow:auto; 
     } 
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server" method="post"> 
     <div id="header" > 
     <!-- Header content goes here --> 
     </div> 

     <div id="content"> 

     <div id="leftdiv"> 
      <!-- Content region for the search facility goes here --> 
     </div> 

     <div id="listdiv"> 
      <!-- Content region for the notice list goes here --> 
     </div> 

     <div id="noticediv" > 
      <!-- Content region for the displayed notice goes here --> 
     </div> 
     </div> 
    </form> 
    </body> 
</html> 

アイデアはありますか?

答えて

1

まだIE6をサポートしていない場合は、Dean Edwards' IE7 scriptsを使用して多くのCSS問題を解決します。この問題に直面しませんでしたが、より適合性の高いブラウザからデザインを受け取り、これらのスクリプトを使用して作業してください。 IEの条件付きコメントの魔法を使うと、現在のバージョンの2バージョン前のブラウザにまだまだ固執している人々に修正プログラムを提供することができます。

+0

これは完璧です(*で始まるCSSビットを削除してください)。 – Barn

2

DIVをスクロールするには、スクロールするディメンションに応じて、少なくとも高さまたは幅が指定されている必要があります。いくつかのブラウザ(例えば、Firefox)は、トップ値とボトム値の両方が与えられた場合、高さを推測します。しかし、IE6は、そうではありません。

+0

これは非常に機能しましたが、私はまだDIVの底をウィンドウに収めることができませんでしたので、スクロールバーがありましたが、ボトムはありませんでした! – Barn

関連する問題