スタイルシートについて教えてください。

ソース
<style>
dd{font-size: 12px;
color: Black;
margin: -15px 0px 0px 60px;
}
</style>
<dl>
<dt>住所</dt>
<dd>〒700-0941 岡山県岡山市</dd>
<dt>TEL</dt>
<dd>000-000-0000</dd>
<dt>FAX</dt>
<dd>000-000-0000</dd>
<dt>営業時間</dt>
<dd>AM10:00〜PM8:00</dd>
<dt>定休日</dt>
<dd>毎週火曜日</dd>
</dl>
の場合
ブラウザーMOZIRAでマージンの指定ができません。IE6ではOKです。良い対策はありませんか。
どうしてもこのタグでマークアップする場合です。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/01/19 13:16:27
  • 終了:--

回答(5件)

id:quintia No.1

quintia回答回数562ベストアンサー獲得回数712005/01/19 13:47:09

ポイント20pt

<style>

.dd{font-size: 12px;

color: Black;

margin: -15px 0px 0px 60px;

}

</style>

では? dd → .dd

id:quintia No.2

quintia回答回数562ベストアンサー獲得回数712005/01/19 13:52:50

ポイント20pt

とんだ間違いの回答をしてしまいました。

破棄してください。

こちらではMozilla, FireFox, IE でうまく動いている様に見えます。

id:aki0843 No.3

aki0843回答回数5ベストアンサー獲得回数02005/01/19 16:56:48

ポイント20pt

マージン特性(margin, margin-*)に負の値を指定したときの振る舞いに対して、仕様書は「実装固有の制限が存在してもよい」としています。つまり、IE6のように表示してもいいし、Mozillaのように表示してもいいということです。

なお、<dt>と同じ行に<dd>が表示されることを期待してこのように記述しているのでしたら、この表記法は避けた方が無難だと思います。なぜなら、実際に表示した際にズレたり、重なったりする可能性があるためためです。これは、行の高さが15pxだとは限らず、「営業時間」というテキストが60px以下の幅でレンダリングされる保証も無いことに起因します。せめて、長さの単位として、文字サイズから計算される値である「em」を使い、また、dt要素の幅をwidthで明示的に指定するよう薦めます。

なお、<dt>と同じ行に<dd>が表示されることを期待しているのでしたら、マージンを制御するよりも(HTML4.01の非推奨要素に含まれている)「compact属性」を使う方法もあることを書き添えておきます。ただし、IEはCSSでのcompact指定に対応しておらず、また、手元のWindows用最新版FireFoxではいずれの場合にも期待通りの表示を得られませんでしたが。

<html>

<head>

<style type=”text/css”><!--

DT{ display: compact; }

DD{ margin-left: 4em; }

-->

</style>

</head>

<body>

<dl compact=”compact”>

<dt>住所</dt>

<dd>〒700-0941 岡山県岡山市</dd>

<dt>TEL</dt>

<dd>000-000-0000</dd>

<dt>FAX</dt>

<dd>000-000-0000</dd>

<dt>営業時間</dt>

<dd>AM10:00〜PM8:00</dd>

<dt>定休日</dt>

<dd>毎週火曜日</dd>

</dl>

</body>

</html>

id:moriamko44728

ありがとうございます。

たいへん参考になりました。

ためしてみます。

2005/01/19 23:58:52
id:MrT No.4

MrT回答回数98ベストアンサー獲得回数02005/01/19 18:06:14

ポイント20pt

上記をie6,Opera8Beta1,Ns7.1で確認しましたが、全てマージンは働きました。

Gecko系ブラウザのNs7.1で大丈夫なので、Moziraもバージョンによっては大丈夫かと思います。

ですが、確かに上記URLにあるようにMozilla1.4全般で起こる現象のようです。

ただ、マージンに負の値を入れた場合には、ieの事を考えるならボーダーは入れないで下さいね。

ご存じかもしれませんが。

id:MrT No.5

MrT回答回数98ベストアンサー獲得回数02005/01/19 18:15:25

ポイント20pt

すみません、先ほど余計な事まで書いたにもかかわらず、結論を書き忘れたので、追記です。

(こちらにポイントはいりません。こちらのURLはダミーです。先ほどの書込のURLはダミーではありません。)

Mozilla等をメインで使用しているユーザは大半が新し物好きで、最新版を用いていると思います。

古いのを用いているのは、普段は使わず、検証用に用いている人とかの一部の人ではないかと。

なので、そのままアップしても良いのではないかと思います。

id:moriamko44728

ありがとうございます

助かりました。

2005/01/20 10:49:47

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません