ホームページを修正していてブラウザによって表示が違うので、その対処方法を知りたくて質問します。
知りたいことはブラウザによって極端にテーブルが崩れてしまうので、修正しているのですがあまりにも量が多くて処理に時間がかかるため・・・私の事情なので割愛します。
要件は
firefox16では正常に表示されるのですが、ie8で表示すると崩れてしまいます。
その他サファリ、クロームでも確認しましたが、理想通り表示されます。
http://android-style.sakura.ne.jp/help_test/cont …
検索していろいろ調べてみましたが、tableの中にformを入れないようにすると言うアドバイス以外ありません。。。
なにかいい対処方法やアドバイスお願いします。
よろしくお願いします。
No.6ベストアンサー
- 回答日時:
>ごめんなさい「あまりにも量が多い」と言うのは「引き継いだ量が多いのでと・・・」
そうなんですか??
私は、それが仕事なので、確かに他人の書いた糞--失礼---を直すのは大変です。
結局、私が示ししたように、コツコツ地道に直していくしかありません。修正方法は、サンプルを参考にしてください。そして、二つを提示してその作業が以下に大変かを理解してもらうしかありませんね。
ただ、ごらんのようにHTMLもスタイルシートも数分の一、データ転送量は数十分の一になります。
私は対価を頂くのですが、やはり苦痛です。・・そうでないとしたら投げ出したくなりますよね。重要なところから徐々に直しましょう。
⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
の[DATA]タブを使うと楽ですよ。あまりにエラーが多ければ、とりあえず
The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input )
やfirefoxのHTML Validator( https://addons.mozilla.jp/firefox/details/249 )を使って、重要なものだけでも
リンク先ありがとうございます。
10本20本ならコツコツ直すのが楽かなって思いましたが、ちょっと数が多かったので質問してみました。
また初歩的な質問しますが、宜しくお願いします。
ありがとうございました。
No.5
- 回答日時:
>No.2補足
修正の仕方が悪い、
修正の仕方が不十分、
該当箇所は修正されたが、新たに別の不具合を発生する書き方(間違った書き方)を作った、
などの理由が考えられます。
どんな風に作られたのかわからないと、何が悪いかのアドバイスは出来ません。
No.3
- 回答日時:
折り返し忘れてたので
html,body{margin:0paddin:0;background-color:navy;}
form table{
font-size:0.9em;
border-collapse:collapse;
border-color:rgb(147,147,255);
border-style:solid;border-width:0 10px;
background-color:white;
line-height:3em;
width:50%;margin:0 auto;
}
form table th{background-color:rgb(230,230,230);text-align:left;white-space:nowrap;}
form table span.Required:before,
form table tr.Required th:before{
content:"[*]";color:red;
}
form table tr.Required input,form table tr.Required textarea{border-color:red;}
form table th{line-height:1.6em;}
form table th span.memo{font-weight:normal;}
form table th span.memo:before{content:"\A";white-space:pre;}
form table tr+tr{border-bottom:silver 2px solid;}
form table td{padding:2px 5px;}
form table td[colspan="2"]{text-align:center;}
form table td[colspan="2"] input+input{margin-left:5em;}
form table input[type="text"],form table textarea,form table select{background-color:rgb(230,230,230);}
HTMLにはデザイン的な要素がまったく含まれていないので、サンプルの形にすることは無論、どのようなデザインも自由です。
⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
>あまりにも量が多くて処理に時間がかかるため・・・
ご自身で複雑にしているだけです。HTMLに余計な細工をせずにシンプルに文章構造だけ書けば難しくはありません。
必須項目はRequiredとclass名をつけておく・・たったそれだけ。さらに多重にdivやspanで囲む必要はありません。
>ブラウザによって表示が違うので、その対処方法を知りたくて
まずHTMLを正しく書くこと・・・これがすべての基本です。ブラウザによって表示が異なる最大の要因は、HTMLが正しくないことです。その上で標準モードで動作するようDOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )を記述しておけば、ほぼ解決するはずです。
ありがとうございます。
ごめんなさい「あまりにも量が多い」と言うのは「引き継いだ量が多いのでと・・・」
「このホームページ直して欲しい」と頼まれて最初から作るとなると時間がかかるので、いい案探してました。
質問掲示板に投稿すると、論点がズレるので割愛しました。
スタイルシートありがとうございます。
No.2
- 回答日時:
まず、<form>の入れ子は許されません。
<form><form>・・・</form></form>
また、開始タグ、終了タグが他のタグと入れ違いになっている箇所があります。
<form><table></form></table>という順番になるのは許されません。
<form><table></table></form>と、開始タグ-終了タグがセットになるように入れ子にして行ってください。
また、<td>この部分や</td><td>この部分</td> に文章や他のタグを書き入れる事は出来ますが、
<td></td> この部分 <td></td> に書く事は出来ません。
目立つところでは、「内容を確認する」ボタン周辺に文法違反の書き方がありますので、その部分を修正すれば、おおよそ全てのブラウザで期待通り表示されるようになると思います。
この回答への補足
ありがとうございます。
<form>の入れ子は出来ないのは知っているのでやっていませんでしたが、</td>ここに<td><form>等を置いたりしていたので、修正してみました。
しかし・・・変化ありませんでした。
ieは崩れっっっっぱなしです。。。
<td></td> この部分 <td></td>は「内容を確認する」あたりの事だと思いますが、すべて<td></td>に入れましたらが変化が無い状態です。
一応いろんな所に置いてみたのですが、ieだけがダメなのです。
またいいアドバスあったらお願いします。
ありがとうございました。
No.1
- 回答日時:
★文法間違いがあまりにも多いです。
ブラウザは、足りないところを追加したり、あってはならないものを取り除いたりして、可能な限り表示を試みますが、それはブラウザによって処理が異なります。結果的にブラウザによって表示が異なる原因になります。
また、DOMも異なってしまうためスタイルシートが思うように適用できなかったりで良いことはひとつもありません。
⇒メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
★HTMLを作成したら、下記サイトなどでチェックしておきましょう。
⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
★デザインのためにや画像を使うのは誤りです。
下記はサンプルですが、とってもシンプルでしょ!!そしてわかりやすい
・必須項目(Required Item)はRequiredとclass名をつける。
・余計なDIVなんてない。(DIVは他に適当な要素がないときのみ使う)
★タブは_に置換してあるので戻すこと
★HTML4.01strictとCSS2.1です。ウェブ標準
⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
でチェック済み
--HTML5のことを考えるとHTML4.01strictのほうが良いでしょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル0</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0paddin:0;background-color:navy;}
form table{
font-size:0.9em;
border-collapse:collapse;
border-color:rgb(147,147,255);
border-style:solid;border-width:0 10px;
background-color:white;
line-height:3em;
width:50%;margin:0 auto;
}
form table th{background-color:rgb(230,230,230);text-align:left;white-space:nowrap;}
form table span.Required:before,
form table tr.Required th:before{
content:"[*]";color:red;
}
form table th span.memo{font-weight:normal;}
form table tr+tr{border-bottom:silver 2px solid;}
form table td{padding:2px 5px;}
form table td[colspan="2"]{text-align:center;}
form table td[colspan="2"] input+input{margin-left:5em;}
form table input[type="text"],form table textarea,form table select{background-color:rgb(230,230,230);}
-->
_</style>
</head>
<body>
_<form method="post" action="/help_test/contact.html">
__<table summary="form">
___<tbody>
____<tr>
_____<td colspan="2">
_____<input type="hidden" name="m" value="1">
_____ご意見・ご感想をお聞かせください。<span class="Required">は必須項目です</span></td>
____</tr>
____<tr>
_____<th abbr="社名">会社名<span class="memo">(法人の方のみ)</span></th>
_____<td><input size="30" maxlength="30" name="inp_syamei" type="text" value=""></td>
____</tr>
____<tr class="Required">
_____<th abbr="氏名">お名前</th>
_____<td><input size="30" maxlength="30" name="inp_name" type="text" value=""></td>
____</tr>
____<tr>
_____<th abbr="Tel">お電話番号</th>
_____<td><input size="12" maxlength="12" name="inp_tel" type="text" value=""></td>
____</tr>
____<tr class="Required">
_____<th abbr="mail">E-mail</th>
_____<td><input size="40" maxlength="60" name="inp_mail" type="text" value=""></td>
____</tr>
____<tr>
_____<th abbr="country">都道府県</th>
_____<td>
______<select name="inp_region">
_______<option value="0" selected>--------</option>
_______<option value="1">北海道</option>
_______<option value="2">青森県</option>
_______<option value="3">岩手県</option>
_______<option value="47">沖縄県</option>
______</select>
_____</td>
____</tr>
____<tr>
_____<th abbr="address">住所</th>
_____<td><input size="30" maxlength="40" name="inp_address" type="text" value=""></td>
____</tr>
____<tr class="Required">
_____<th abbr="meaasge">お問い合わせ内容<span class="memo">[300文字程度]</span></th>
_____<td><textarea name="inp_value" cols="30" rows="5">ここにお書きください</textarea></td>
____</tr>
____<tr>
_____<td colspan="2">
______<input type="submit" name="submit" value="内容を確認する">
______<input type="reset" value="リセット">
_____</td>
____</tr>
___</tbody>
__</table>
_</form>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
formのinputなどの幅100%指定
-
テーブルの一部分のセルだけに...
-
table内の画像を中央寄せ、のせ...
-
Tableタグで作成した表の縮小
-
divで囲んだ文字が消える
-
IEでテーブル内のテキストが...
-
Tableタグ内のspan styleが適応...
-
背景にグラデーション、外枠に...
-
テーブルタグの中にdivを含めて...
-
テーブルとテーブルの間隔について
-
CSSで特定のテーブルだけに...
-
TABLEのセルの中の文字を行単位...
-
tableにul,または,olを入れられ...
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
テーブル内に画像を表示したい。
-
TRタグの余白をcssで設定するには
-
テーブルのレイアウトがおかし...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
Tableタグで作成した表の縮小
-
td要素内のdiv要素をセンタリン...
-
Tableタグ内のspan styleが適応...
-
XHTMLに関する質問 順序が逆に...
-
ブラウザによってテーブルのセ...
-
表とリスト(ulとtable)の違い...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
TDタグ内での均等割付の仕方
-
cssで、テーブルのtdの中の文字...
-
センタリングしたページの印刷
-
Firefoxを使ってるのですがズー...
-
divで囲んだ文字が消える
-
Dreamweaver デザインビューの...
-
テーブルの枠線に色が付かない
-
HTMLのテーブルでそれぞれの大...
おすすめ情報