2005年7月19日
float 3カラムの折りたたみによるCSSの不具合
リニューアルで Mozzila 系のブラウザに中央カラムのコンテンツ折りたたみを導入しなかった理由です。
Netscape または Firefox で、サイドバー（左右どちらでも良い）の表示が中央カラムより長い状態で、中央カラムの記事の折りたたみ（閉じる→開く）を行うと、開いた分の長さをサイドバーの余白として継承してしまいます。つまり記事を開いた途端にページ全体が下にのびてしまいます。中央カラムがサイドバーより長い状態であれば発生しません。
言葉で説明するのは難しいのでもぬけのからの個別エントリーアーカイブで試して頂けると一目瞭然です。このページでどちらかのサイドバーの長さを中央カラムより長い状態にして「続きを読む」をクリックすると、長いほうのサイドバーの下に余白が生じます。この余白は中央カラムを開いた分の長さと等しくなります。
またその後でサイドバーを折りたたんでも高さは変わりません。
かなり試してみましたが、今のところ解決策はみつかっておりません。そういう訳で継続調査中です。もし解決策をご存知の方がいらっしゃいましたらご教示頂ければ幸いです。
Posted by yujiro このページの先頭に戻る
- CSSでクラスセレクタをくっつけて並べる方法
- pre要素で折り返しをするためのCSS
- Google Chromeでfloatレイアウトが崩れる件について
- IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ
- IE6/IE7/IE8/IE9のCSSハック
- ColumnResizerリニューアル
- ドロップシャドウつきの画像をセンタリングする
- CSS で table に斜線を引く方法
- IE7 で pre 要素が適正に表示されない不具合を修正
- CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）
- Highslide JS でサムネイル画像を拡大表示する（設定方法の変更）
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- グローバルナビゲーション（その1：基本スタイル）
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する（2カラム版）
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL
コメントする
greeting
