CSSを使用したメニューのIEの表示くずれについて
- CSSで作成したメニューが、VistaのIE8で表示が崩れる問題が発生しています。FireFoxやSafariでは正常に表示されていますが、IE8では解決できません。
- ローカルに保存したファイルでは正常に表示されるが、オンラインにアップデートすると表示が狂ってしまいます。
- 問題点を指摘していただけると助かります。
- ベストアンサー
CSSを使用したメニューのIEの表示くずれについて
CSSを使用したメニューのIEの表示くずれについて CSSで、ul liを使用して横型と縦型のメニューを作成しています。 FireFox、Safariでは正常に表示されるのですが、VistaのIE8で確認したところ、メニューの表示が崩れてしまい解決出来ずにいます・・・。 ※当方Mac環境で、デュアルブートのWindows7のIE8ではなぜか正常に表示されています ローカルに保存したファイルをIEで参照すると正常に表示出来るのですが、オンラインにアップデートしたところ表示が狂います。 ↓アップロードしたものをご確認ください。 http://homepage2.nifty.com/task-eng/medicom/details.html ↓ファイルはこちら http://firestorage.jp/download/8fc0ba3ce80bc4e25fa6ad9eaa16a260e9886b79 どなたか、問題点を指摘していただけませんでしょうか？ よろしくお願いいたします！
- tsunakappe-mota
- お礼率100% (3/3)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IEはブロック要素の寸法の取り方にバグがあるため、floatさせる要素の合計幅が、計算した幅より小さいはずなのに、改行されます。 対策としては、各要素の幅を小さくするか、外枠ブロックの大きさを広くするかのいずれの対策をとります。 私は、このようなメニューはリキッドスタイルで行います(表示幅、フローとさせる要素もすべて%幅指定)ので、具体的な数値はご自身でお試しください。 実を言うと、このような形で質問者が特定できる可能性のあるURLの張り方は禁止されているので、質問自体が編集される可能性があります。その場合でも回答が齟齬にならないように一般論としてのお答しかしていません。ご了承ください。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLを正しく記述してください。 <ul>要素内には<li>以外は入りません。 <!ELEMENT UL - - (LI)+ -- unordered list --> <ul> <li> <div></div> </li> </ul> なお、ひとつの要素におけるidとnameの値は同じでなければなりません。
お礼
ありがとうございます！ ul内にあったdivを取り除いてみたりしたのですが、やはりうまくいきません・・・ また、floatしているのに、横並びにならず、階段状に表示されてしまいます。 調べたところ、display:block;をdisplay:inline;に変えると良いとあったのですが、 それも解決しませんでした・・・。 あまりCSSに詳しくないので、具体的にご教授頂けると幸いです。
関連するQ&A
- cssを使ってlist表示（opera)
こんにちは。 初心者ですが、今cssとxhtmlを用いてのweb制作をしております。 cssの指定でマウスを乗せると色が変わるメニュー（横型）を配置したのですが、Firefoxでは動作確認できるのですが、IEでは全部崩れ、operaではメニュー部分のリストが指定できていません。 FirefoxとoperaではCSSの記述に違いがあるのですか？ そして、IEで表示する際にcssはどうしたらきちんと読み込んでくれるでしょうか？？
- ベストアンサー
- HTML
- CSSでポップアップメニューを作成したがIEだけメニューが表示されません。
下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするには どのようにすればよいのでしょうか？（JavaScriptは未使用で作成） <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- IE6でプルダウンメニューが隠れる
[ヘッド部]プルダウンメニューを設置 [コンテンツ部]scriptを利用して画像をスライド表示 IE6だと、画像スライド表示部の後ろにプルダウンメニューが表示されてしまいます。 IE8、Firefox、GoogleChromeなどは正常に表示 IE7は確認できておりません。 使用scriptはimageSlide.jsを現在利用しています。 http://park.geocities.jp/gdfsm000/javascript/jav … 画像だけ表示してみましたが正常に表示されました。 z-index指定はプルダウンメニュー部で使用しています。 <ul> <li><a>aaa</a></li> <li><a>bbb</a> <ul>←ここでz-index指定 <li><a>ccc</a></li> <li><a>ddd</a></li> </ul> </li> <li><a>eee</a></li> </ul> これがないと、他のブラウザでも隠れてしまうことは確認済み。 IE6はまだ無視できませんので、対応方法をお教えお願い致します。
- ベストアンサー
- CSS
- IE7でだけ作ったメニューが表示されません。
サイトを作っているのですが、IE7でだけHOMEやImageなどのメニューが表示されません。safari,firefox,operaでは表示されました。 どうしたら表示できるのでしょうか？ またここはこうした方がいいなどHTML,CSSのアドバイスなどもして頂けるとうれしいです。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで、フレームを使ったようなメニューを作りたいのですが
ＨＰ作り初心者です。ただいま、ＣＳＳを使用してのＨＰ作りに挑戦中です。 フレームを使ったＨＰでよく見るような、画面左側にメニュー、右側に本文という構成にしたいと思っています。 下記「All About」記事を参考に作ってはみたものの、 本文が長いのでスクロールするとメニュー部分が見えなくなってしまいます。 メニュー部分が常に画面上に表示されるように固定したいのですが、どうすればよいのでしょうか。 ご教授よろしくお願いします。 使用ソフト：TeraPadで直打ち。 確認ブラウザ：FireFox3.0.13とIE8.0。 CSS：外部ファイル。A.cssにページレイアウト、B.cssにメニュー部分の情報（文字サイズやリンク関連の装飾など）記載。 メニュー：ulとolタグ使用。 All About・CSSで段組構成 段の背景色が切れないようにする（前） ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/ All About・CSSで段組構成 段の背景色が切れないようにする（後） ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050401A/ All About・CSSで段組構成 隣の段が下に回りこむのを防ぐ ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050307A/
- 締切済み
- ホームページ作成ソフト
- CSSを使用したクリックして開閉するプルダウンメニュー
CSSを使用して「メニュー1」または「メニュー2」の文字ををクリックする度に、 ツリーメニュー（サブメニュー1、サブメニュー2、サブメニュー3）が 表示、非表示されるようにしたいと思っています。 JavaScriptは使用せずcssのみで、というのは可能でしょうか？ ソースコードは以下です。 <ul> <li>メニュー1 <ul> <li><a href="sub1-1.html">サブメニュー1</a></li> <li><a href="sub1-2.html">サブメニュー2</a></li> <li><a href="sub1-3.html">サブメニュー3</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="sub2-1.html">サブメニュー1</a></li> <li><a href="sub2-2.html">サブメニュー2</a></li> <li><a href="sub2-3.html">サブメニュー3</a></li> </ul> </li> </ul> オンマウスでは無く、クリックでサブメニューを開閉させたいと考えておりますが、 方法が見つからなく、ご質問させて頂きました。 よろしくお願いいたします。
- ベストアンサー
- HTML
- IE7で途中からCSSが利かなくなる
IE7で、HTML＋CSSのファイルを開くと、途中から、CSSが利かなくなってしまいます。 IE6＆IE8では、問題なく表示されます。 この現象を解決する方法はあるのでしょうか？ よくわからないのですが、データ量が多いページに出ているようです。 また、特定のクラス名などではないようです。 同じクラス名でも、前半は正常に表示されていて、後半はNGになっていました。 よろしくお願いします。 WinXP＋IE7
- ベストアンサー
- HTML
- ＩＲＩＡのＩＥメニュー表示
以前ＤＬにＲＥＧＥＴを愛用していましたが、アンインストールしてＩＲＩＡに替えたところ、右クリックでＩＲＩＡでチェックをつけたＩＥメニューが正常に表示されず（ＩＲＩＡでダウンロード及びＩＲＩＡですぐにダウンロードのみ表示）ＲＩＧＥＴのＩＥメニューが残ったままです。 ＲＩＧＥＴのＩＥメニューを消して、ＩＲＩＡのＩＥメニューを正常に表示させる為にはどうしたらいいのでしょうか？
- ベストアンサー
- フリーウェア・フリーソフト
- IE・FirefoxでのCSS表示違いについて
HTML＋CSSでホームページを制作する際、以下のような構成 上部：メインロゴ 中部：コンテンツ（What's newなど） 下部：メニューバー で、IE7とFireFoxで表示違いの差が発生してしまいます。 IEだと問題なく表示されるのですが、FireFoxで表示した場合、 ・中部のWhat's newが表示されない ・下部メニューバーが上部メインロゴの右側に表示されてしまう などの表示の問題が発生します。 CSSファイル内のソースが問題だというところまでは分かって いるのですが、一般的にこういった場合、CSS内でページ全体を 構成するfloatの設定がおかしいのでしょうか？ 全体のページ構成を決めるCSSタグでIEでもFireFoxでも全体を 崩さず表示を同じにするようなタグがあればご教示ください。 説明が分かりづらくてすみません・・。 （URLを具体的にお教えできれば良いのですが、、） お分かりであればお願いいたしますm(＿)m
- ベストアンサー
- CSS
- IE6とXHTML+CSS
XHTML+CSSでサイトを制作したのですがIE7で確認すると正常に映るのですがIE6で確認すると画像がズレたりロールオーバーのオーバー時の画像が表示されなかったりしてしまいます！！ どうすれよいのでしょうか。。。詳しい方アドバイス等聞かせてください！また参考になるようなサイトのURLを教えてください。よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございます。 ご指摘の方法では解決出来ず、とあるページで見つけた「a要素に指定するfloat:leftを、li要素に一括指定する」ってのをやってみたら、”階段現象”は解決出来ました。 あとは、背景とピクセル単位で合致させる作業なのですが・・・ やはりWindows7以外のIEでは正常に表示出来ず、もうどうしたら良いのやら・・・ とりあえず、一番の問題点は解決出来ましたので、この質問はクローズします。 ありがとうございました。