- 締切済み
IE6でナビ下に隙間ができてしまいます。
横並びのナビの下に隙間無く内容を入れたいのですが、IE6だとナビ下に２ミリ位の隙間ができてしまいます。 いろいろ調べてIE6対策でline-height: 0・margin: 0を追加してもうまくいきません。 何が間違っているのか、ご支持お願いします。 <body> <div id="wrapper"> <div id="headnavi"> <ul> <li id="A"><a href=""><span>A</span></a></li> <li id="B"><a href=""><span>B</span></a></li> <li id="C"><a href=""><span>C</span></a></li> <li id="D"><a href=""><span>D</span></a></li> <li id="E"><a href=""><span>E</span></a></li> <li id="F"><a href=""><span>F</span></a></li> </ul> </div><!-- / #headnavi --> <div id="pro_back"> <p>○○○○○</p> </div><!-- / #pro_back --> </div><!-- / #wrapper --> </body> </html> *{ margin: 0px; padding: 0px; font-weight: normal; list-style-type:none; } body { width: 100%; font-size: 75%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 180%; color: #333; } #wrapper { position: relative; width: 960px; margin-left:auto; margin-right:auto; } #pro_back { width: 960px; height: 623px; background-image: url(images/pro_back.gif); background-repeat: no-repeat; margin: 0; } #headnavi { width:960px; height: 33px; margin: 0; } #headnavi ul { line-height: 0; margin: 0; } #headnavi ul li a { display: block; width: 172px; text-decoration: none; height: 33px; } #headnavi ul li a span { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; } ul li#A a { position: absolute; left: 890px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/topbotan.gif); margin: 0; } ul li#B a { position: absolute; left: 632px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/link.gif); margin: 0; } ul li#C a { position: absolute; left: 474px; top: 0px; background-repeat: no-repeat; background-image: url(images/mail.gif); margin: 0; } ul li#D a { position: absolute; left: 316px; top: 0; background-repeat: no-repeat; background-image: url(images/illustration.gif); margin: 0; } ul li#E a { position: absolute; left: 158px; top: 0; background-repeat: no-repeat; background-image: url(images/designwork.gif); margin: 0; } ul li#F a { position: absolute; left: 0px; top: 0; background-position: 0 0; background-repeat: no-repeat; background-image: url(images/profile.gif); margin: 0; }
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
失敗１)デザインのためにHTMLを書かない!! 何のためにスタイルシートを使うのか？ 文書構造とプレゼンテーションを分離するためです。 ごく簡単な例を例を挙げておきます。たったこれだけです。 ・DOCTYPEスイッチ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.1849.9080.1.9617.16.13.1.2.2.0.226.1573.3j9j1.13.0...0.0.D-ytW0KCBrY&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=bb279f01abc1fd92&biw=1024&bih=619 )で、標準モードで起動させること。 でないと、苦労します。そもそもウエブ標準で作成すること。 HTMLはHTML4.01strictで記述しましょう。 ・HTMLに文書構造と関係ないものは書かない。下記ソース参照 ・スタイルシートはHTMLの文書構造を元に記述する。 この順番を間違えたらダメです。HTMLを書くときデザインは考えない。そうしないと先でデザインを変えるとき泣きますよ。 ★多分原因はIE6のブロックサイズの計算方法の差です。 ★下記ソース中の最後のdiv.section h2に対するmargin:0を消すと隙間が広がります。 (注意) *{ margin: 0px; padding: 0px; font-weight: normal; list-style-type:none; } の指定は絶対にすべきではあません。これをするとブラウザが本来もつスタイル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html )をすべて消してしまいます。そのため、すべてのスタイルを追記しなければならなくなり、煩雑になります。 元々オーサリングツールの仕業ですが、HTMLとスタイルシートの基本を知らない人がそのまま流用しているものです。 (注意) 今回は、IE6を対象とするので<li>のIDは放置しています。(IEを無視するなら、つけなくて良いです。)つけるのならサンプルのように具体的にわかるものにしておきましょう。スタイルシートを先で書き直すときに楽です。なお、本来は要素セレクタで記述すべきです。 div.header div.nav ul li a[href="./b"]{background-image:url(images/link.gif)} というふうに。 (注意) スタイルシートに、同じプロパティの設定は２回書かないようにすると小さくなります。 ・継承するプロパティは上位に書いて継承させる。 その後で詳細度の高いセレクタで上書きする。 ・同じプロパティを記述するセレクタはグループ化する。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み--HTML4.01strict+CSS2.1 タブは＿に置換してありますから、戻してテストすること。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ちなみに、IE5でもきちんと表示されます。また、リキッドデザインにしてありますからスマホでもスクロールなしでＯＫなはずです。ウィンドウ幅も変えて試してください。 なお、スマホなど新しいブラウザのみをターゲットにするならCSS3のbackground-sizeで背景を伸縮できます。 もう一点、IE6はマイクロソフト自身が撲滅キャンペーン( http://www.ie6countdown.com/ )をしているブラウザです。シェアもとても低い( http://lhsp.s206.xrea.com/misc/browser-share-version.html )ものです。対処する必要はありません。 <!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"> <!-- html,body{margin:0;padding:0;}/* 全称セレクタで消すことは避ける。 */ p{margin:0;line-height:1.5em;text-indent:1em;} div.header,div.section,div.footer{ ＿width:100%;margin:0 auto;min-width:640px;max-width:960px; } div.header div.nav{height:33px;line-height:33px;} div.header div.nav ul,div.header div.nav ul li{ ＿display:block;list-style:none;margin:0;padding:0; } div.header div.nav ul li{float:left;width:20%;position:relative;} div.header div.nav ul li a{ ＿display:block;width:100%;height:100%; ＿background:url(images/topbotan.gif) no-repeat blue; } div.section{background:url(images/pro_back.gif) no-repeat 50% 50%;min-height:623px} div.section h2{margin:0;line-height:1.6em;} div.header div.nav ul li a span{visibility:hidden;} #goLink a{background-image:url(images/link.gif)} #goMail a{background-image:url(images/mail.gif)} #goIllustration a{background-image:url(images/illustration.gif)} #goDesignwork a{background-image:url(images/designwork.gif)} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"><!-- navigationは他にも登場しうるのでidにはしない --> ＿＿＿<ul> ＿＿＿＿<li><a href="./a"><span>トップへ</span></a></li> ＿＿＿＿<li id="goLink"><a href="./b"><span>リンク集</span></a></li> ＿＿＿＿<li id="goMail"><a href="./d"><span>メール</span></a></li> ＿＿＿＿<li id="goIllustration"><a href="./e"><span>イラスト</span></a></li> ＿＿＿＿<li id="goDesignwork"><a href="./f"><span>デザイン</span></a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>○○○○○</p> ＿</div> ＿<div class="footer"> ＿＿<p>文書情報</p> ＿</div> </body> </html>
お礼
ありがとうございました。 検証サービスサイト参考になりました。