5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

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

1 :気の早い1:03/04/12 03:35 ID:???
CSSに関する質問はこちらへどうぞ。 ※ 議論はよそで ※
■■■■■ 質問のしかた ■■■■■
・基礎は解説サイト(>>4・かなりわかりやすい)で勉強してください。
・質問の前に【FAQ】(>>5-7)を参照して、既出の再掲を避けて下さい。
・【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
 WinIEの場合は、[Ctrl+F]で検索できます。
・ブラウザによって対応していないプロパティーやバグがありますので、
 【解説など】(>>4)の対応表や「CSSバグリスト」に目を通しておきませう。
・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
 正当(valid)なHTMLを心がけて下さい。

初心者の疑問は大抵ここまでで解決します。

・OSやブラウザの種類とヴァージョンについては必ず明記してください。
 特にNetscapeは、ver.4までと6以降でまったく別物です。
・「環境を書け」とか「ソースは?」と求められたら応じませう。
 その方が回答が早く得られます。

過去スレや関連リンクは>>2-10
【過去ログ】【関聯スレ】>>2
【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-7

http://fake_lint.tripod.co.jp/css.html
【FAQ】 http://fake_lint.tripod.co.jp/css.html#faq
【過去ログ】 http://fake_lint.tripod.co.jp/css.html#log
【関連リンク】 http://fake_lint.tripod.co.jp/css.html#related

23 :Name_Not_Found:03/04/12 11:32 ID:Grrv8eF+
前スレの911ですが、まだ問題を解決できていません。 ページに背景色つきの上枠を作りたいのですが、
常套手段ではIE5.0で致命的な表示不良が起こり、 これを回避する方法を考えています。

htmlのソースはこうです。

<div id="uewaku">

<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>

<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>

</div>

スタイルシートはこれで問題はありません(ie5.5-6/ns7/op7)。

#uewaku { width: 100%; height: 40px; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 40%; }
#migiue { float: right; text-align: right; width: 40%; }

質問はつづく。


24 :Name_Not_Found:03/04/12 11:35 ID:Grrv8eF+
しかしこれだとie5で見るに絶えない空恐ろしい状態になります。原因は
#uewakuのwidthとheightで、これさえのければよいのですが、
そうするとn7/op7などでは#uewakuが0行と認知されて背景色がつきません。
そこでwidthとheightを指定せず、#uewakuの閉じタグ</div>の前に
<br style="clear:both">と入れると無事、ie5/n7/op7で同じ
表示が得られるのですが、今度はie6がheightを40pxプラス<br>と
認知して表示します。

そこでやっぱり<br style="clear:both">はやめにして、
スタイルシートを変更、

#uewaku { background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
#migiue { float: right; text-align: right; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }

として、要するに#uewaku不要にしてみたのですが、これだど
n7/op7でなぜか#migiueと#hidariueの間に隙間が生じます。
margin,padding,borderを加えて全部0にしてもだめです。

width,heightを使わず、同じ表示を得るよい手はないでしょうか。


25 :Name_Not_Found:03/04/12 12:00 ID:???
>>24
あのさ、そのバグの解決法は俺のスキルじゃちょっとわからないんだけど、
IE5.0わかってるだけでも相当なバグがあるから、IE5.0でもきっちり同じ見栄えを、
と思うならJavascriptで振り分けたほうがいいと思う。

26 :Name_Not_Found:03/04/12 12:03 ID:???
>>23-24
それはFAQのA4に既出。>>7見て。
>これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
> http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
>  http://cssbug.tripod.co.jp/detail/winie/b079.html
>   http://pc2.2ch.net/test/read.cgi/hp/991666454/683n

27 :26:03/04/12 12:10 ID:???
ごめん、A4でなくてA5だな。
要するに、<br style="clear:both">を入れて、且つ#uewakuにwidthを指定すること。

28 :24:03/04/12 12:26 ID:Grrv8eF+
皆さん、ありがとう。レスがついて幸せです。ようやく解決しました。
多少のバクなら目をつぶったのですが、かなりシェアのあるIE5で
heightが1000pxにされるような恐ろしいバグはさすがに見逃せません。
>>27さん、widthとheightは使わずに、という条件なので
貫徹してまで悩みぬいたのです(泣)

解決はこう。
<br style="clear:both">の変わりに、
<div> </div>に書き換え。
スタイルシートは、
div { clear: both; line-height: 0px; }

brでクリアするとIE6でheightの幅が大きくなります。そこで
空白文字を入れて、それをline-height:0pxで消したわけです。
あまりに悲しい解決法だったので、divのクラス名は「悲しい」にしました。
いままで安易に<br style="clear:both">していた方、
悲しいけど、こちらのほうが安全です。。。

29 :Name_Not_Found:03/04/12 12:32 ID:???
>>28
<hr style="clear:left;margin:0;height:0;"> の方がいいのでは。
但し互換(Quirks)モードだと、Mozillaに限り効かないけどね。

で、いままでのこと「バグ辞典スレッド」に登録しておいてくれない?

30 :Name_Not_Found:03/04/12 12:33 ID:???
あまりにアレな解決法なんで口出ししてみる
同じ結果を得るのに必要なプロパティだけに絞ってみた
これでぶっ壊れるようなバグはIE5にはなかったと思うんだが・・・

#uewaku { height:41px; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 40%; } /*widthは画像に合わせてもいい*/
#migiue { text-align: right; }

31 :26:03/04/12 12:39 ID:???
>>30の指摘する通り、#migiueのfloat:rightは不要だな。これでいいはずだが。
#uewaku { width: 100%; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
#migiue { margin-left: 51%; text-align: right; height: 41px; background-color: #333000; color: #b7a800; }
<div id="uewaku">
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<br style="clear:both">
</div>


32 :24:03/04/12 14:15 ID:Grrv8eF+
>>29
<hr style="clear:left;margin:0;height:0;">が通用するのは
オペラ7だけのようです。

>>30さん、>>31さん、#uewakuにはwidthとheightのどちらか片方だけ
でもIE5.0でむごい障害が発生します。となると、clearするしか
方法はなさそうです。
ちなみに#migiwakuは簡略化しています。そこにはフォーム部品などが
ごてごて入っているのでfloatにしました。怪しんで消してみましたが、
floatは無関係でした。

<br style="clear:both">は曲者で、IE5とIE5.5−6で解釈が異なります。
NS7/OP7はすなおにクリアするだけですが、IE6でそれをすると
heightの下にプラスbrの1em分の余白が生じます。


33 :Name_Not_Found:03/04/12 14:22 ID:???
>>31−32
widthが使えないなら、#migiwakuにfloat:rightは必須。
で、ブロック要素内では左揃いだからtext-align:rightも必須。


34 :Name_Not_Found:03/04/12 14:25 ID:???
>>32
>#uewakuにはwidthとheightのどちらか片方だけ
>でもIE5.0でむごい障害が発生します。

具体的には? 再現条件は本当にwidthの所為だけなのか? 下記へどうぞ。

・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc2.2ch.net/test/read.cgi/hp/991666454/l50

35 :Name_Not_Found:03/04/12 14:28 ID:???
>>32
><br style="clear:both">は曲者で、IE5とIE5.5−6で解釈が異なります。
>NS7/OP7はすなおにクリアするだけですが、IE6でそれをすると
>heightの下にプラスbrの1em分の余白が生じます。

それは、#uewakuにheightを指定してるからだろ。
cf. http://cssbug.tripod.co.jp/detail/winie/b079.html

36 :Name_Not_Found:03/04/12 14:50 ID:???
>>23-24
#hidariueの中に高さ40pxのimg要素があるなら、height指定なんか要らないのでは?
#uewaku { background-color: #333000; color: #b7a800; }
#migiue { float:right; width:50%; text-align: right;}
#hidariue {height: 41px;}
<div id="uewaku">
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
</div>

37 :24:03/04/12 14:53 ID:???
>>35
いいえ。
heightの下にプラスbrの1em分の余白、というのは、
画像の縦幅プラスbr1行分の余白のことです。
でも、ここでの大前提はwidthとheightを指定しないという
一種の異常事態でのことですから。

DHMLバク辞典のほうに移ってソースをアップします。

38 :Name_Not_Found:03/04/12 15:05 ID:???
>>37 >>36の通りにしてもうまくゆかない? 
ポイントは右左の記述順序を逆にしてfloat:right;にすることと、
#hidariueにはfloatを指定しないこと。

39 :24:03/04/12 15:24 ID:???
>>36
おっしゃるとおりにhtmlソースの#migiueと#hidariueを入れ替えて、
cssも36さんが書いた通りに書き換えましたが、だめでした。
#uewakuにwidthもheightもないのに、もう訳がわかりません。
もちろんIE5意外ではきちんと表示されます。

265 KB
★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)