- 締切済み
ボックス間の隙間をなくしたい。
親ボックス[wrap]に配置された、子ボックス[exam1],[exam2],[exam3] の<span></span>に囲まれた”文字を”消すための記述、（子ボックスには本来画像が配置 され、文字はaltの役割として記述してあります。） #wrap a span { display:none; } をしますと、「IE」において、数ピクセルの隙間が出来てしまいます。 [Firefox]ではその様な事はありません。 隙間をなくしたいのですが、どなたか、CSSなどに詳しい方、アドバイスをいただけますでしょうか。 ※尚、文字を”消す”方法として「text-indent」などは使用しないとします。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN''http://www.w3.org/TR/html4/strict.dtd'> <head> <title>隙間をなくしたい</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> ul{ margin: 0; padding: 0; } a { text-decoration: none; } li { list-style: none; } body { margin: 0px 0px 0px 20px; } #wrap{ width:300px; height:400px; margin-top:20px; padding-left:20px; border: 1px #1071F5 solid; } .exam1 a,.exam2 a,.exam3 a{ display:block; height:50px; width:200px; margin-top:0px; border: 1px #FD0101 solid; } /* この下記の行を有効にすると隙間が開く */ #wrap a span { display:none; } </style> </head> <body> <!-- ■レフトナビ■ --> <div id="wrap"> <ul> <li class="exam1"><a href="exam.html"><span>exam1</span></a></li> <li class="exam2"><a href="exam.html"><span>exam2</span></a></li> <li class="exam3"><a href="exam.html"><span>exam3</span></a></li> </ul> </div> </body> </html>
- genzen
- お礼率86% (66/76)
- Windows Vista
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kaisinjuku04
- ベストアンサー率46% (743/1584)
IEとFireFoxやChoromeで見た目を統一したければ、「全称セレクタ」とか「リセットCSS」と言う手法があります。 カッコ内で検索してください。 なお、コードが長くなるなどの弊害もありますので、使わないことを勧める方もおられます。 ご自身で判断してください。
関連するQ&A
- 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"> <!-- body { margin: 0; padding: 0; } ul, li { margin:0; padding:0; } li { list-style: none; } #mainlinkbox { width:100px; } #mainlinkbox li.nolink, #mainlinkbox li.link a { width:97px; border-bottom: 1px dotted blue; padding-bottom: 3px; padding-left: 3px; padding-top: 4px; background-color:red; } #mainlinkbox li.link { position:relative; } #mainlinkbox li.link a { display:block; } #mainlinkbox li.link a:hover { background-color: #c2f4a3; } #mainlinkbox li.link .submainlinkbox { left: 100px; position: absolute; width: 100px; background: yellow; } --> </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
- CSSでボックス内の隙間が消えない
MacのDw2004MXで、ulリストでマークアップしたナビゲーションを横に並べてa要素に背景を設定し、テキストをレフトアウトしています。 Mac上のブラウザでは問題なのですが、WinのIE6で見てみると文字サイズが最小の時以外はナビの上部に白い隙間が表示されてしまいます。もちろんpaddingもmarginも0を指定しています。隙間は文字サイズが最大のとき高さ3px、文字サイズ中のとき高さ2pxです。 しかも、a要素のfont-sizeとline-hightはpxで指定しているのでWinの文字サイズ変更は効かないはず… ulタグをdivで括り、divのpaddingもmarginも0としています。 お助けください。 ====XHTML===== <div id="nav"> <ul><li><a id="nav1" href="index.html">TOP</a></li><li><a id="nav2" href="room.html">page1</a></li><li><a id="nav3" href="price.html">page2</a></li><li><a id="nav4" href="service.html">page3</a></li><li><a id="nav5" href="meal.html">page4</a></li><li><a id="nav6" href="reserve.html">page5</a></li><li><a id="nav7" href="access.html">page6</a></li></ul> </div> ======CSS===== #nav{ width:705px; height:30px; margin:0; padding:0; } #nav ul{ list-style-type:none; margin:0; padding:0; height:30px; } #nav ul li{ display:inline height:30px; margin:0; padding:0; height:30px; } #nav ul li a{ display:block; margin:0; font-size:6px; height:30px; float:left; background:url(../i/g/nav.gif) no-repeat 0 0; text-indent:-5000px; line-height:10px; }
- 締切済み
- HTML
- 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; }
- 締切済み
- CSS
- Dreamweaverでリストを作成するとボックスからずれてしまいます
DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- レイアウトが崩れてしまう原因を教えて下さい。
添付データのようなデザインをtableを使わずに作りたいのですが、 テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまいます。 テキストが増えても減ってもレイアウトが崩れない方法はありますか？ <style type="text/css"> .contents{ width: 650px; margin-right: auto; margin-left: auto; } .contents ul{ list-style: none; } .contents ul li.photo{ float: left; border: 1px solid #ccc; padding: 5px; } .contents ul li.text, .contents ul li.title{ margin-left: 200px; } .contents ul li.title{ margin-top: 20px; margin-bottom: 10px; color: #111; } .contents ul li.text{ font-size: 14px; } .contents ul li.photo a img{ border-style: none; outline: none; } .contents ul li.title a:hover{ color: #ccc; } </style> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div>
- ベストアンサー
- HTML
- css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。 縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、 そのボックスの右にピッタリ並べたいのですが … text-align、margin 二通りの指定で試したものの 左揃えになってしまいます（Mac safari 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> <style><!-- *{ margin:0; padding:0; } ul.align { list-style:none; text-aling:rignt; width:200px; border:1px solid #000;} ul#margin li { list-style:none; margin-left:auto; margin-right:auto;} --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- ベストアンサー
- 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>
- 締切済み
- HTML
- jQueryでの開閉メニューについて
jQueryでアコーディオン（開閉）メニューを作成しています。 メニューの右端に、マークを表示していますが、開閉状態に応じて変えることはできますでしょうか？ 単に変えるだけならできますが、開閉状態に応じて変えるとなると、なかなかできませんでした。 画像のように閉じているときは右端に[+]マークを表示し、開いたときは[-]マークを表示したいのです。 皆様の知恵をご教示いただけると幸いです。 以下ソースです。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="../js/jquery/jquery.js"></script> <script><!-- $(document).ready(function(){ var marks = { closedMark: '[+]', openedMark: '[-]' }; //開閉状態表示 $("h4.conmenu").append("<span>"+ marks.closedMark +"</span>"); //オンマウスでカーソル変更 $("h4.conmenu").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); //最初に表示するか？ $("ul.sub").css("display","none"); //クリック処理 $('h4.conmenu').click(function(){ // 開閉する速度 $(this).next().slideToggle('fast'); // マークを変える // $(this).find("span").html(marks.openedSign); }); }); //--> </script> <style type="text/css"> .leftmenu { float: left; width: 200px; background: #ff0000; list-style: none; } .leftmenu h4 { padding: 0; /* margin: 0;*/ margin: 5px 2px 5px 5px; } .leftmenu ul { padding: 0; margin: 0; list-style-type: none; } .leftmenu li { padding: 0; margin: 0; } .leftmenu a, .leftmenu a:visited { #text-transform:uppercase; display: block; height: 25px; line-height: 25px; padding: 0 10px 0 20px; color: #ffffff; background: #303030; text-decoration: none; } .leftmenu a:hover { color: #000; background-color: #acac23; } .leftmenu span{ float:right; } </style> <title>sample</title> </head> <body> <div class="wrapper"> <div class="leftmenu"> <h4 class="conmenu">Menu-1</h4> <ul class="sub"> <li><a href="#">Menu-1a</a></li> <li><a href="#">Menu-1b</a></li> <li><a href="#">Menu-1c</a></li> <li><a href="#">Menu-1d</a></li> </ul> <h4 class="conmenu">Menu-2</h4> <ul class="sub"> <li><a href="#">Menu-2a</a></li> <li><a href="#">Menu-2b</a></li> <li><a href="#">Menu-2c</a></li> <li><a href="#">Menu-2d</a></li> <li><a href="#">Menu-2e</a></li> </ul> <h4 class="conmenu">Menu-3</h4> <ul class="sub"> <li><a href="#">Menu-3a</a></li> <li><a href="#">Menu-3b</a></li> <li><a href="#">Menu-3c</a></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- 横並びのメニューボタンについて
float:leftでメニューボタンを横並びにしています。 表示を100％にするとうまく並ぶのですが、 100％以上にすると左端に隙間が、 100％未満にすると、ある時点からメニューボタンが2列になってしまいます。 これを回避する方法はあるでしょうか。 <<html>> <body> <div id="wrap"> <img src="image/photo1.jpg"> <div id="navi"> <!-- ナビボタン ここから --> <ul class="menu"> <li><a href="index.html" >ホーム</a></li> <li><a href="page1.html" >ページ１</a></li> <li><a href="page2.html" >ページ２</a></li> <li><a href="page3.html" >ページ３</a></li> <li><a href="page4.html" >ページ４</a></li> <li><a href="page5.html" >ページ５</a></li> </ul> </div> <!-- /navi --> </div> <!-- /wrap --> </body> <<css>> body { text-align: center; background-color:#EEEEEE; font-size: 12px; margin-top: -10px } #wrap{ margin: 0 auto; text-align: left; background-color: #ffffff; width: 752px; border: 1px solid #404040; border-collapse: collapse; padding: 0; } .navi{ width:750px; } ul.menu { margin: -5 0 0 0px; padding :0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 125px; line-height: 30px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(menu1.jpg); background-repeat: no-repeat; color: #ffffff; font-size: 12px; } ul.menu li a:hover{ background-image: url(menu2.jpg); color: #404040; } よろしくお願いします。
- ベストアンサー
- HTML
- 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
