CSSを使用したメニューのIEの表示くずれについて

CSSを使用したメニューのIEの表示くずれについて
CSSで、ul liを使用して横型と縦型のメニューを作成しています。
FireFox、Safariでは正常に表示されるのですが、VistaのIE8で確認したところ、メニューの表示が崩れてしまい解決出来ずにいます・・・。
※当方Mac環境で、デュアルブートのWindows7のIE8ではなぜか正常に表示されています

ローカルに保存したファイルをIEで参照すると正常に表示出来るのですが、オンラインにアップデートしたところ表示が狂います。

↓アップロードしたものをご確認ください。
http://homepage2.nifty.com/task-eng/medicom/deta …

↓ファイルはこちら
http://firestorage.jp/download/8fc0ba3ce80bc4e25 …

どなたか、問題点を指摘していただけませんでしょうか？
よろしくお願いいたします！

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2010/03/16 21:04

　IEはブロック要素の寸法の取り方にバグがあるため、floatさせる要素の合計幅が、計算した幅より小さいはずなのに、改行されます。

　対策としては、各要素の幅を小さくするか、外枠ブロックの大きさを広くするかのいずれの対策をとります。
　私は、このようなメニューはリキッドスタイルで行います(表示幅、フローとさせる要素もすべて%幅指定)ので、具体的な数値はご自身でお試しください。
　実を言うと、このような形で質問者が特定できる可能性のあるURLの張り方は禁止されているので、質問自体が編集される可能性があります。その場合でも回答が齟齬にならないように一般論としてのお答しかしていません。ご了承ください。

　

この回答へのお礼

ありがとうございます。
ご指摘の方法では解決出来ず、とあるページで見つけた「a要素に指定するfloat:leftを、li要素に一括指定する」ってのをやってみたら、”階段現象”は解決出来ました。
あとは、背景とピクセル単位で合致させる作業なのですが・・・

やはりWindows7以外のIEでは正常に表示出来ず、もうどうしたら良いのやら・・・

とりあえず、一番の問題点は解決出来ましたので、この質問はクローズします。

ありがとうございました。

お礼日時：2010/03/17 05:21

No.1 回答者： ORUKA1951 回答日時： 2010/03/16 08:37

HTMLを正しく記述してください。

<ul>要素内には<li>以外は入りません。
<!ELEMENT UL - - (LI)+ -- unordered list -->
<ul>
　　<li>
　　　　<div></div>
　　</li>
</ul>

なお、ひとつの要素におけるidとnameの値は同じでなければなりません。

この回答へのお礼

ありがとうございます！
ul内にあったdivを取り除いてみたりしたのですが、やはりうまくいきません・・・
また、floatしているのに、横並びにならず、階段状に表示されてしまいます。
調べたところ、display:block;をdisplay:inline;に変えると良いとあったのですが、
それも解決しませんでした・・・。

あまりCSSに詳しくないので、具体的にご教授頂けると幸いです。

お礼日時：2010/03/16 14:29