- ベストアンサー
Firefoxでのliタグのずれについて
以下のURLですが、 左側のメニュー div class="side"の部分のliタグが、IEだと問題なく下に表示されるのですが、firefoxで見ると「初めての方へ」に対して右にずれてしまいます。 （「デジタル一眼レフ 激安通販なびについて」の部分です） http://xn--yckow2dyfg1223c263d.xn--q9js2024ao5ql76a9ke.com/ .side ul{ margin-left:0px; } side li{ margin-left:0px; } とやってみても（実際はもっと記述されていますが） 全く修正される気配がありません。 ご教授くださるようよろしくお願いします。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
Firefoxの方が仕様通りの解釈、IEの方が慣習的な解釈をしているようです。 まずDOCTYPEスイッチについて。 http://www.seo-equation.com/www/cat25/doctype_switching IEでもDOCTYPE宣言を変て、標準準拠モードに変えると、ずれます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 統一するなら、DOCTYPE宣言を変更して、標準準拠モードにしてください。 そして、widthを調整する必要があります。 width + padding + border = 180 になる様にwidthを調整します。
その他の回答 (6)
.main の margin-left を消して、float: left; を書き込んで下さい。 多分、上手くいくと思います。
お礼
h3,h4のclear:both;を消したところ、firefoxでもIEでも あまり変わらないレイアウトになりました。 皆様ありがとうございます。 意見をいただきながら直したため、途中でレイアウトが変わっている状態で、かつ非常に見難いCSS状態でのご意見どうもありがとうございました。 本当は、皆様全員にポイントを差し上げたいのですが、システム上、そうも参りませんので、修正が大きくなされた順にふらさせていただきます。
補足
同じレイアウトで .main の margin-left を消して、float: left; をやってみた結果がこれです。 http://xn--tckta3d4g.xn--q9js2024ao5ql76a9ke.com/ 現在、 http://xn--yckow2dyfg1223c263d.xn--q9js2024ao5ql76a9ke.com/ には、h3の clear:both; を消した状態です。これが今のところ一番良いようです。
- buntan_bun
- ベストアンサー率62% (32/51)
「.side li」中に「text-indent: 10px;」を指定しているためではないでしょうか？ 0pxにしたら言われる現象が解消しそうな気が…。
補足
回答ありがとうございます。 試してみましたが、現象は変わらないようです。 border が180以内に抑えるのが、ずれの解消方法だったようです。 しかし、main部分は下のほうに来てしまいます。
.side h2 a と.side h2 a:hoverの部分のborderを全部消して試して下さい。 Firefoxだとborderの2pxが加算されるのでずれるのだと思います。 ところでclass mainが下にずれて見えるのですが.
お礼
mainが下にずれるのは、リストが右側にずれていたからだと思っていましたが、修正しても同じということは、どうも違うようです。 現在、divごとに着色してわかりやすくし、原因調査中です。
- venzou
- ベストアンサー率71% (311/435)
＃２です。 書くのを忘れてましたが、ずれているのはリストの部分ではなく、ヘッダの部分です。 リストの幅は180pxになってます。 ヘッダの幅が180px以上あります。
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
こういうのが参考にならないかな？ http://www.mozilla.gr.jp/standards/webtips/webtips0034.html
margin じゃなくて padding じゃなかったっけかな (liの)
補足
実際には、以下のようになっておりpaddingも設定されています。 HTML部 <div class="side"> <h2 lang="en"><a href="index.html">初めての方へ</a></h2> <ul> <li><a href="index.html#1">デジタル一眼レフ 激安通販なびについて</a></li> <li><a href="index.html#2">デジカメ最新情報</a></li> </ul> </div> CSS部 .side ul { width: 180px; color: #ffffff; margin: 0; padding: 0; list-style:none } .side li{ margin-left:0; padding: 0; margin-top: -1px; display: block; background-color: #FFFFCC; border: outset 1px #999999; line-height: 100%; text-indent: 10px; text-decoration: none; font-size: 12px; list-style:none } よろしくお願いします。
お礼
回答ありがとうございます。 以前DOCTYPE宣言を標準準拠モードにしていたのですが、まだCSSでのレイアウトは初めてであったため非常に扱いづらかったので現在に至ります。 現在は、DOCTYPE宣言を変更して、標準準拠モードにし、わかりやすいようにDIVを着色して調査中です。