というわけで、レイアウト変更してしまいました。（再び）
macのサファリとFireFOXでレイアウトが崩れないようにと試行錯誤してたんですが・・・これでほんとに最後にしますわー。（苦笑）
構造的には画像のとおりなんですが、かなり入れ子な構造となつてます。
説明するの面倒なんで続き以下に転記。
これでも無理なら最後の手段として、バッヂ貼りますです、はい。（苦笑）
<!– メインレイアウトBOX開始 –>
：
：
：
<!– 左レイアウトBOX開始 –>→float:left
：
：
：
<!– 左サイドバー開始 –>
：
：
：
<!– 左サイドバー終了 –>
<div style="clear: both;"></div>
<!– 左レイアウトBOX終了 –>
<!– 右レイアウトBOX開始 –>→float:left;width:auto
：
：
：
<!– 右サイドバー開始 –>→float：raight
：
：
：
<!– 右サイドバー終了 –>
<div style="clear: both;"></div>
<!– コンテンツレイアウトBOX開始 –>
：
：
：
<!– カレンダー –>→float:left
：
：
：
<!– 中央コンテンツ –>→float:left;width:auto;
：
：
：
<!– 中央コンテンツ終了 –>
<div style="clear: both;"></div>
<!– コンテンツレイアウトBOX終わり–>
<div style="clear: both;"></div>
<!– 右レイアウトBOX終わり –>
<!– メインレイアウトBOX終わり –>
TrackBack URL for this entry:
Listed below are links to blogs that reference this entry:
Comments
おはようございます。。。
スクリーンショットです。
Safari
http://homepage2.nifty.com/HDK/grk/safari3/
FireFox
http://homepage2.nifty.com/HDK/grk/fire3/
残念ながら、まだ、ずれてますね。。。
これが最後の修正とのことですが、また、気が向いたら修正してみてください。
お知らせ戴ければ、Safariでの見え方確認致します。
＃スクリーンショットはしばらくは置いておきますが、そのうち消しちゃうと思いますので、ご入り用（！？）でしたら保存しておいてくださいませ。
では。
＞ palmyeti さん
こんちわー。＾＾
いつもありがとうございます。
一個、クラス名の書き間違いあって、スタイルシートに反映されてませんでした。（汗）
なおしてみたのですが、変わりませんかねー？
どうも、、、
＃ちょうど夜勤明けの朝寝から目が覚めたところでした。
クラスの指定を変更されたとのことですが、見え方は、残念ながら変りません。
safariでは、
縦一列に、伸びています。
FireFoxでは、
エントリー部分が下の全幅に広がっています。
何か解決策があると良いですが。。。
＞ palmyeti さん
素早いレスありがとうございます。＾＾
了解しました。と言うわけで、今、実はワイド固定に直してたりします。ワイド固定で駄目なら終了ですねー。（苦笑）
おしい、sidebar周辺が崩れています。
BOXの作り方等は問題ないんですが、我がNagaBLOGと同じエラーをしちゃってますよ。そう、テキストボックスです。サイドバーの検索窓の設定文字数が多すぎで、Safariの場合、サイドバーの横幅からはみ出したお陰で、コンテンツ部分が下に下がってしまったわけです。今の半分ぐらいの文字数に設定すればOKですよ。
＞ naganaga さん
こんちわー。
チェックありがとうございます。＾＾
忘れてました。
size を auto 設定に直してみましたがいかがですー？
＞ palmyeti さん、naganaga さん
この度は色々とありがとうございました。感謝です。＾＾
どうやら今のCSSで落ち着きそうです。
まー、様子見ということで。
追記です。
一点、さっき気づいた点をば。
もしかしたら、レイアウトくずれはDocTypeスイッチの問題だったのかな～なんて思いました。
今となってはですが。（苦笑）
一度、W3Cのxhtmlの内容を見直してみたいと思いますー。
>Border. さん
サイドバーの検索窓のsizeをautoにしたそうですが、この部分ってOSやブラウザーの設定に支配されちゃうんですよね。文字の大きさが微妙に違うんでautoにするとはみ出してしまうわけです。少し格好悪いけど枠より小さい目になるように文字数を設定するかpixel数で横幅を設定(個人的には未確認)した方がいいと思います。枠より小さくは鉄則です。
後、自分がソースを見た限りでは今回のレイアウトくずれはDocTypeは、ほぼ関係ないと思いますよ。Safariの場合、WIN版FireFoxで問題なく表示されていれば90%以上の確立で問題なく表示されます。要はタコなのはIEの方なので、IEの表示に関しては疑ってかかるぐらい方が健全です。
＞ naganagaさん
おはようございます。＾＾
文字数、さっそく直しときました。ありがとうございます。
いやー、DOCTYPEじゃないなーと思いつつ、ネタとして。（苦笑）
確かにieがタコなんでしょうねー。ただ、そのie系で訪問数の8割以上をしめてしまうという・・・。
今回は色々と勉強になりました。ありがとうございます。＾＾
>Border. さん
サイドバーの検索窓が修正されているのに、レイアウトがコンテンツのBOXが下に行っているのは、なんでかな～と調べてみると、サイドバーの一番下に貼っているバナースイッチが、枠からはみ出しているのに気が付きました。これも枠内に収めないといけませんねぇ～。これを修正すると完璧か?
>Border. さん
すみません、間違えてました。下記のコメントを修正します。バナーサイズにだまされてしまいました。リスト関係のタグを設定していないために、Safariのバグに引っかかっているようです。(FireFoxでは問題ない)
CSSに
ul,li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
を追加して下さい。これで、Safariのバグは回避できるはずです。
下記のCSSでページ全体のulとliをリセットして、から改めてサイドバー専用としてCSSを設定します。
.sidebar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.sidebar li {
font-size: 10px;
text-align: left;
margin: 0px 0px 3px 22px;
padding: 0px;
}
liに設定してあるmargin-bottomは行間、margin-leftは枠内に収めるための位置指定になります。デザインに合わせて変更して下さい。
＞ naganagaさん
ありがとうございます。＾＾
ul、li は一応スタイルシートに設定してるのですが、今日帰ったらご教示の通り見直してみます。
一点、サブカテのMTのタグでちょいと問題が一個ありました。たぶんデフォルトのままで使用してるんですが、li のタグが一つ閉じられてないんですよねー。
二つ使用しているのですが、一個だけ。
後方互換ですと閉じタグが無くても修正してくれますが、標準仕様だと厳密に解釈されるので、こいつが問題なのかなと思い手直しをしてみましたが・・・いかがですかねー・・・。