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

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

Posted at June 18,2005 11:58 PM
Tag:[Bug, CSS, MovableType, Template]

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

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

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

1.スタイルシート修正

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;
}

2.テンプレート修正

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>
<!-- 右サイドバー終了 -->
        :

3.もう少しきれいに

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

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

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

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


トラックバック

配置がずれる from Mistgrass Weblog
 実験室のほうで、小粋空間さんのテンプレートの3カラム固定にチャレンジしてみまし... [続きを読む]

Tracked on June 29, 2005 10:14 AM

今日のXHTML+CSS:IE6の後方互換モード対策 from 世界中の1%の人々へ
「XHMLはXMLなんだからXML宣言をいれるべき」という文章を1ヶ月前に目にしてから、寝ても覚めても、この言葉が頭から離れなかった。 ところが、XML... [続きを読む]

Tracked on March 25, 2006 1:59 AM
コメント

こんばんはー^^
お役に立てて幸いでした。
うちと同じ構成になってるよ!とちょっと感動&びっくりです。

[1] Posted by もそ : June 22, 2005 11:01 PM

>もそさん
こんにちは。

仕組みがわかると非常に便利な構造ですね。
あの記事がなかったらずっと崩れたままだったと思います。(笑)
日々精進ですね。

改めましてありがとうございました。

[2] Posted by yujiro : June 23, 2005 3:03 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)