• ベストアンサー

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; } とやってみても(実際はもっと記述されていますが) 全く修正される気配がありません。 ご教授くださるようよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • venzou
  • ベストアンサー率71% (311/435)
回答No.2

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を調整します。

hola1973
質問者

お礼

回答ありがとうございます。 以前DOCTYPE宣言を標準準拠モードにしていたのですが、まだCSSでのレイアウトは初めてであったため非常に扱いづらかったので現在に至ります。 現在は、DOCTYPE宣言を変更して、標準準拠モードにし、わかりやすいようにDIVを着色して調査中です。

その他の回答 (6)

noname#56851
noname#56851
回答No.7

.main の margin-left を消して、float: left; を書き込んで下さい。 多分、上手くいくと思います。

hola1973
質問者

お礼

h3,h4のclear:both;を消したところ、firefoxでもIEでも あまり変わらないレイアウトになりました。 皆様ありがとうございます。 意見をいただきながら直したため、途中でレイアウトが変わっている状態で、かつ非常に見難いCSS状態でのご意見どうもありがとうございました。 本当は、皆様全員にポイントを差し上げたいのですが、システム上、そうも参りませんので、修正が大きくなされた順にふらさせていただきます。

hola1973
質問者

補足

同じレイアウトで .main の margin-left を消して、float: left; をやってみた結果がこれです。 http://xn--tckta3d4g.xn--q9js2024ao5ql76a9ke.com/ 現在、 http://xn--yckow2dyfg1223c263d.xn--q9js2024ao5ql76a9ke.com/ には、h3の clear:both; を消した状態です。これが今のところ一番良いようです。

回答No.6

「.side li」中に「text-indent: 10px;」を指定しているためではないでしょうか? 0pxにしたら言われる現象が解消しそうな気が…。

hola1973
質問者

補足

回答ありがとうございます。 試してみましたが、現象は変わらないようです。 border が180以内に抑えるのが、ずれの解消方法だったようです。 しかし、main部分は下のほうに来てしまいます。

noname#56851
noname#56851
回答No.5

.side h2 a と.side h2 a:hoverの部分のborderを全部消して試して下さい。 Firefoxだとborderの2pxが加算されるのでずれるのだと思います。 ところでclass mainが下にずれて見えるのですが.

hola1973
質問者

お礼

mainが下にずれるのは、リストが右側にずれていたからだと思っていましたが、修正しても同じということは、どうも違うようです。 現在、divごとに着色してわかりやすくし、原因調査中です。

  • venzou
  • ベストアンサー率71% (311/435)
回答No.4

#2です。 書くのを忘れてましたが、ずれているのはリストの部分ではなく、ヘッダの部分です。 リストの幅は180pxになってます。 ヘッダの幅が180px以上あります。

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.3

こういうのが参考にならないかな? http://www.mozilla.gr.jp/standards/webtips/webtips0034.html

noname#39970
noname#39970
回答No.1

margin じゃなくて padding じゃなかったっけかな (liの)

hola1973
質問者

補足

実際には、以下のようになっており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 } よろしくお願いします。

関連するQ&A