livedoor テンプレート修正(リキッドレイアウトの不具合を解消する)

livedoor テンプレート修正(リキッドレイアウトの不具合を解消する)

Posted at September 10,2006 1:10 AM
Tag:[livedoor, Template, TroubleShooting]

現在公開中の livedoor ブログテンプレートのリキッドレイアウトに不具合がありました。

具体的には、表示された画面をスクロールアップしてタイトルバナーを見えない状態にして、スクロールダウンしてタイトルバナーを表示するとタイトルバナー上部が真っ白になる、というものです(下)。

スクロールによる不具合

原因は、タイトルバナー上に設定されている livedoor ブログの table 要素が影響しているようです。

この不具合を解消するにはスタイルシートのバナー用の設定箇所に width プロパティ(青色)を追加します。

       :
/* タイトルバナー */
.layout-three-column-liquid #banner,
.layout-two-column-liquid-left #banner,
.layout-two-column-liquid-right #banner {
    _width: 100%;
}
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
       :

前述の問題は IE のみ発生し、Mozzila 系ブラウザでは正常に表示されます。逆に width プロパティを Mozzila に適用すると横スクロール常に表示されてしまうという不具合が発生するため、アンダースコアハックで IE のみに適用しています。

なおダウンロードアーカイブは修正済です。
この修正を行うことで下記のようにスクロールによる影響は解消されます。

スクロールによる不具合

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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