ulの入れ子で困っています

2023/08/11 02:27

このQ&Aのポイント

IE6と7でulの入れ子に隙間が空いてしまいます。どのように隙間をなくせますか？
ulの入れ子に隙間が空く問題を解決したいです。IE6と7での表示についてアドバイスをお願いします。
ulの入れ子で上に隙間が空いてしまう問題が発生しています。どのように修正すれば良いでしょうか？

ベストアンサー

ulの入れ子で困っています

2011/03/16 01:54

以下のようにulの入れ子をしているのですがIE6と7で上に隙間が空いてしまいます。 ulにmargin:0;を加えても全く効果なしなのですがどのようにすれば隙間をなくせますでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>タイトル</title> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> </head> <body> <ul id="hoge"> <li> <ul id="fuga"> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> </li> </ul> </body> </html>

dcx147
お礼率33% (214/636)

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

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

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

ベストアンサー

Questa
ベストアンサー率48% (13/27)

2011/03/16 19:53 回答No.3

内側のUL（fuga）に対し、width:100% または、zoom:1（IE独自拡張）を指定してください。エラーの原因、対策等は「haslayout」で検索すれば分かると思います。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/03/16 08:30 回答No.2

IEのバグ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトル</title> <style type="text/css">  </style> </head> <body> <ul id="hoge"> <li> <ul id="fuga"> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> </li> </ul> </body> </html>

質問者

お礼 2011/03/16 11:52

お返事ありがとうございます。試したところIEでも他のブラウザ同様に表示されました。しかしborderは不要なのでwhiteにして見えないようにするしか方法はないでしょうか？ちなみにbodyにはmargin:0;を入れてます。

Yama-tani
ベストアンサー率44% (13/29)

2011/03/16 07:09 回答No.1

bodyにもmargin:0;を入れてみてはいかがでしょうか？

関連するQ&A

html+cssでHPを組んでますが
言葉ではうまく説明できないので、html+cssコードを下のほうに貼り付けました。すいませんが、まずはそちらを参考してほしいです。続いて質問ですが、「ulも#tate」のほうも縦横300pxで指定してるのに、ulのリスト側はなぜか幅が大きくなってしまいます。この改善点と説明を教えて頂けないでしょうか。それと「ilの点」の位置を左ツラに合わせるのはどうやるのでしょうか。疑問点が解決できず、とても困ってます。 *************html+css****************** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <ul> <li>あ</li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ul> <div id="tate"> s </div> </body> </html> ********************************************************** よろしくお願いします。
- ベストアンサー
- HTML
ddの中にulを入れ子にすると上に余白が出来る
ddの中にulを入れ子にすると上に余白が出来る ddの中にリストを入れたいのですが、CSSでmarginやpaddingを「0」にしてもリストの上部に余白が出来てしまいます。色々試してみたのですが、どうしても上の余白が消えません。何処かタグがおかしいのでしょうか？　それともバグでしょうか？ *因みに、ulの上部marginにマイナスの数値を設定すると余白は消えるのですが・・・。以下に、問題の個所を抜粋します。－－－－－－－－－－－－－－－－－－－－－－－－ body { margin: 0; padding: 0; } html>/**/body { font-family: "MS Pゴシック", "MS P Gothic", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", sans-serif; } #about { margin: 0; padding: 0; width: 700px; background-color: #33FFFF; } #about dl { margin: 10px 0 0 60px; padding: 0; background-color:#99FFCC; } #about dl dt { margin: 0; padding: 0; font-size: 12px; background-color:#99FF00; } #about dl dd { margin: 0 0 0 15px; padding: 0; background-color:#0066FF; } #about dl dd ul { margin: 0; padding: 0; width: 500px; list-style-position: inside; } #about dl dd li { margin: 0; padding: 0; background-color:#CCFF99; font-size: 11px; } －－－－－－－－－－－－－－－－－－－－－－－－ <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional/EN" "thhp://www.w3.org/TR/xhtml1/DTD/xhtml1-toransitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xhtlm="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>ulの上に余白が出来る</title> </head> <body> <div id="about"> <dl> <dt>動作確認</dt> <dd> 　 <ul> <li>解像度：1440×990</li> <li>OS：Windows</li> <li>ブラウザ：IE7、Opera9.8、Chrome6.0、Safari5.0</li> <li>CSS及びJavascriptを使用しています。</li> </ul> </dd> </dl> </div> </body> </html>
- ベストアンサー
- HTML
htmlとcss
以下のようにボタンを配置し、その横に文字を書きました。水平線上で見ると、ボタンのほうが若干上に配置されてしまいます。綺麗に平行にするためにcssの設定をしたいのですが、誰か教えてくれませんか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li { list-style-image: url(img/bot01.gif); font-size: 12px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; } </style> </head> <body> <ul> <li>ああ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> </ul> </body> </html>
- 締切済み
- HTML
jquery ulのtab切り替えについて
昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。ソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。
- 締切済み
- JavaScript
XHTML のタイトルが表示されません　ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像）　一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- ベストアンサー
- CSS
はじめまして
はじめまして下記のUTF-8をhift_JISに変改したいのですが。変換してアップすると文字化けになるか、画面上は真っ白（ソース上では文字化け）になってしまいます。どのようにしたら変換できるのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>＊＊＊＊＊＊＊＊＊＊＊＊</title> <link href="components/css/default.css" rel="stylesheet" type="text/css" /> </head> <body>
- ベストアンサー
- HTML
IE6でli間に出来る隙間を無くす方法について
下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、Firefox等では隙間は出来ませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>
- ベストアンサー
- CSS
ホームページの質問です。
ホームページの質問です。 50音表を作りたいのですが、こんな感じのタグで大丈夫でしょうか？ちょっと自信ありません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="iti"> <p>あ行</p> </div> <div class="ni"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <div id="iti">か行 </div> <div class="ni"> <ul> <li>か</li> <li>き</li> <li>く</li> </ul> </div> </body> </html> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。
- ベストアンサー
- HTML
ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。下記のソースでhtmlを制作しましたが、#headerの上に余白があります。どうすればこの余白をとる事が出来るでしょうか？お教え頂ければと思います。 ↓ソース↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css">  </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ