締切済み

HTML、css　IEとFireｆoxの違い

2012/02/23 02:36

初めまして。質問させて下さい。 HTMLは一年くらい使っているのですが、今回初めてcssに挑戦してみました。 IEで確認しながら作って完成したものを、FireFoxで見てみたら崩れていてガッカリ・・・。ちょっと調べてみたのですがpaddingやmargin、float等がよくないとか・・・。それらを全部消してみたのですが、やはりIEとFFで表記が違っていて困っています。どなたか助言を下さいm(_ _)m ソースは以下の通りです。少々表記が汚いのはご容赦下さい。 -------------------------------------------------------------------- <html> <head> <style type="text/css">  </style> </head> <body> <table with="464" height="140" border="0" cellpadding="0"> <tr> <td><img src="" width="140" height="140"></td> <td width="2"></td> <td width="90" valign="bottom"> oooooo <div id="rink"> <ul> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxxx</h2></a></li> </ul> </td> <td width="2"></td> <td><img src="" width="140" height="140"></td> <td width="2"></td> <td width="90" valign="bottom"> oooooo <div id="rink"> <ul> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxxx</h2></a></li> <li><a href="" target="_parent"> <h1>oo</h1><h2>xxxxxxxxx</h2></a></li> </ul> </td> </div> </tr> </table> </html> ------------------------------------------------------------ 困っている点としましては、 1.　IEでは画像のすぐ横に文字が来るのにＦＦでは離れてしまっていること、 2.　text-decoration:none;にしているのにFFでは下線が表記されてしまうことです。どうぞ宜しくお願い致します。初心者なのでわかりやすく説明して頂けますと助かります。

ta11221122
お礼率100% (2/2)

CSS
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/23 08:41 回答No.2

HTMLを作成すると ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) で正統なHTMLか否かを調べるついで、CSSを書いたら ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で調べる。　どこが間違っているかは、すでに回答がありますがそこだけを修正してとりあえずまともになっても、また似たような失敗をしてしまいます。　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )のメモに『CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. 』ということです。　ＩＥはバグが多く悩まされますが・・ 1) paddin辺の外周をサイズとする。paddingは0とする。　このひとつを知っているだけで、随分と変わるでしょう。代わりに子供ブロックのmargin で指定します。　なお、IEではなく、firefoxなどで確認しながら作成し、IEで表示させて修正するほうが効率的です。firefoxには、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )のアドオンも豊富です。 Firebug ( https://addons.mozilla.jp/firefox/details/1843 ) Html Validator ( https://addons.mozilla.jp/firefox/details/249 ) JSView ( https://addons.mozilla.jp/firefox/details/2076 ) とか・・・

質問者

お礼 2012/02/23 10:32

早速のご回答ありがとうございます。こんなチェックサービスがあったのですね！！やってみたら間違いだらけでしたｗ　今後活用していきたいと思います

ログインすると、全ての回答が全文表示されます。

naokita
ベストアンサー率57% (1008/1745)

2012/02/23 04:17 回答No.1

HTML.文法/文章構造が全ておかしいです・・・例えるなら、来日数カ月の外人が日本語を書いている感じ・・・つまり、仕様に従って正しい文法や構造で書か無ければ、各ブラウザで勝手に判断されます。 HTMLが間違っていると、CSSは使えません。なので、HTMLのDTD/仕様から文章構造までの基本だけでも勉強しましょう。 ======================= 　・ h1,h2は見出しです　・ ulはリスト　・リンクaはHTML5未満ではブロック要素を含めない　・テーブルは表なので、表以外には利用しない　・ tdとdivの入れ子が間違っています。　・ <td width="2"></td>のような無駄なセルは作らない。その為のCSS ======================= CSSの値の単位も抜けています。 width:700; → width:700px; font-size:13; → font-size:13px; color:6000FF; → color:#6000FF; ------------ ulは、箇条書きリストなので、紙に書く場合と同様の表示で、ブラウザでもデフォルトでインデントされますので、リセットするには、 ul{margin:0; padding:0;} liもリセット下線は、中のコンテンツの下線では無く、リンクに対しての下線なので、削除するには、 a{text-decoration:none;}

質問者