フォームを作っているのですが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;
}
No.2ベストアンサー
- 回答日時:
これはFirefoxのバグではなく、CSSの仕様通りに忠実に解釈しているらしいです。
<a><legend>というのは、非置換インライン要素というらしいです。下記に詳しい内容があります。
http://www.mozilla.gr.jp/standards/webtips/webti …
簡単に言うと、widthは効きませんよってことです。
そして、私はと言うとですね、良いか悪いかはさておき、paddingをつかってボックスの大きさの調整をしちゃってます。
No.3
- 回答日時:
No.1です。
No.2さんのおっしゃるとおり、aタグなどのインライン要素はwidthが効かないですが、
通常はdisplay:blockを指定すれば、
Firefoxであってもwidthが効くようになっています。
今回、legendタグにdisplay:blockを指定しても、
widthがまったく効かなかったことから
前述にて、思わず「Firefoxのバグ」と言い切ってしまいましたが、
legendタグの使い方を考えると、
Mozillaの方針として効かせなくしているという可能性もありますので、
「単なるバグ、もしくはMozillaの方針」に訂正させていただきます。
No.1
- 回答日時:
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? …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
初心者html・CSS ウィンドウを...
-
safariだけCSSが崩れてしまいます
-
画像だけを端に寄せる方法
-
CSS、width100%でもできる余白
-
HTMLで一部だけスクロールする...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
safariだけ、cssが効きません!
-
div領域をウインドウサイズに合...
-
z-indexで上になっている要素だ...
-
safariでの横並びリスト(List...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
borderをページの下まで伸ばしたい
-
ヘッダーの画像にメインエリア...
-
border-style:solidで文字がずれる
-
中点「・」の改行について
-
widthやheightの数値に単位(px...
-
form input テキストを上下中央...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
スクロールボックスを中央に配...
-
【CSS】ヘッダーの高さが不明の...
-
CSS:animation開始位置の設定
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
【HTML】【CSS】【Swiper】 元...
-
CSSでボックスのheightが0になる
-
divで囲まれたpaddingの指定を...
-
CSSで指定した背景画像にリンク...
-
【HTML&CSS】フッター下部の余...
-
HTMLのiframeの入れ子について
-
画像と一緒にスライドするリン...
-
ページを拡大縮小でborderが消...
おすすめ情報