legendの見え方？

解決済

質問者：asd3330
質問日時：2008/05/22 23:44
回答数：3件

フォームを作っているのですがfirefoxで見るとlegendの
width指定が全く効きません・・・
ie6で見ると意図したように表示されます！

display:block;などいろいろ試してみたのですがなにも
変わらずでした。
firefoxでも意図したように見えるためにはどうすれば
いいのでしょうか？宜しくお願いします。

---html---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="../css/form.css" type="text/css" />
<title>title</title>
</head>
<body>

<div>
<form name="form1" method="post">
<fieldset>
<legend>情報1</legend>
<label for="name">氏名<span class="check">※</span></label>
<input type="text" name="NAME" class="w180" /><br />
<label for="address">住所<span class="check">※</span></label>
<input name="ADDRESS" type="text" class="w180" /><br />
</fieldset>

<fieldset>
<legend>情報2</legend>
<label for="tel">電話番号<span class="check">※</span></label>
<input name="TEL" type="text" class="w180" /><br />
<label for="fax">FAX番号</label>
<input name="FAX" type="text" class="w180" /><br />
</fieldset>

<p align="center"><input type="submit" value="送信" /></p>
</form>
</div>

</body>
</html>

---css---
fieldset {
display: block;
width: 500px;
margin: 0 auto 0.5em auto;
padding: 5px;
text-align: center;
border: solid 1px #278ed1;
font-family: verdana, sans-serif;
line-height: 1.5em;
}

legend {
display: block;
width: 180px;
height: 31px;
margin-bottom: 5px;
padding: 7px 0 3px 7px;
background: #fff url(../images/form/legend_bg.gif) no-repeat;
font-size: 1.1em;
font-weight: bold;
color: #fff;
text-align: left;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： tsucu
回答日時：2008/05/23 01:02

これはFirefoxのバグではなく、CSSの仕様通りに忠実に解釈しているらしいです。

<a><legend>というのは、非置換インライン要素というらしいです。

下記に詳しい内容があります。
http://www.mozilla.gr.jp/standards/webtips/webti …

簡単に言うと、widthは効きませんよってことです。

そして、私はと言うとですね、良いか悪いかはさておき、paddingをつかってボックスの大きさの調整をしちゃってます。

- 0
- 件

通報する

No.3

回答者： kuzumiHK
回答日時：2008/05/23 19:55

No.1です。

No.2さんのおっしゃるとおり、
aタグなどのインライン要素はwidthが効かないですが、
通常はdisplay:blockを指定すれば、
Firefoxであってもwidthが効くようになっています。

今回、legendタグにdisplay:blockを指定しても、
widthがまったく効かなかったことから
前述にて、思わず「Firefoxのバグ」と言い切ってしまいましたが、
legendタグの使い方を考えると、
Mozillaの方針として効かせなくしているという可能性もありますので、
「単なるバグ、もしくはMozillaの方針」に訂正させていただきます。

- 0
- 件

通報する

No.1

回答者： kuzumiHK
回答日時：2008/05/23 00:31

Firefoxのバグみたいですね。

<legend>タグ内に<span>タグを内包すれば、一応制御はできるようです。

span.test{
display: block;
width: 300px;
}

<legend><span class="test">情報1</span></legend>

参考URL：http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi? …