人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートについて教えてください。
ソース
<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です。良い対策はありませんか。
どうしてもこのタグでマークアップする場合です。

●質問者: moriamko44728
●カテゴリ:コンピュータ
✍キーワード:00 COLOR DD FAX IE6
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● quintia
●20ポイント

http://www.hatena.ne.jp/

はてな

<style>

.dd{font-size: 12px;

color: Black;

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

}

</style>

では? dd → .dd


2 ● quintia
●20ポイント

http://www.goo.ne.jp/

goo

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

破棄してください。

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


3 ● aki0843
●20ポイント

http://www.y-adagio.com/public/standards/tr_css2/box.html#ma...

Box model

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

http://www.y-adagio.com/public/standards/tr_css2/syndata.htm...

CSS2 syntax and basic data types

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

http://www.y-adagio.com/public/standards/tr_css2/visuren.htm...

Visual formatting model

なお、<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>

◎質問者からの返答

ありがとうございます。

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

ためしてみます。


4 ● MrT
●20ポイント

http://cssbug.at.infoseek.co.jp/detail/mozilla/b067.html

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

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

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

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

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

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


5 ● MrT
●20ポイント

http://www.hatena.ne.jp/awindow?qid=1106108187

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

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

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

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

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

◎質問者からの返答

ありがとうございます

助かりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ