カスタマイズの備忘録

float は甘くない!Firfox と IE では表示が違う!

2010.02.25.  ←novel-PF-Snow 共有申請しましたが不承認! →画像のための記事⑯ (サンプル)
novel-PF-Snowが不承認になったので、その理由が判明するまで、画像のあるテンプレートを作成する気にならず、リクエストを頂戴したnovel-PF-PlainC1の申請のために、細部を調整していたのですが、これが深み(泥沼?)にはまってしまった!
どうせなら、このタイプのテンプレートも互換性をもたせてPFタイプのスタイルシートで衣替えをできるようにしよう!っと思ったまではよかったのですが、そうそう簡単にはいきませんでした。

管理人の前に立ちはだかった新たな壁 その名は float (フロート) !!

これを使うと、ブロックが縦ではなく、横に横にと表示させることができる便利な要素、
使い終わったらclearをかければOK!

てな具合なお気楽で浅~い認識しかなく、今までは、気軽に適当に使っていたのですが、それが甘かった!
そもそも管理人ごときのスキルで、そうそう簡単に使いこなせる代物ではなかったんですよん!

novel-PF-PlainC1は、novel-PF-PlainA1と表紙ページのレイアウトだけが違います。オンマウスでコンテンツが表示されるA1と違い、C1はクリックで表示が切り替わります。また、更新情報だけは最初から表紙ページに表示されています。

月別更新履歴は折りたたんでありますが、PlainC1では最近の更新の下に並んでいます。けれども、新作テンプレートとして公開するなら、デザイン上どうしても、最近の更新の横に並べたかった!そのためにフロートを使ったのですが、これが一筋縄ではいかなかったのです。いくらフロートをつかても、素直に横に並んでくれない。

IEではOKでもFirefoxではNGだったり、Java有効の時はOKでも無効の時はNGだったり、またはその反対だったり、しかも、背景がFirefoxで消えちゃうし…。色々と試してみて、ようやく全ての条件下で横に並んだのですが、安心したのもつかの間、novel-PFタイプのスタイルシートに変えて衣替えをしてみると、コンテンツの表示位置が、右に左に乱れてしまって、もう、しっちゃめっちゃか。
実は、novel-PFタイプでは、JavaScript無効時の表示デザインを整えるために、フロートを使っていたのです。それも、テンプレートによって、フロートを指定しているブロックも、また左右もまちまち…。(し、知らないって怖ろしい…ただただデザインを整えるために行き当たりばったりで使っていた)しかも、新作テンプレでは、デザイン上、JavaScript有効時、無効時、両方の表示にフロートを多用しているし。


再度トライしても、今度は、一向に、全ての条件下で統一されたクリーンな位置取りにすることができません。もう、自力ではお手上げ状態。行き詰った頃に、ようらく、これって、バグのせいなんだろうか?と遅まきながらようやく気づいて調べた所、あったぁ!

フロートの直後の(clear も float もしていない)ボックスには width を指定しないこと(IEバグ対策)。
float を指定したボックスには width を指定すること(仕様上の決まり)。
float で段組を作るには両方のカラム(段)に width と float を指定するのが基本(整形規則の利用)。


フロートを使ってみる より



な~っとくです!
カラム落ちしてレイアウトが崩れているテンプレートを時々みかけますが、これのせいだったんですねぇ!
上のサイトの管理者さまに感謝です。

ということで、フロートの規則性(癖?)も理解できたところで、今度は、スタイルシートを差し替えても対応できるように、第二第三のクラス名を指定して、カスタマイズし直しました。苦労の甲斐あって、今度は、IEでも、Firefoxでも、JavaScript無効時でも有効時でもOK、また、どのスタイルシートに衣替えしても乱れや崩れはなく、まずまず思ったとおりのレイアウトに仕上がりました。
つ、疲れたぁ~~ぜいぜい(・д・;A)…

新作テンプレートnovel-PF2-Plainとして共有申請した後、早速、拙宅適用テンプレで、スタイルシートをnovel-PF-Umeに衣替えしてみました。にまにま眺めていたのですが、またもやトラブル発生!ふとした拍子に、表紙ヘッダー部分に縦スクロールが出現します。う~ん、こりゃぁ、やっぱりフロートの背景トラブルだろうと、今度は以下のサイトさまを再訪。

CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件

理論的にはチンプンカンプンですが、とにかく、フロートの親ボックスである、表紙ページのentryに以下の指定をすることで解決しました。
これまた、管理者さま、大感謝です。ありがとうございます!

#index .entry{
overflow: hidden;
}

#index .entry:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}

/*\*/
* html #index .entry {
height: 1em;
overflow: visible;
}
/**/



衣替えする可能性のあるnovel-PFタイプのスタイルシートには上の内容を追加しておいたほうがよいだろうか…

おまけ

表紙ページは縮小しているとはいえ、50~80の大きめ、重めの画像を用いていることが多いです。novel-PF2-Plainの表紙メニューは、ボタンによってオンマウスや、クリックで表示が切り替わり、JavaScriptも多用しています。管理人は実感できないのですが、もしかしたら、そのせいで、表示が重くなっているかもしれません。もしも、フリーズしてしまったという場合は、衣替えはしない方が無難かもです。
関連記事

カスタマイズの備忘録

トラックバックURL
http://noveltemplate.blog26.fc2.com/tb.php/281-087331f7
1コメントを見る
コメントを書く
0トラックバック