ベストアンサー

<li>タグを連続しようで　IEで変な表示がされる

2008/09/01 10:41

html上で下記のようなものを連続で使用したら変なところにテキスト内容が出てきてしまっています。 IE６とIE７だけに見られる症状のようでご存知の方いらっしゃいましたらご回答お願い致します。 <ul> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> </ul> <ul> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> </ul>

wamono
お礼率90% (9/10)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

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

ベストアンサー

hetare560
ベストアンサー率66% (28/42)

2008/09/01 15:20 回答No.3

こんにちは。ソースにコメントを記載しているとそのような状態になる事がありますので、ul付近にあるコメント（＝ ）を消してみてください。

質問者

お礼 2008/09/01 15:43

消してみました！！直りました！！ありがとうございます。盲点でした。隙間は空いてしまいましたが他の対応で隙間ごまかします。ありがとうございます。

その他の回答 (2)

yambejp
ベストアンサー率51% (3827/7415)

2008/09/01 14:45 回答No.2

具体的なcssなどのスタイルシートを提示ください。なにも設定していなければ、ulはブロックになるので左右に並ぶことはないと思います。

質問者

お礼 2008/09/01 15:44

ご回答ありがとうございます。うまく説明できなくてすみません ul付近のを削除して治しました。ありがとうございます。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2008/09/01 11:16 回答No.1

スタイルシートのlist-style-imageやlist-style-positionなどが指定されていないか、 <ul>と<li>や</li>と</ul>の間に全角スペースが入っていないか確認してみてください。それ以外の原因は、、、症状を確認できないためわかりません。

質問者

お礼 2008/09/01 15:46

ご回答ありがとうございます。説明不十分ですみませんhetare560のul付近のを削除で治りました。ありがとうございます。

質問者

補足 2008/09/01 12:53

すみません　言葉足らずでした。空白の問題は無いと思います。見た目としては --------------------------------------------- テキストが入ります。　テキストが入ります。テキストが入ります。　テキストが入ります。テキストが入ります。　テキストが入ります。ります。 ↑↑↑↑ --------------------------------------------- ↑矢印の部分のようにリストから外れて表示されてしまうのです。説明が難しいのですが伝わりましたでしょうか？

関連するQ&A

IE8でli:hoverが効かない
Window7 IE8を使っています。ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトからｃｓｓドロップダウンメニューの例文をもらってきて書き込んでみましたが、どうしてもサブメニューが表示されません。たとえば、【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、サブメニューが表示されません。原因や回避方法を教えていただけないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
li　３列表示
こんにちは、下記のliを3列づつ表示したいのですが、どのようにすればよいでしょうか？（２列とかはあるのですが・・・tableにすべき？） <ul id="leftlist1"> <li><a href="#">a1</a></li> <li><a href="#">a2</a></li> <li><a href="#">a3</a></li> </ul> <ul id="leftlist2"> <li><a href="#">b1</a></li> <li><a href="#">b2</a></li> <li><a href="#">b3</a></li> </ul> <ul id="leftlist3"> <li><a href="#">c1</a></li> <li><a href="#">c2</a></li> <li><a href="#">c3</a></li> </ul>
- ベストアンサー
- CSS
<li>タグでメニューを作った場合
横並びでサブメニューがあるメニューを以下の様に作成しました HTMLは <ul> <li><a href="">トップページ</a></li> <li><a href="">メニュー2</a> <ul class="sub-menu"> <li><a href="">メニュー2のサブメニュー</a></li> <li><a href="">メニュー2の長いんだよサブメニュー</a></li> <li><a href="">メニュー2のサブメニュー</a></li> </ul> </li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> <li><a href="">メニュー6</a></li> <li><a href="">メニュー7</a></li> </ul> CSSは ul{ float:right; font-size:95%; padding-bottom:20px; } ul ul{padding-bottom:0;width:auto;} ul li{ display:inline-block; vertical-align:text-top; text-align:left; padding:5px 0; margin-left:15px; background:url(../images/arrow.png) no-repeat 0 9px; } ul li a{ display:block; padding:0 0 0 12px; overflow:hidden; } ul li li{ display:block; padding:0; margin-left:5px; background:url(../images/arrow2.png) no-repeat 0 6px; } これですと添付画像の左のようになってしまいます。サブメニューの長さに関係なく、右のようにメニューを詰めることは可能ですか
- ベストアンサー
- CSS
IE7で <li> の一部が消える
IE7で横並びの<li>の一部が消えます。（Firefoxでは大丈夫）パソコンのフォントや大きさにもよると思うのですが 2列目の右側の「けけけ・・・」が消えます！「くくく」や「けけけ」に半角でも足したり削除すれば現れたり右側に「けけけ」がギリギリにハマるかハマらない様な微妙な場合に出る現象です。 HTMLの書き方等が間違っているのでしょうか？ <html> <head> <style type="text/css">  </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
<ul>タグと<li>タグで列表示
こんにちは。以下サイト http://www.mirabella.jp/MiraTop.do のブランドリストのソースを見ると、 <div id="list_en4" class="clearfix"> <ul> <li class="initial">A</li> <li><a href="/ItemPrdList.do?brandId=01394&crumbType=0:brands">ACCESSORIES & BEYOND</a></li> <li><a href="/ItemPrdList.do?brandId=01376&crumbType=0:brands">ADIDAS BY STELLA McCARTNEY</a></li> <li><a href="/ItemPrdList.do?brandId=01381&crumbType=0:brands">ALTEA</a></li> <li><a href="/ItemPrdList.do?brandId=01382&crumbType=0:brands">ALPO</a></li> <li><a href="/ItemPrdList.do?brandId=01661&crumbType=0:brands">AMERICAN RAG CIE</a></li> <li><a href="/ItemPrdList.do?brandId=01405&crumbType=0:brands">AMET & LADOUE</a></li> <li><a href="/ItemPrdList.do?brandId=01406&crumbType=0:brands">ANGLO LEATHER</a></li> <li><a href="/ItemPrdList.do?brandId=01677&crumbType=0:brands">ANYA HINDMARCH</a> <li><a href="/ItemPrdList.do?brandId=01355&crumbType=0:brands">A.T</a></li> <li class="initial">B</li> <li><a href="/ItemPrdList.do?brandId=01508&crumbType=0:brands">BALMUIR</a></li> <li><a href="/ItemPrdList.do?brandId=01365&crumbType=0:brands">BRUNO CARLO</a></li> <li class="initial">C</li> <li><a href="/ItemPrdList.do?brandId=01513&crumbType=0:brands">CACHAREL</a></li> <li><a href="/ItemPrdList.do?brandId=01675&crumbType=0:brands">CALLEEN CORDERO</a> <li><a href="/ItemPrdList.do?brandId=01402&crumbType=0:brands">CHAN LUU</a></li> <li><a href="/ItemPrdList.do?brandId=01407&crumbType=0:brands">CITRUS</a></li> <li><a href="/ItemPrdList.do?brandId=01388&crumbType=0:brands">COLETTE MALOUF</a></li> <li class="initial">D</li> <li><a href="/ItemPrdList.do?brandId=01478&crumbType=0:brands">DEMI</a></li> <li><a href="/ItemPrdList.do?brandId=01524&crumbType=0:brands">DELICIOUS FREAKS</a></li> <li class="initial">E</li> <li><a href="/ItemPrdList.do?brandId=01369&crumbType=0:brands">ELEY KISHIMOTO</a></li> <li><a href="/ItemPrdList.do?brandId=01522&crumbType=0:brands">ERIBE</a> </ul> </div> この表示のみでリストが3列で表示されているのですが、このように3列で表示させる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
CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。
.ul { width: 120px; height: auto; float: left; font: 12; line-height: 150%; padding: 0; list-style-image: url(img/side-tab.gif); } .li { font-size: 12px; margin-left: 1.5em; } <ul class="○○○"> <li>１１１１１</li> <li>２２２２２</li> <li>３３３３３</li> <li>４４４４４</li> <li>５５５５５</li> <li>６６６６６</li> </ul> このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。唯一firefoxだけが思うように表示できました。 IE６と７でも違う表示になりました（IE6だとかなり右寄り） operaに関しては画像とテキストの縦位置がずれてしまっていました。 CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・これを一つのCSSできれいに表示することは不可能でしょうか？どうかよろしくお願致します。
- ベストアンサー
- HTML
IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。現在　li　タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。どうぞご回答お願いいたします。以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
liタグのコピペ
下記コードのコピペがうまくいかない理由が分かりません。 <html> <body> <h1>test</h1> <ul> <li>aaa</li> </ul> </body> </html> 上記コードをブラウザで開き、<li>タグを描画させた状態でテキストエディタにコピペすると test # aaa となります。ちなみに<ul>を<ol>にしてあげると test 1. aaa としてくれます。おそらく<ul>としたときの<li>の描画は、内部的に画像？にしており、結果的にコピペ処理の中で"# "に変換しているのではないかと予想しています。ひとまず明らかにしたいのは 1．<li>は内部的に画像を表示しているのか？ 2．なぜコピペ処理の中で"# "に変換されたのか？（"# "以外に変換したりもするのか？）以上です。宜しくお願い致します。
- ベストアンサー
- HTML
cssとjavascriptでプルダウンメニュー
お世話になります。いろいろとサンプルを試し、ハマっています・・・。どなたか助けてください！今下記のようなソースでメニューを作っています。 <ul id="globalnavi"> <li id="a"><a href="#">a</a></li> <li id="b"><a href="#">b</a> <ul id="subnav"> <li><a href="#">b-1</a></li> <li><a href="#">b-2</a></li> <li><a href="#">b-3</a></li> </ul> </li> <li id="c"><a href="#">c</a></li> </ul> このソースで、親階層のメニューは画像、submenuはテキストで表現したいのですが、FFやIE7、IE6、safariに使える方法でなにか簡単なものありましたら、教えていただきたいです。よろしくお願い致します！
- 締切済み
- JavaScript

<li>タグを連続しようで　IEで変な表示がされる