掲示板/スタイルシート質問板/過去ログ/一覧/ 文字と画像のすき間をなくしたい

0 名前： ギンペイ ： 2006/12/18（月） 11:27 ID:lOUr2InC: 【何をしたいのか】

文字とジフ画像のすき間をなくしたい。
ジフ画像の直後に改行を入れると”IE”でのみ文字と画像のすき間が狭まる理由を知りたい。

【現在の状況】
文字とジフ画像の隙間が開いてしまい何とか狭めたいのですが、うまく行きません。
[fire fox,opera,NS]で表示させますと”opera”でのみすき間がなく表示されますが、他のブラウザでも同じように隙間なく表示させたい。
また、画像の直後に改行を入れると”IE”でのみ画像と文字のすき間が縮まる理由を知りたい。
なおブラウザは全てWINのみで表示させています。

<!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>


<div id="main">
<p class="navimidasi">YELLOWLINE</p>
<img class="yellowline" src="http://www.nizm.co.jp/img/yellowline2.gif" width="135" height="1">
</div>


<div id="sub">
<p class="navimidasi">YELLOWLINE</p>
<img class="yellowline" src="http://www.nizm.co.jp/img/yellowline2.gif" width="135" height="1"><br>

</div>

</body>
</html>

【備考】
”！DOC宣言”はこの記述で行いたいのですが他に適切な宣言がありましたらお聞きしたいのですが。
なにとぞ宜しくお願い板します。

1 名前： カヅサツ ◆ThCi95HEzw ： 2006/12/18（月） 11:27 ［URL］ ID:lY9L7AMa

私なら、画像も「段落」であると見なして p要素でくくります。

<!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">
<STYLE TYPE="text/css">
body {
	background: #37393B;
	margin: 18px 0px 0px 20px;
	font-size:10px;
}
div#main {
	width: 200px;
	padding:20px;
	margin: 0px;
	text-align: left;
}
/* 左メニューの黄色横線 */
.yellowline {
	margin: 0px 0px 0px 0px;
	padding : 0px;
}
.yellowline img{
	width: 135px;
	height: 1px;
}

</style>
</head> 
<body>

<!-- この囲みの文字とジフ画像のすき間をなくしたい -->
<div id="main">
	<p class="navimidasi">YELLOWLINE</p>
	<p class="yellowline"><img src="http://www.nizm.co.jp/img/yellowline2.gif" alt=""></p>
</div>
</body>
</html>

> ジフ画像の直後に改行を入れると”IE”でのみ文字と画像のすき間が狭まる理由を知りたい。

IEは摩訶不思議空間なので私はわかりません。「大いなる宇宙意志の指令」とか「太陽が眩しすぎたから」とかではないでしょうか。

> ”！DOC宣言”はこの記述で行いたいのですが他に適切な宣言がありましたらお聞きしたいのですが。

なぜ transitional でなければならないかによります。現状では Stric にしない理由がわかりません。

2 名前： oga ： 2006/12/18（月） 11:27 ID:cWw8hLch

p要素に直接背景imgとしてもうけるのはいかがでしょうか？

.navimidasi
{
font-size:11px; font-weight:200; color:#F6F0BC;
font-family:sans-selif;
margin: 0px;
padding : 0px;
letter-spacing:1px;
background: url(http://www.nizm.co.jp/img/yellowline2.gif) no-repeat left bottom; 
}

もしくはp要素にボーダーボトムを与えます。でもieではdottedがきちんと表示できない不具合はありますが。

.navimidasi
{
font-size:11px; font-weight:200; color:#F6F0BC;
font-family:sans-selif;
margin: 0px;
padding : 0px;
letter-spacing:1px;
border-bottom: 1px dotted #cdcdcd; 
}

3 名前： ギンペイ ： 2006/12/18（月） 11:27 ID:krUNtol5: カヅサツ様

アドバイスありがとうございました、
”！DOC宣言”のことですが、まだ勉強不足で、購入しました何冊かのスタイルシートの”教則本”で[この宣言に統一して勉強しよう]と思っただけで、深く理解をしたうえでの”この宣言で～”ではありません。幾つか宣言を変えてみましたら表示が微妙に違ったことがありどの宣言が良いのか困り果ててしまったことがありましたので、、、、、、、なんとなくこの宣言で、、、と言うことで書いてしまいました。
勉強してみます。
ありがとうございました。

4 名前： ギンペイ ： 2006/12/18（月） 11:27 ID:krUNtol5: oga 様

貴重なアドバイスありがとうございました。
”p要素に直接背景imgとしてもうけるのは～”
思いつきませんでした、早速試してみましたが思った通りに表示をさせることが出来ました。

まだ、スタイルシートは初心者なのですが、このようなアドバイスをいただくことが出来
とても勉強になります。

ありがとうございました。