フォームを作っているのですが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.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? …
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の方針」に訂正させていただきます。
お探しの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の文字が縦書きになる
-
CSS、width100%でもできる余白
-
【CSSについて】リストをフロー...
-
HTMLのiframeの入れ子について
-
【HTML】【CSS】【Swiper】 元...
-
CSSでボックスのheightが0になる
-
定義リスト dl dd dt
-
テーブル内の文字が揃わない
-
ヘッダーの高さが合わない
-
定義リストに下線をつけたいと...
-
divで囲まれたpaddingの指定を...
-
div内に外部のurlを表示させたい
-
定義リストで先頭にアイコン
-
外側のdivの高さを入れ子のdiv...
-
デスクトップ用のWEBサイトをス...
-
透明divの下に長い余白ができて...
-
背景が下まで表示されないんです。
-
Webサイトretinaディスプレイのcss
-
枠線でメイン部分を囲み、フッ...
-
CSS リンクを枠で囲み背景色を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報