- 締切済み
HTML、css IEとFireｆoxの違い
初めまして。 質問させて下さい。 HTMLは一年くらい使っているのですが、今回初めてcssに挑戦してみました。 IEで確認しながら作って完成したものを、FireFoxで見てみたら崩れていてガッカリ・・・。 ちょっと調べてみたのですがpaddingやmargin、float等がよくないとか・・・。 それらを全部消してみたのですが、やはりIEとFFで表記が違っていて困っています。 どなたか助言を下さいm(_ _)m ソースは以下の通りです。 少々表記が汚いのはご容赦下さい。 -------------------------------------------------------------------- <html> <head> <style type="text/css"> <!-- body{width:700; } li{border-bottom:solid #9475FF 1px; list-style-type:none; margin:0 0 0 0; } ul{margin:0 0 0 0;} h1{font-size:13; text-decoration:none; padding:0 0 0 0; margin:0 0 0 0; color:6000FF; } h2{font-size:16; text-decoration:none; padding:0 0 0 0; margin:0 0 0 0; color:red; } --> </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)
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 ) とか・・・
- naokita
- ベストアンサー率57% (1008/1745)
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;}
お礼
早速のご回答ありがとうございます。 ulとliのpadding:0を入れたのと、a{text-decoration:none;}を入力したところ、とりあえず困っていたところは改善されました。 助かりました。 あとは細かなところも直していきたいと思います（＾＾； もっと勉強します。ありがとうございました。
お礼
早速のご回答ありがとうございます。こんなチェックサービスがあったのですね！！やってみたら間違いだらけでしたｗ 今後活用していきたいと思います