掲示板/スタイルシート質問板/過去ログ/一覧/ ボックス内に画像を納めたい

0 名前： ギンペイ ： 2006/12/19（火） 15:00 ID:KCuJGiQQ: お力を貸していただけないでしょうか、

156×90PXの画像をボックス内に納めたいのですが、
※目的は画像の上、右、に１pxの枠線を表示させたいのですが（分かりやすくbottomにも
枠線を表示させています）IEでは縦幅が画像よりも数ピクセル大きくなってしまいます。

ネットスケープやオペラなどではきっちりと表示さされるのですが、、。
どなたかお分かりの方、お願いできますでしょうか。

宜しくお願いいたします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE></TITLE>
<META http-equiv="Content-Style-Type" content="text/css">

</head>

<STYLE TYPE="text/css">

</style>
<body>

<p class="acce5">
<a href=""><IMG SRC="http://www.nizm.co.jp/mainimg/indian2.jpg" border="0" alt=""></a>

</p>

</div>
</body>
</html>

1 名前：モノ ◆7YMtX/NYmu ： 2006/12/19（火） 15:00 ID:3mXSSG1S

http://cssbug.at.infoseek.co.jp/detail/winie/b001.html

これかしら…？
でも、不明なdoctypeなら互換モードだし…。
(提示されたソースのdoctypeにはミスがあるので)
ちなみにIE7では現象を確認できませんでした。

まずは</head>の位置を修正する。
もし、提示したものがページのソースの全てなら、</div>を削除する。

画像(img)自体にborderを設定するのではだめですか？
ダメなのだとしたら何故ダメなのか、
理由を書いておけば詳しい方が回答をくださるかもしれません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE></TITLE>
<META http-equiv="Content-Style-Type" content="text/css">


<STYLE TYPE="text/css">
<!--

body { 
background: #000000;
margin: 18px 0px 0px 20px;

}

a img{border:none;}

.acce5
{
width:156px;
height:90px;
border-top: solid 1px #6A5759;
border-right: solid 1px #6A5759;
border-bottom: solid 1px #6A5759;
padding:0px;
margin:0px;
}



-->
</style>
</head>
<body>


<p>
<a href=""><IMG SRC="http://www.nizm.co.jp/mainimg/indian2.jpg" alt="" class="acce5"></a>

</p>

</body>
</html>

2 名前： カヅサツ ◆ThCi95HEzw ： 2006/12/19（火） 15:00 ［URL］ ID:O5hEMlpW

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE></TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
</head> 
<STYLE TYPE="text/css">

body { 
	background: #000000;
	margin: 18px 0px 0px 20px;
}
.acce5{
	width:156px;
	height:90px;
	border-top: solid 1px #6A5759;
	border-right: solid 1px #6A5759;
	border-bottom: solid 1px #6A5759;
	padding:0px;
	margin:0px;
}
.acce5 img{
	vertical-align: bottom;
}
a:link img,
a:visited img{
	border-width: 0px;
}
</style>
<body>
<p class="acce5"><a href=""><IMG SRC="http://www.nizm.co.jp/mainimg/indian2.jpg" alt=""></a></p>
</div>
</body>
</html>

コツ：
・親要素(ここではp要素)の開始タグ直後および終了タグ直前に空白(改行など)を入れない
・該当の img要素の vertical-align を bottom にする

たぶんコレでイケると思うのですが、そもそも IE 7 で再現しなかったので不安です。

3 名前： ギンペイ ： 2006/12/19（火） 15:00 ID:KCuJGiQQ: モノさん、

アドバイスありがとうございます、
おっしゃる通り”</head>”の位置がずれていました。また</div>も必要のない所に
記述されていました。
”img”自体に設定をしましたら、解決をいたしました。
色々なご指摘も含めありがとうございました。

4 名前： ギンペイ ： 2006/12/19（火） 15:00 ID:KCuJGiQQ: カヅサツさん

何度かお世話になり、また今回も適切（！！）なアドバイス本当に役に立ちました。
（空白(改行など)を入れない～）でなんなく解決をいたしました。
一人でコツコツと（なれないCSS）に集中していますと、色々見落としたり、またチョッとした知識
のなさで（本人にしては）うーむ！などと腕組みをすることしかりです。
本当にありがとうございました。