- ベストアンサー
【CSS】li要素をfloatした際のブラウザ表示
はじめまして。 現在CSSでwebサイトを作成しています。 ナビゲーションにli要素を使用し、CSSで横並びになるようfloatさせているのですが、firefox・Safariでの表示がずれてしまいます。 思いつく限り検索して、幅の調整やposition関連、DTD変更なども試してみたのですが全く原因がわからず、お手上げ状態です。 DTD変更はこちらのサイト(http://2xup.org/log/2007/07/27-2111)を参考に、HTML 4.01 Transitional→XHTML 1.0 Transitionalを試してみました。 お手数おかけしますが、どなたかご教授お願いします。 ■参考 【HTML】 <div id="wrapper"> <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="menu"> <li>TOP</li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> </div> </div> 【CSS】 #wrapper { margin:0 auto; padding:0; width:750px; } #header { background:url(image/bgtop01.gif) no-repeat; height:125px; } #header h1,li { float:left; text-align:center; } #header h1 { width:200px; margin:50px 25px 0 50px; background:#fc0; } #menu { width:425px; } ul#menu li { width:85px; margin-top:50px; background:#ffc; } .clearfix { min-height:1% } .clearfix:after { clear:both; display:block; visibility:hidden; height:0px; content: "."; } * HTML .clearfix { height:1% } 【サンプルサイト】 http://www.memorialhall.net/ky/index_sample.php どうぞよろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
サンプルを検証したところ、質問者様の意図通りに見えているのはIE7だけみたいですね。IE6もメニューではないですがh1が質問者様が意図するより右にずれています（"float: left;"と左マージンを同時に指定している事でいわゆるWマージンのバグが生じています）。 ヘッダーの中のメニュー（ul#menu）も”浮かせ”ないと、h1の右には収まり切れません。また、liをfloatさせるのであれば、clearfixは直接の親であるulにも指定しなければ、バグによりそれを無視するIE6以外のブラウザ（FirefoxやSafari等、より仕様に正しい解釈をする）では、ulの高さがなくなってしまってliがぶら下がる状態になっています（ul#menuに一時的に背景色を指定してみるとその状態がよく分かります）。 という事で、”現在のものに最小限の変更を加えるだけ”なら、以下の点を修正すればとりあえず現在の不具合は解消される筈です。 【CSS】 #header h1 { （省略） margin: 50px 25px 0 50px; _margin-left: 25px;※←追加。IE6でのWマージンのバグ回避用のハック。 （省略） } #menu { （省略） float: left;※←追加。 } ul#menu li { （省略） margin: 50px 0 0 0;※←"margin-top:50px;"を修正。liの左右マージンも初期化しておく方が無難です。 （省略） } 【HTML】 （省略） <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="menu" class="clearfix">※←class="clearfix"を追加。 （省略） あと、HTMLからXHTMLに変更したのなら、空要素（meta、br、img等）の記述もXHTMLのルールに則って記述（<meta～ />、<img～ />、<br />）しなければなりません。
その他の回答 (1)
- chikotto
- ベストアンサー率46% (23/50)
htmlも変更してみました。 ●html変更 <body> <div id="wrapper"> <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="top"> <li>TOP</li> </ul> </div> <div id="contents"> <ul id="menu"> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> <p id="topimg"><img src="index_sample.php_files/topimg01.gif" alt="topimg01.gif"></p> <h2><img src="index_sample.php_files/title_info.gif" alt="Infomation"></h2> <div class="right"><a href="http://www.memorialhall.net/ky/php/sample.php?mode=past">more→</a></div> <div id="mobile" class="clearfix"> <h2><img src="index_sample.php_files/title_mobile.gif" alt="title_mobile.gif"></h2> <p id="qr"><img src="index_sample.php_files/qr.gif" alt="qr.gif"></p> <p id="qrtext"> Sampleの最新情報は、各社携帯電話からもご覧頂けます。<br> 下記URL・左のQRコードからアクセスしてください。<br> http://sample.jp </p> </div> </div> <div id="footer"> Copyright 2009 Sample. All Rights Reserved. </div> </div> </body> ●CSS変更 @charset "Shift-Jis"; body { margin:0; padding:0; line-height:1.5; font-size:12px; text-align:left; background:#fc0; } h1,h2,h3,h4,h5,h6,ul,p { margin:0; padding:0; font-size:12px; } ul { list-style-type:none; } img { border:0; } #wrapper { margin:0 auto; padding:0; width:750px; } #header { background:url(image/bgtop01.gif) no-repeat; height:125px; } #header h1{ width:250px; float:left; line-height:125px; margin-left:30px; text-align:center; } #header ul#top { float:left; width:200px; margin:50px 25px 0 0; } /*#header img { margin:20px 0 0 25px; }*/ ul#menu { clear:both; width:600px; margin:0 auto; } ul#menu li { float:left; width:85px; background:#ffc; } #contents { background:url(image/bgmiddle01.gif) repeat-y; } #contents h2 { margin-left:75px; } #topimg img { margin:0px 0 25px 75px; padding:0; } #info_wrap { height:150px; } #infomation li { width:600px; margin:0 75px 0; padding:0; border-bottom:#E3B144 1px dashed; text-align:left; } #mobile { border-top:1px #ccc solid; border-bottom:1px #ccc solid; width:600px; margin-left:75px; } #mobile h2 { margin-left:0; } #qr { float:left; padding-bottom:20px; margin-left:25px; } #qrtext { float:right; padding-left:25px; font-size:11px; margin-top:5px; width:490px; } #footer { background:url(image/bgbottom01.gif) no-repeat; margin-bottom:10px; height:75px; width:750px; text-align:center; padding-top:10px; } .right { text-align:right; width:600px; margin-left:75px; } .background { background:url(image/bgmiddle01.gif) repeat-y; } .c_back { background:url(image/bgstripe.gif); } .clearfix { min-height:1% } .clearfix:after { clear:both; display:block; visibility:hidden; height:0px; content: "."; } * HTML .clearfix { height:1% } /* news */ #news { width:600px; margin-left:85px; } #arikari { background:url(image/bgmiddle01.gif) repeat-y; text-align:center; } #newsnavi { width:750px; background:url(image/bgmiddle01.gif) repeat-y; } また、liをfloatではなく、inlineでもできます。 今回はそれを使用しました。 すいません詳しい話はここではかきません。 色々知りたいならまた聞いてくださいー。
お礼
inlineを使用するやり方もあるんですね。 今後の参考にさせていただきます！ ご回答ありがとうございました！
お礼
無事不具合解消されました！ 質問以外の不具合も指摘＆修正していただき、ありがとうございます。 CSSの勉強を始めたばかりなので、詳しい説明を頂けて助かりました。 ご回答ありがとうございました！