- ベストアンサー
リスト表示がうまくいかない！？IEの問題なのか？
- リスト表示がうまくいかない理由として、IE7の互換性の問題が考えられます。
- 友人のパソコンがWinVistaであり、かつIE7を使用しているため、表示に問題が発生している可能性があります。
- 解決策として、IE7の互換モードを無効化することや、CSSの修正を行うことが考えられます。
- maikoemonoshop
- お礼率28% (2/7)
- HTML
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
幅固定中央合わせなら、下記のスタイルでもいけますよ。 liタグは改行などでバグが出やすいので、 aタグをブロックにすることで回避します。 また、positionは不安定なのでIE6、7などが対象に残っている間は、 使わなくて済むなら使わないほうが無難ですね。 <style type="text/css"> #menu { width:100%; margin: 0 auto; border-left: 1px solid white; overflow: hidden; } ul.menu_navi{ width: 960px; height: 50px; margin: 0 auto; color: white; } ul.menu_navi li{ float: left; display: inline; } ul.menu_navi li a{ display: block; height: 35px; width: 239px; padding: 10px 0px 0px; color: white; border-right: 1px solid white; border-bottom: 5px solid black; font-size: 18px; font-weight: bold; text-decoration: none; text-align: center; background-color: red; vertical-align: middle; line-height: 140%; } ul.menu_navi li a.nowthis{ border-bottom: 5px solid white !important; } ul.menu_navi li a:hover{ color: red; background-color: white; border-bottom: 5px solid red; ; } </style>
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
書き漏らしたので・・来客だったので急いで送信してしまった。 可能な限りハックは使わない。プレゼンテーションのためにHTMLを弄ることはしない!!何のためのスタイルシート?? HTMLを書き直さなければならないとしたらHTMLが間違っている。今回のものはそれはない(正統なHTML)です。 CSSを読まれるとわかりますが、小細工も裏技も一切ありません。単に Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ ) REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) をそのまま素直に適用しているだけです。それ以外の資料は見てません。 メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/ より引用)
お礼
ありがとうございました 色々な方の意見を取り入れながらＣＳＳを書いたのでわかりづらくなってしまいました もう少し整理してシンプルを心がけます
- ORUKA1951
- ベストアンサー率45% (5062/11036)
次に文字が続くことを考えると下記セレクタの宣言を変更したほうが良い div.nav ul{ list-style:none; width:95%; margin:0 auto; height:50px;/* 変更 */ line-height:50px; text-align:center; font-weight:bold; } div.nav ul li{ height:100%;/* 変更 */ width:24%; float:left; }
- ORUKA1951
- ベストアンサー率45% (5062/11036)
長々したCSSはくたびれます。簡潔に書きましょう。 幅広のディプレイをお使いですか?、私の画面からははみ出る。可能なものはリキッドスタイルで 一画面で何をしているかわかるようにまとめないとメンテナンス不能になり、色々な調整ができません。 ★継承されるものは親要素に ★継承されないが共通するものはセレクタをグループ化する。 ※背景が見えたらまずいものには背景色を付けなきゃ良いです。 ▲<div class="nav">名は、構造を示すため(SEO)。HTML5では、そのまま<nav id="menue">にできる。 ▲ウィンドウ幅に依存しません、i-phoneでもOKです。 とにかくHTMLは文書構造に従ってシンプルに、そうしておくとCSSもシンプルでメンテナンスしやすくなる。このままプルダウンメニューも追加できます。 下はサンプル全文です。HTML4.01strictです。CSSを使うときはstrictのほうが良い。 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 ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でテスト済み IE5以降でOK,Opera,firefox,safariOK タブは、__に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> __<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> __<title>サンプル</title> __<meta name="author" content="ORUKA1951"> __<meta http-equiv="Content-Style-Type" content="text/css"> __<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > __<link rel="START" href="../index.html"> __<style type="text/css"> <!-- div.nav ul,div.nav ul li,div.nav ul li a{ /* 継承しないプロパティは一括指定 */ display:block; padding:0;margin:0; } div.nav ul{ list-style:none; width:95%; margin:0 auto; /* 継承するものは親要素に */ line-height:50px; text-align:center; font-weight:bold; } div.nav ul li{ height:50px;width:24%; float:left; } div.nav ul li a{ width:100%;height:100%; color:white; border-style:solid; border-width:1px 1px 5px 1px; border-color: white; background-color:red; text-decoration:none; border-bottom-color:black; } div.nav ul li a:visited{ color:rgb(180,0,0); } div.nav ul li a:hover{ color:red; border-bottom-color:red; background-color:white; } div.nav ul li a:active{ background-color:yellow; } --> __</style> </head> <body> __<h1>サンプル</h1> __<div class="nav" id="menu"> ____<ul> ______<li><a href="./index.php">ホーム</a></li> ______<li><a href="./tv.php">テレビ番組</a></li> ______<li><a href="./info.php">いろいろな情報</a></li> ______<li><a href="./mail.php">お問合わせ</a></li> ____</ul> __</div> </body> </html>
- naokita
- ベストアンサー率57% (1008/1745)
IE7ではdisplay: block;で、あり得ないmargin-bottomが出現するので、 HTML側で、全liを一行設定にする。 例： <li><a href="./index.php">ホーム</a></li><li><a href="./tv.php">テレビ番組</a></li><li><a href="./info.php">いろいろな情報</a></li><li><a href="./mail.php">お問合わせ</a></li> 一行の意味がわかりますか？ または、IE7ハック *:first-child+html #side li{ float:left;} *:first-child+html #side li{ zoom:1;} その他の対応もありますが、 ハックを使うよりも、HTML側で、全liを一行にする方が良いかも 画像の場合は、vertical-align
お礼
ありがとうございました うまく表示できました 解決です！！