小粋空間  -  a cheap joke and a play on words site

固定3カラムのIE6・後方互換モード対処方法

公開中の固定3カラムテンプレートをXHTMLに適用させる場合、1行目にXML宣言、
<?xml version="1.0" encoding="utf-8"?>
をテンプレートに記述する場合がありますが、この時IE6では強制的に表示モードが「後方互換モード」、つまり古いブラウザへの互換性を保とうとするモードになります。
「後方互換モード」は「標準モード」と解釈の違いがあり、その中のひとつに width プロパティに padding / border プロパティのサイズを含む・含まないの解釈の違いがあります。後方互換モードでは width に padding / border のサイズを含むため、含まないサイズ指定を行っている公開テンプレートでXML宣言を行うと左右のカラム幅が画像のように崩れてしまうという問題がありました（というかそもそも私の解釈誤り）。
1行目にXML宣言を記述しなければこのような問題は発生しないのですが、ウェブスタンダードに準拠して運用される場合の制約となってしまいます。

ということで、3カラム固定の公開テンプレートについて、いずれの表示モードにも依存せずに表示させる修正方法を提示します。具体的には、両者のプロパティを同時にひとつのブロックに記述しなければ回避できる問題ですので、新しいブロックを追加します。
なお、text-align:プロパティを追加しないとセンタリングされないという問題もありますのでそれも併せて記述します。

本記事の参照元は下記です。ありがとうございました。

• 今日の覚え書き：width解釈の違いへの対応策
• ADP: IE6のwidth解釈バグ対処法
• 訪問者に優しいサイト作り：文書型宣言とブラウザでの表示

１．スタイルシート修正

styles-site.css の左右カラム指定のIDセレクタについて、下記リストのように赤字部分を削除し、青字のIDセレクタを新たに追加します。

#links-right-box {
    float: left;
    width : 185px ;
}
 
#links-right{
    float: left;
    width : 155px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    color: #ffffff;
}
 
#links-left-box {
    float: left;
    width : 185px ;
}
 
#links-right{
    float: left;
    width : 155px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    color: #ffffff;
}

また3カラム全体をセンタリングさせる場合は、body 要素に青色の text-align プロパティ を追加してください。

body {
    margin: 0px 0px 20px 0px;
    background:#8FABBE; /* 背景色 */
    text-align:center;
}

２．テンプレート修正

3カラム化しているテンプレート全てについて、下記リストのように links-left、links-right のタグの外側を括る形で青字のタグを追加します。

　　　　　　　　：
<!-- 左サイドバー開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　　　：
</div>
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
　　　　　　　　：
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　　　：
</div>
</div>
<!-- 右サイドバー終了 -->
　　　　　　　　：

３．もう少しきれいに

実は左右のセレクタの内容は全く同じ内容ですので、

.links-box {
    float: left;
    width : 185px ;
}
 
.links{
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    color: #ffffff;
}

というまとめた指定も可能です（妥当かどうかは別として）。テンプレートのid 属性は class 属性に変更してください。

上記の修正によって標準モード・後方互換モードのいずれでも画像のような表示になります。なおIE6のみの対処ですので他のブラウザについて適正な表示をするには別の方法が必要かも知れませんので予めご容赦ください。 公開中の固定3カラムのテンプレートは修正済みです。