/* CSS･スタイルシート質問スレッド【28】 */

ブラウザによるCSS解釈の違いに関する質問です。
当方はWeb製作はあまりやらない素人ですが、あるページのCSSがブラウザによってヘンに表示されたので、原因や解決法を疑問に思いました。

当方はMac OS 9.2を使っており、該当ページはNetscape7.01において正しく表示されたようですが、Mac IE 5.1.6において、制作者の意図と異なる表示になるようです。

他人様のサイトなので晒すようなまねはいかんと思いますが
該当ページは
div.a
　h2　span.a　/h2
　div.b
　　div.c
　　　h3　span.b　/h3
　　　本文
　　/div.c
　/div.b
　div.d
　コメント
　/div.d
/div.a

というような構造です。
スタイルシートでdiv.aの定義にbackground-colorとbackground-imageが設定されています。（ほかにもたくさん細々）
で、見た目上、h2の部分を除いたdiv.bとdiv.dが一続きの囲みで囲まれるようにしてあり、背景の塗りと右の枠線に、div.aのbackground-colorとbackground-imageが適応されています。
ところがMac IEで見ると、h2の部分にもdiv.aの背景の塗りと右枠線が出ているのです。

これはMac IEの方が正しいような気もするんですが、どういうバグなのでしょうか？
素人なのでポイントを外しているかもしれません。

ページ全体を囲うクラスに背景色+height指定した時、その中の内容がheight値を越えた時
IEなどはheight値以上に勝手に伸びてくれるのですが、ネスケ7.1だけheight値固定になってしまい文字が背景色からはみ出た状態で表示されます。
HTMLは弄らずにCSSだけで回避する良い方法ってありますか？

height指定をやめる

>>27
何が言いたいか良く解らんがとりあえずDIV厨やめたら直るかもね

br要素にcssを割り当てるのはいいんでしょうか。
display:none;とか

>>31
いいよ。

OLリストで、番号の前に文字を置く方法はありますでしょうか？

<ol>
<li>××
<li>△△
<li>○○
</ol>

↓こうしたい

Q.1 ××
Q.2 △△
Q.3 ○○

以下の方法は、OperaではOKでしたが、IEでは無視されました…。

ol li { display: block; }
ol li:before {
display: marker;
content: "Q." counter(no) " ";
counter-increment: no;
}

ｶﾞｲｼｭﾂないしｽﾚ違いだったらごめんなさい。

>33
その方法が正しいはずだが、IEはdisplay:markerにもcounter関連にもcontentにも対応してない。

で、IEで質問の見た目を満たす方法は…
CSSだけじゃ無理じゃないかな、JavaScriptの力を借りないと。

>>27
CSSのソースを出してくれないとわからないな。
晒してもいいんぢゃない？　さもなくばコピー＆ペーストで該当箇所を引用する。

>>28
IEは間違ってます。
　Internet Explorer (Windows) CSSバグリスト
　ボックスサイズが内容物に合わせた大きさへ強制的に調整される(IE6)
　http://cssbug.at.infoseek.co.jp/detail/winie/b052.html

>>31
いいけど、注意。
　Internet Explorer (MacOS) CSSバグリスト
　ブロック要素化したbr要素をテーブル内で使用するとセル幅が異常になる(IE5)
　http://cssbug.at.infoseek.co.jp/detail/macie/b006.html

>>30
やっぱわかりませんか。
div厨っていう言葉、初めて知りました。
divばっかり使うのはあまり良くないという事でしょうか？

そのサイトは実はフリーのブログ系サービスを使って構築されているので、
CSSは自分で書けるけれど、divとかそのクラスなどのHTMLの構造はいじれないんです。

>>35
やっぱりそうですか。
ちょっとソースは長いんですよね。私が勝手に関係あると思ったのが以下の部分。

h2{
margin:100px 0px 0px 0px;
padding:0px;
background-image:url("ｈｔｔｐほげほげ");
background-repeat:no-repeat;
background-position:top right;
font-sixe:x-small;
}

div.a{
margin-right:10%;
background-color:#333388;
background-image:url("ｈｔｔｐもこもこ");
background-repeat:repeat-y;
background-position:right;
}

span.a{
position:relative;
z-index:1;
top:-100px;
left:-14px;
display:block;
padding-top:50px;
padding-left:60px;
width:490px;
height:110px;
background-image:url("ｈｔｔｐのこのこ");
background-repeat:no-repeat;
background-position:top left;
cursor:hand;
font-family:"System", monospace;
font-size:x-large;
}

これで、Mac IEだとh2とかspan.aの背景にもdiv.aの背景色やイメージが出てる状態です。