IE7で行間 助けてください

このQ&Aのポイント
  • IE7で行間の差がありすぎる問題が発生しています。行間を少なくする方法を教えてください。
  • IE7の行間に問題があります。1行程度の行間にしたいです。
  • IE7で行間の差が大きすぎます。行間を調整する方法を教えてください。
回答を見る
  • ベストアンサー

IE7で行間 助けてください

行間の差がありすぎます。IE7で1行程度の行間が出来ます。行間の差を少なくしたいです。 検証お願いします。 ul{ margin:0; padding:10px 0; font-size:85%;} li{ display: block; float:left; margin:0; padding: 0px 8px; white-space:nowrap; list-style:none;} <div style="width:400px;"> <ul> <li>あああああああああ</li> <li>いいいい</li> <li>ううううううううう</li> <li>ええええ</li> <li>おおおおおおおおお</li> <li>かかかか</li> <li>ききききききききき</li> <li>くくくく</li> <li>けけけけけけけ</li> <li>こここここここここ</li> </ul> <br style="clear: both;" /> </div>

  • HTML
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

ul{ margin:0; padding:10px 0; font-size:85%; zoom:1; } hasLayoutがらみのバグのようです。

takumana20
質問者

お礼

行間の問題はzoom:1;で解決できました。ありがとうございました。

関連するQ&A

  • firefoxだと2列で表示されてしまう。

    よろしくお願いします。 div.base {width:100%;} .base ul { margin: 0px; padding: 0px 0px 3px 0px; list-style-type:none; } .base li { margin: 0px; padding: 2px 0px 5px 23px; width: 33%; float: left; } 上記のCSSを <div class="base"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <br style="clear: both;"> </div> のように書き込んでいるのですが、IEなどではうまく3列で表示されますがfirefoxの場合はなぜか2列に表示されてしまいます。 お分かりになる方、是非ご教授お願いします。

  • リスト表示を左に寄せたい

    いつもお世話になります。 下記のようなCSSで縦並びのリスト表示をさせていますが、 どうしてもリスト(全体)が左に寄らないので困っています。 できたらボックス(id-=navi)の左から10ピクセルぐらいのところから リストを始めたいのですが・・・ (ちなみに3段組みの一番左のボックスです) 現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。 よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>

    • ベストアンサー
    • HTML
  • float横並びにしたブロックの中のul/liを縦並びにさせたい

    float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 (html) <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> (css) ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ul liが一行目だけずれる(IE7)

    表題通りなのですが、IE7で確認するとul liの一行目だけがなぜか左にずれてしまいます。 原因が分からず困っています。 どなたか教えて頂けませんでしょうか。 宜しくお願い致します。 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; } div#side ul#sidenav { list-style-type:none; border: 1px solid #ccc; } div#side li { position:relative; width: 165px; height:40px; background:url(../common/bg.jpg) no-repeat center; padding: 1px; margin: 5px; } 【html】 <div id="side"> <ul id="sidenav"> <li>test</li> <li>test</li> <li>test</li> </ul> </div>

    • ベストアンサー
    • CSS
  • CSSの左横に隙間ができてしまいます。

    画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->

    • ベストアンサー
    • CSS
  • 初心者です 画像横に文字を入れたい css

    web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul>     <li><a href="index.htm"><img src="画像"width=""height=""></a></li>     <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li>    <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}

  • IE7で <li> の一部が消える

    IE7で横並びの<li>の一部が消えます。(Firefoxでは大丈夫) パソコンのフォントや大きさにもよると思うのですが 2列目の右側の「けけけ・・・」が消えます! 「くくく」や「けけけ」に半角でも足したり削除すれば現れたり 右側に「けけけ」がギリギリにハマるかハマらない様な微妙な場合に出る現象です。 HTMLの書き方等が間違っているのでしょうか? <html> <head> <style type="text/css"> <!-- .xxx{ margin: 0 auto; width: 797px; background: #000;} .xxx ul{ margin: 0 0 0 12px; padding:0; list-style: none; font-weight: bold; line-height: 2;} .xxx li{ float: left; margin: 5px; text-align: center; white-space: nowrap;} .xxx a{ color: #FFF; text-decoration: none; border:1px solid #999; padding: 4px 5px 1px; } --> </style> </head> <body> <div class="xxx"> <ul> <li><img src="http://www.okweb.ne.jp/images/logo_top.gif" width="200" height="125" alt="OK"></li> <li><a href="index.html">ああああああ ああ</a></li> <li><a href="index.html">いいいいいい</a></li> <li><a href="index.html">ううううう</a></li> <li><a href="index.html">えええええ</a></li> <li><a href="index.html">おおおおおお</a></li> <li><a href="index.html">かかかかかかかか</a></li> <li><a href="index.html">きききききききき</a></li> <li><a href="index.html">くくくくくくくくくくくくく</a></li> <li><a href="index.html">けけけけけけ</a></li> <li><a href="index.html">ここここここ</a></li> <li><a href="index.html">さささささ</a></li> </ul> <br style="clear:both"> </div> </body></html>

    • ベストアンサー
    • HTML
  • リストを全体的に右寄せにしたい。

    リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>

    • ベストアンサー
    • HTML
  • CSS  IEバグ リストの後の隙間を消したい

    よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>

  • 画像を横並びに2つと、その右側に文字入りのボックス

    画像を横並びに2つと、その右側に文字入りのボックスを横並びに2(よこ)×3段(たて)で配置したいのですが、IE7だけ2つの画像の下に、文字入りボックスが3(よこ)×2段(たて)で並んでしまいます。 IE8やそれ以外のブラウザは画像右側に文字入りボックスが2(よこ)×3段(たて)で並びます。 どのようにすれば、IE7も他と同じようになりますか。 よろしくお願い致します。 <div class="imagebox"> <p class="image"><img src="1.jpg" width="145" height="120" alt=""/></p> </div> <div class="imagebox" style="margin:0 20px 0 10px"> <p class="image"><img src="2.jpg" width="145" height="120" alt=""/> </div> <ul class="box"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> <div style="clear: left;"></div> div.imagebox { background-color: #383838; width: 145px; float: left; margin: 0px; } p.image { text-align: center; margin: 0px; } ul.box { list-style:none; width:100%; margin: 0 0 5px 0; padding: 0; } ul.box li { width: 180px; height: 14px; padding: 4px 5px 4px; border-color: #000033; border-style: double; background: #373737; color: #7e7763; text-align: center; float: left; display: inline; list-style: none; margin: 2px; }

    • ベストアンサー
    • HTML

専門家に質問してみよう