掲示板/スタイルシート質問板/過去ログ/一覧/ firefox とIEの反映の違い。ボックスｏｒリスト？

0 名前：りん： 2006/07/22（土） 08:05 ［URL］ ID:J9VLBpF2: 【現在の状況】
→ FirefoxとIE6でスタイルシート部分のボックスの表示の仕方が違う。
IEでは正しく表示されるが、firefoxでは、正しく表示されず、
ボックス内のリスト部分が、ボックスからはみ出てしまい、
全体が崩れた形になる。

【どうしたいのか】
→IEもFIREFOXも正しく表示させたい、

【何をしたのか】
→ <div id="leftcol" > の幅を520px→510に変更。
すると、ボックスは収まるものの、リスト部分が画面の外へはみでる。

下記にＣＳＳのソースを載せておきます。
お手数をお掛けしますが、宜しく御願いします。

/* CSS Document */
#pagewidth{
width:760px;
text-align:left;
margin-left:auto;
margin-right:auto;
}

#leftcol{
width:520px;
float:left;
position:relative;
padding-right: 10px;
}

#maincol{
background-color: #FFFF99;
float: left;
position: relative;
width:240px;
text-align: left;
}
.right {
float: left;
width: 240px;
background-color: #99CC33;
clear: inherit;
}
.topright {
float: inherit;
height: 16px;
width: 100%;
margin-top: 10px;
border-bottom: 1px inset #CCCCCC;
padding-top: 3px;
text-indent: 2px;
clear: both;
}

.navimenu {
background: #F6F6F6 url(31.gif);
border-bottom: 1px inset #CCCCCC;
border-left: 1px ridge #CCCCCC;
letter-spacing: 0.2em;
word-spacing: 1em;
height: auto;
width: 100%;
padding-top: 2px;
padding-left: 8px;
}

.orange {
width: 240px;
background-color: #FFFFFF;
height: 124px;
border-bottom: 2px ridge #CCCCCC;
float: inherit;
clear: both;
}
ul#menu{
margin: 0px 0px 0px 15px;
padding: 0px 0px 0px 0px;
list-style: url(1.gif);

}

ul#menu li{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
ul#menu ul{
margin: 0px 0px 0px 30px;
padding: 0px 0px 0px 0px;
list-style: url(small_orange.gif);
}
ul#menu ul li{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

1 名前： Script41 ： 2006/07/22（土） 08:05 ID:AdP30LW7: 正当なHTML/CSSではありませんが、俗に言うCSSハックを用いることが良く行われています。
ただし、あくまでも対象ブラウザの解釈の違いに依存している裏技なので、バージョンアップなどで期待した通りに動かなくなる可能性があります。

IEのみ適用したい場合に用いられる「アンダースコアハック」
例：
　<div style="width:100px;_width:500px;height:100px;border:solid 1px #cccccc"></div>
　Firefoxなどのブラウザでは、Divの幅は100pxとして表示されるが、IEであれば幅500pxとして表示される。

2 名前：りん： 2006/07/22（土） 08:05 ［URL］ ID:GsJybB3q: レスありがとうございます。

CSSハックについて、自分なりにも調べて見ました。
そのあと、width: 100%;　→width: 240px;に変更してみたりもしました。

また、
#leftcol{
width:520px;　　　　→200px　
}

リスト部分がはみ出ているので、リストの部分にかかっていた
CSSを用いず、デフォルトのリストを用いたりしてみました。

結果、IE　では、200ピクセルに下のにもかかわらず、520ｐｘのまま。
また、Firefoxでは、幅が200ピクセルとなったのですが、
リスト部分は相変わらず、ボックスの外に出たままです。

（お手数をお掛けしますが、URLをご参照下さい。）

この場合、リスト部分が悪い？とも思うのですが、
CSSハックを用いるには、どの部分に対して用いればいいのかが
いまいち、分かりません。

ボックスなのか、リストなのか・・原因が分からないので・・。

この様な時には、CSSハックでこの事例を解決するのですか？
それとも別な方法？

3 名前： カヅサツ ◆ThCi95HEzw ： 2006/07/22（土） 08:05 ［URL］ ID:O5hEMlpW

・HTML 4.01 Transitional で記述する場合、文書型宣言のシステム識別子を省略しないようにしましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

多くのブラウザは、HTML 4.01 Transitional の文書型宣言においてシステム識別子を省略すると、CSSなどのルールを誤って解釈していまいます。そして、その解釈の仕方がブラウザによって微妙に一致しないため、今回のような問題が起こりがちです。

・div要素内の左右余白は、そのdiv要素に左右パディングを指定するのではなく、div要素内のブロック要素の左右marginを指定するようにすると、widthの計算が楽になります。

・長文のソースを読むのは大変ですので、問題が起こる部分だけ過不足なく抜き出して相談されると塩梅が良いです。

4 名前：りん： 2006/07/22（土） 08:05 ID:wtlrWKoU: レスありがとうござます。

一つずつ、素人ながら自分なりに検証してみました。
HTML 4.01 Transitional の文書型宣言も変えて見ましたが、
変化はありませんでした。（宣言の変更・追加でも変化なし）

しかし、発見！もありましたが、私にはどうしてなの？と言う感じで・・。
ご意見頂ければ有難いです。

問題となっていたのは、リストがボックスからはみ出るのが一番の問題点。

そこで、対象部分の設定値を一つずつ検証。
ちなみに検証した時には、いらないソース（CSSとHTMLの両方とも）は
全てなくし、検証。

下記ソースで、ほぼ全てです。

すると・・CSSソース内の　「.topright」の
「padding-top」と「height」の値の合計値が「１７」以上の場合に
リストがボックスから飛びしてしまいました。

＊CSSソース＊
＿＿＿＿＿＿＿＿＿＿＿＿
#maincol{
background-color: #FFFF99;
float: left;
position: relative;
width:240px;
text-align: left;
}

.topright {
float: inherit;
height: 13px;
width: 240px;
padding-top: 3px;
background: #0066cc;
clear: both;
}

＊HTMLソース＊
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
～～～～～～～～～～～
<body>
<div id="maincol">
<div class="topright"></div>
<div class="navimenu">
<ul id="menu"><li>list<ul><li>list</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

先ほどは、長いソースの記述、すみませんでした。
お手数をお掛けしますが、同件についてのご意見を頂ければ有難いです。

5 名前：りん： 2006/07/22（土） 08:05 ID:wtlrWKoU: 追記・・・書き忘れたので・・。

合計値を17以上になると、FIREFOX　でリストがボックスから出ました。
１６以下では、IE、firefox　とも正常に表示され、
リストがボックス内に収まっていました。

6 名前： カヅサツ ◆ThCi95HEzw ： 2006/07/22（土） 08:05 ［URL］ ID:f0UXxXRM

>>4 を firefox 1.5.0.1 で検証してみましたが、別にハミ出ないですよ。
ソースは合っていますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title>test</title>
<style type="text/css">
#maincol{
	background-color: #FFFF99;
	float: left;
	position: relative;
	width:240px;
	text-align: left;
}
.topright {
	float: inherit;
	height: 13px;
	width: 240px;
	padding-top: 3px;
	background: #0066cc;
	clear: both;
}
</style>
</head>
<body>
<div id="maincol">
	<div class="topright">
	</div>
	<div class="navimenu">
		<ul id="menu">
			<li>list
				<ul>
					<li>list</li>
				</ul>
			</li>
		</ul>
	</div> 
</div>
</body>
</html>