現在WEBサイトを制作しています。
フォームを挿入したのですが、IE(8)で表示すると<form>要素の上部に大きなスペースが空いてしまいます。Firefoxで表示すると問題ないです。
HTMLのフォーム付近は以下のような構成にしています。
<p>フォーム上部の文章</p>
<form method="#" action="#">
<table>
<tr><td>テキスト</td> <td><input type="text" name="#"></td></tr>
・
・
</table>
</form>
IEでは<p>の文章と<form>テーブルとの間に大きなスペース(約200px)ができてしまいます。
Firefoxではたまたまうまく処理されていて、間違った記述をしていると考えるべきでしょうか。
それとも、IEブラウザの不具合なのでしょうか。
このような症状についてご存知の方がいらっしゃいまいしたらごご教授いただけますようお願い申し上げます。
No.2ベストアンサー
- 回答日時:
<p>フォーム上部の文章</p><form method="#" action="#"><table><tr><td>テキスト</td><td><input type="text" name="#"></td></tr></table></form>
---------------------
1行にしてもダメですか? これが原因って場合もあります。
確かに、フォーム関係で多少の差異があるのは確かです。
しかし、この程度のソースで、IE8で差異がでるとしたら、
制作者のミスが第一に考えられます。
IE8はかなり良く(進化)なったので、200pxものスペースが空く事はありませんので、CSSでの設定がどこか間違っているのかもしれません(値とか単位とか)。
システム側で改行などのが埋め込まれるパターンかもしれません。
ブラウザからソースを見るか、単純化して再検証するかすれば判断出来るでしょう。
詳しいご回答をありがとうございます。
いろいろ修正しているうちに問題のスペースは50px程になりました。
アドバイスいただいたようにtableを1行にすると問題のform上部分が小さくなりました。
行を増やす毎に大きくなるようです。
ブラウザから確認すると、上部の文章とformとの間はスペースではなくform要素の上部分が大きいことがわかりました。(backgroundカラーを付けて確認しました)
考えられる場所全てにmargin,paddingの指定を試しますが、まだ解決しません。
引き続き、他サイトのコードを参考にするなどして解決策や記述ミスを探してみようと思います。
この度は大変ありがとうございました。
またご質問させていただいた時はどうぞ宜しくお願い致します。
No.1
- 回答日時:
reset.cssの導入をおすすめします。
「ユーザーからCSSによる特別な指定が無い場合、
各要素の周囲にどの程度隙間を設けるか」
については、ブラウザがそれぞれ固有の設定を持っています。
したがって、同じHTML,CSSをもっても、
どうしても、表示には差が出てしまいます。
そこで出来た解決策が、
ブラウザによる独自設定をまっさらにするCSSをまず読み込ませ、
その後必要な要素に対してCSSを設定していく
という手法です。
この「まっさらにするCSS」は、
reset.css という名前で何種類も出回っています。
検索してお好きなものを使ってみてください。
過去の似た事例では、
「formに対してだけ、かつmarginに対してだけ」resetをかけています。
http://oshiete.goo.ne.jp/qa/5421693.html
http://oshiete.goo.ne.jp/qa/1751711.html
---
なお、ブラウザの表示(CSS)まわりで問題が発生した場合、
その原因の90%はIEにあると思ってもらって差し支えありません。
それくらい酷いブラウザです。
というわけで、今後表示不一致問題が発生した場合は、
「ie 問題の要素」での検索もおすすめです。
form ie margin - Google 検索
http://www.google.co.jp/search?hl=ja&lr=lang_ja& …
詳しいご回答をありがとうございます。
reset.cssという存在を知らずに、CSSには*{margin:0; padding:0;}を指定していました。
公開されている代表的なreset.cssにリンクや書き足しをしてみたり、form要素に直接指定をしてみましたが、やはりIEだけスペースが残ってしまいます。
いろいろ修正しているうちに問題のスペースは50px程になりました。
ブラウザから確認すると、上部の文章とformとの間はスペースではなくform要素の上部分が大きいことがわかりました。(backgroundカラーを付けて確認しました)
別の方の回答も受け、tableを1行にすると問題のform上部分が小さくなりました。
どうやら行を増やす毎に大きくなるようです。
考えられる場所全てにmargin,paddingの指定を試しますが、まだ解決しません。
引き続き、他サイトのコードを参考にするなどして解決策や記述ミスを探してみようと思います。
この度は大変ありがとうございました。
またご質問させていただいた時はどうぞ宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
文字列が入っているtdを削除せ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
tableにul,または,olを入れられ...
-
表の1列だけをCSSを使って右揃...
-
テーブル入れ子した時の、テー...
-
EXCELからhtmlへの変換で罫線が...
-
画像のロールオーバーがずれて...
-
tableでcolspanを使うと次行以...
-
サイト作成中・・・表の両端に...
-
Htmlのtd要素の中で半角の空...
-
テーブルの途中からcellspacing...
-
逆L字の表(table)組み
-
スタイルシートは直接指定より...
-
DreamWeaverのソースコードの整...
-
HTMLのrowspan
-
表の中の列の順番を入れ替える...
-
<table>の<td>の幅が:nth-child...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
文字列が入っているtdを削除せ...
-
テーブルのヘッダとボディの幅...
-
テーブルの行の高さを指定する...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
HTML <td></td>タグ セル内余...
-
ホームページ 表の上の余白を...
-
テーブルの表示がずれます
-
スタイルシートで colspan=3と...
-
テーブルの上に空行が入る・・...
-
テーブルタグのセルの幅の一部...
-
表の1列だけをCSSを使って右揃...
-
逆L字の表(table)組み
-
tableでcolspanを使うと次行以...
-
HTMLのテーブルで桁をそろ...
-
テーブルのセルにアンカー
おすすめ情報