CSSテクニックコミュのWin IE5.xの段組について

はじめまして。
皆様のお知恵を拝借したくトピ立てました。宜しくお願い致します。

わたしはMacでWeb制作しているのですが、まだWin環境が整っていないので表示確認ができずに手を焼いております。
（普段はhttp://browsershots.org/を利用して確認してます。）
　
さて、現在以下のページを作っています。
http://homepage.mac.com/office_saya/info-jena/
書式はxhtml1.0+cssです。

おおまかな段組は
=========================
>body
　>親ボックス　div id="wrap"
　　>>ヘッダ　　　 div id="hdr2"
　　　--------------------
　　　>>コン右（画像配置）　div class="conPhoto"
　　　>>コン中央（小見出し）div class="conR"
　　　>>コン左（文章）　　　div class="conL"
　　　--------------------
　　　>>コン右（画像配置）
　　　>>コン中央（小見出し）
　　　>>コン左（文章）
　　　--------------------
　　　・
　　　・
　　　・
　　（繰り返し）

　　>>フッタ div id="ftr"
=========================
以上のように組んでます。
コン左・中央・右はfloat: left;で横並びに配置しています。

で、問題はWin IE5.xでの表示。
コン左のwidth値を無視してコン中央が並び、その下にコン右が配置されてしまうのです。
各コンに設定したwidth値が読まれていないと思いますが、原因がわかりません。。
もちろん、paddingやborderなども考慮してwidth値を算出しております（そもそも、各コンにはpaddingやborderにwidth値を設定していない）。
何が何やら分からなくなってしまいました。。
もう全くお手上げ状態です。

そこで、皆様のお知恵拝借お願い致します。
CSSのどこをどう手直ししたらよいのでしょう？？
漠然とした質問で申し訳ないのですが、どうか宜しくお願い致します。

【URL】
http://homepage.mac.com/office_saya/info-jena/
【CSS】
http://homepage.mac.com/office_saya/info-jena/jena-design.css
http://homepage.mac.com/office_saya/info-jena/basic.css

【参考】
browsershots.org/でのRecent screenshots。
http://browsershots.org/website/http://homepage.mac.com/office_saya/info-jena/

コメント(13)

最初
全て
最新の40件

[1] mixiユーザー 09月30日 18:15

すいません。
便乗で質問してもよろしいでしょうか?
(ダメでしたら無視でお願いします)

上記のCSS見ました。

/* win IE5.xの総width値調性用マークアップ　*/
div.wrapPad{
padding: 0px 24px;
}
/* red.jpg"のwidth776pxにこのpadding 24px+24pxでwidth計824pxにする */
/* end */

ってのは、
1.何のために入ってて
2.どんな効果があるのでしょう?

とーーーっても興味がありました。

ご教授願えませんでしょうか。
よろしくお願いいたします。

[4] mixiユーザー 09月30日 20:45

ARIELさま、飴☄ฺさま、コメント有り難うございます。

まずARIELさまへの回答です。
飴☄ฺさまのコメントの通り、IE5.xはブロック要素の内側領域であるwidth値に外側領域のborderとpaddingの値をも含めてしまうバグがあるので、ブロック要素にwidth値とpadding値を同時に指定する場合には、それらを分離して記述してバグを回避するやり方があるわけです。

なので今回は、idセレクタでpadding値以外の属性を指定し、classセレクタでpadding値のみを指定し、<div id="wrap" class="wrapPad">というdiv１個に２個のセレクタを与える書き方をしました。

仮にこのidセレクタにpadding値をもまとめて書くと、IE5.xでは上記写真1の上段ように背景画像を含めた領域が崩れてしまいます。
<div id="wrap" class="wrapPad">で属性を分離すれば下段の通りです。

[5] mixiユーザー 09月30日 20:54

飴☄さま

ฺコメントありがとうございます。
最もシンプルな形で検証するほうが良いですよね。。

わたしの手元にwin機があれば、リアルタイムに検証しながら修正できるのですが、古いMacしか持って無いもので、バグ回避策を頭の中で想定しながら書いてはbrowsershots.orgに送ってスクリーンショットが返されるのを待って確認ってやってると、だんだんストレスが溜まってきます（＾＾；

今回のケースはwin IE5.xではconPhoto、conL、conR全てがwidth値が取れてないと思うのですが…、なんでそうなるのか全く見当がつきません。。。
Mac IE5.xでは正常なんですが…。

参りました。。

[6] mixiユーザー 09月30日 21:00

画像の中の表記を間違えてました。

コメントNo.4「ARIELさまへの回答です。」に貼りました画像の中で、下段画像の中に「IE6.0以降」と書いてあるけれど、「セレクタ分離後のIE5.x」の誤りです

慌てて作ったので間違えました。

すみません。。

[8] mixiユーザー 09月30日 21:04

なるほど!

ご丁寧な回答を頂き有難うございます!
勉強になりますね。そーいう方法がありましたか。

僕は「width/paddingは絶対に一緒にしない」
という一点だけを守るように書いていたので、
このような「回避」の仕方は正直ヘタでした。

どうしても幅が欲しい時は
・入れ子後にpaddingを入れるか、
・clear入れて指定し直すか、
・背景画像を指すか、
・絶対配置を打つ
・実はソコだけtable
という感じでした。

ありがとうございます!

いやはや、面倒ですよね、ie5は。

[11] mixiユーザー 09月30日 21:18

＞飴☄さま

あ！！ホントだ。。
アップする前に整形処理した際にスペース入ったようです。

ご指摘ありがとうございます。ฺ
ありがとうございます。

[12] mixiユーザー 09月30日 21:29

＞ARIELさま

わたしも毎度毎度のようにIE5回避には頭が痛いです。

実のところ正確にxhtml+CSSで記述し始めたのが最近なので、これからいろんな書き方を学びたいと思っていましたので、ARIELさまの方法も参考にさせてもらいますね。
教えて下さってありがとうございます。

しかし、本当にIE5だけは…（ーー；#　ですよね。。。

[13] mixiユーザー 09月30日 21:35

>10
あ、XMLか。そーですね。
うーん・・・・・・・・・・・・・・・・・・
互換モードとは、Quirksですね。

tuf-16にして逃げる。
たしか、これでxml宣言不要だったような。

正攻法が思いつかない。

ログインすると、みんなのコメントがもっと見れるよ