IEのdivの間の隙間
- IEのdivの間に隙間ができて困っています。
- Google Chromeでは隙間なく表示されますが、IEでは1ピクセルの隙間ができます。
- marginを上下0に設定しても問題は解決しませんでした。
- ベストアンサー
IEのdivの間の隙間
こんにちは。 dreamweavercs5使っています。 headerとnavi間に隙間ができて困っています。 記述としては <div id="header"> .... </div> <div id="navi"> <p><a href=...html><img src=...></a> <p><a href=...html><img src=...></a>・・・ </div> というようにnaviの左上から画像を右に詰めています。 googlechrome１０ではheaderとnavi間に隙間なく表示されますが IE８だと１？ピクセル隙間ができます。 marginは上下０にしましたがそれでも変わりません。 imgのcssに img{vertical-align:bottom;} と入れても治りません。 CSSレイアウトではきちんと繋がっているので問題ないのですが・・・
- tori2008
- お礼率68% (11/16)
- ホームページ作成ソフト
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> </head> <body> <div id="header" style="border:solid 1px #fcc"> .... </div> <div id="navi" style="border:solid 1px #ccf"> <p><a href=...html><img src=...></a> <p><a href=...html><img src=...></a>・・・ </div> </body> </html> 私のIE8では、隙間はできませんね。 上ソースで隙間はできますか？ 隙間が確認できるソースが欲しいものです。
その他の回答 (1)
- sora1tora2
- ベストアンサー率69% (27/39)
こんにちは CSSリセットはされていますか？ 今はあまり使われていませんが、一番簡単な方法です。 *{ margin: 0; padding: 0; } お試しください。 参考になればいいのですが。
お礼
回答ありがとうございます。 自己解決しました。 headerを２分割していて左右にまたがる背景を設置したかったのですが 左にしか表示されず仕方なく右と繋がるよう左右に背景を設置しました。 しかし、これだとIEでは１ｐｘほど隙間ができてしまいました。 左右のheaderをwrapしwrapに左右にまたがる背景を設置することで解決しました。 質問に詳細な目的が書かれていなく、前提も不足していたことをお詫びします。 失礼ながら回答順にポイントを付けさせていただきます。
関連するQ&A
- <div>と<div>の隙間を無くす方法
ヘッダーの<div>を作って、その下に横長（ヘッダーと同じ長さです）ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20ｐｘほどの隙間が空いてしまいます。なぜでしょうか？マージンを0に設定してもできてしまいます。 また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか？ また、メニューボタンはjavascriptでスワップイメージにしました。 どなたかわかる方いらっしゃいますか？ とても困っています。できましたら至急にお願いいたします。 コードを載せておきます。 <div id="header"> <div id="aa"> <h1>*********</h1> <h2>*********</h2> <p>**********<br /> *************</p> </div><!--aa--> <div id="bb"> <p>********</p> </div>><!--bb--> </div><!--header--> <!--navi--> <div id="navi"> <ul #menu> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> </ul> </div> <!--navi--> ヘッダー部分のcss #header{ width: 800px; height: 120px; background-image: ***; background-repeat: repeat-y; margin: 0px; } ナビ部分のcss #navi{ width: 800px; height: 35px; } } ul#menu{ float: right; display: inline; margin: 0; } li{ float: left; margin: 0;
- ベストアンサー
- CSS
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- IE6でヘッダーとイメージの間に微妙な隙間
ヘッダーとンイメージはそれぞれdivで囲んでいます。IE6でヘッダーとメインイメージの間に微妙な隙間が隙間が空いてしまいます。FOXでは隙間は空きません。なぜでしょうか？ 教えてください。 ==HTML== <div id="header"><img src="images/head.gif" width="821" height="161" border="0" usemap="#Map2" /> <map name="Map2" id="Map2"> <area shape="rect" coords="674,124,775,144" href="#" /><area shape="rect" coords="36,17,322,85" href="#" /> </map></div> <div id="main_img" align="center"><img src="images/main_flash.jpg" width="801" height="305" border="0" /></div> ==css== /*==ヘッダー関係==*/ #header img{ margin:0 0 0 0; padding:0; height:161px; } /*============ボディ部分開始============*/ #main_img{ background:url(../images/main_flash_bg.jpg) no-repeat; width:821px; height:305px; margin:0; padding:0; }
- ベストアンサー
- HTML
- IE6で隙間ができてしまう
IE6でヘッダーとコンテンツの間に隙間ができてしまいます。 IE7、Firefox、Safariでは問題なく表示されています。 [HTML] <div id="top"> <div id="topcont"> <h1><a href="http://www.AAA.com/"><img src="img/AAA.gif" />AAA</a></h1> </div></div> <div id="navi"> <div id="navicont"> <ul> <li id="home"><a href="http://www.AAA.com/" title="AAA">AAA</a></li> <li id="BBB"><a href="http://www.AAA.com/BBB.html" title="BBB">AAAについて</a></li> <li id="CCC"><a href="http://www.AAA.com/CCC.html" title="CCC Lesson">CCC</a></li> </ul> </div> </div> [CSS] #top { background: url(img/IIIII.jpg) repeat-x; margin: 0px; padding: 0px; height: 80px; } #topcont { background: url(img/III.jpg) repeat-x; margin: 0px auto; padding: 0px; height: 80px; width: 900px; } #navi { background: url(img/NNN.gif) repeat-x; text-align: center; margin: 0px; padding: 0px; height: 35px; } #navicont { margin: 0px auto; padding: 0px; height: 35px; width: 900px; } 隙間を無くすにはどうすればよいのでしょうか。 わかる方いらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- HTML
- FFにおけるDIVタグ間の隙間について
たびたびお世話になります。 自分なりにあちこち検索したのですが、解決できるものが見つかりませんでしたので、質問させていただきます。 今回初めてCSSを使ってHPを作成しているのですが、部分的に<DIV>～</DIV>と<DIV>～</DIV>の間に10px程の隙間が発生します。 IE系のブラウザでは特に問題ないのですが、Mozila系で再現されるようです。 どのようなタグを挿入、あるいは削除すれば解決できるでしょうか？ 以下、該当部のタグになります。 【html】 <body> <div id="header"> <a href="http://****.jp/"> <img src="../img/images/images/title.jpg"width="207"height="33"> </a> </div> <div id="topphot1"> <div id="topphot2"> <!-- TOP画像入れ替える時はここのファイルを変更。横711px縦150pxのもののみ --> <img src="../img/topphoto.jpg" width="711px" height="150px" /> <!-- ↑↑↑ --> </div> <div id="q_menu"> <ul class="q_menu"> <li><a href="#"><img src="../img/icon_m.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_s.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_r.gif" width="23" heigh="23" /></a></li> </ul> </div> </div> <div id="m_menu"> <ul class="m_menu_ro"> <li><a href="#" class="bbs"></a></li> <li><a href="#" class="battle"></a></li> <li><a href="#" class="event"></a></li> <li><a href="#" class="hunt"></a></li> </ul> </div> 【css】 #header{ padding:0 auto 0 auto; margin:0 auto 0 auto; background-color:#7fd137; color:#ffffff; width:800px; height:33px; } #topphot1{ margin:0 auto 0 auto; padding:0 auto 0 auto; position:relative; background-color:#edf2e9; background-image:url(../img/images/HP_03.jpg); background-repeat:no-repeat; background-position:center; color:#696969; width:800px; height:220px; text-align:center; } #topphot2{ margin-top:8px; padding-top:8px; margin-left:auto; margin-right:auto; position:relative; color:#696969; width:711px; height:150px; text-align:center; } #q_menu{ position:absolute; left:50px; bottom:10px; } ul.q_menu{ width:69px; height:23px; margin:0px; padding:0px; } ul.q_menu li{ float:left; } 不慣れなもので、タグ自体がちょっと滅茶苦茶なカンジもするのですが…。 aタグ周囲の改行の削除、vertical-alignをbottomに設定するなどでは解消できませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- html5でブロックとブロックの間に隙間ができる
下記のホームページを作りました。 しかし、ボタン部分とスライドショー部分に少し隙間ができてしまいます。 いろいろ試しましたが、隙間が目られません。 原因を教えていただけると幸いです。 [html5] <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link href="style/main.css" rel="stylesheet" type="text/css"> <meta name="author" content="HTMQ"> <meta name="robots" content="all"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> </head> <body> <header> <section> <h1>格安ホームページ制作会社 - hompa（ホムペ） -</h1> </section> <!-- container --> <div id="container"> <!-- header --> <div id="header"> <nav> <ul> <li><a href="index.html"><img src="img/btn/btn0.png" width="120" height="86" alt="TEST"></a></li> <li><a href=""><img src="img/btn/btn1.png" width="120" height="86" alt="TEST2"></a></li> <li><a href=""><img src="img/btn/btn2.png" width="120" height="86" alt="TEST3"></a></li> <li><a href=""><img src="img/btn/btn3.png" width="120" height="86" alt="TEST4"></a></li> <li><a href=""><img src="img/btn/btn4.png" width="120" height="86" alt="TEST5"></a></li> <li><a href=""><img src="img/btn/btn5.png" width="120" height="86" alt="TEST6"></a></li> <li><a href=""><img src="img/btn/btn6.png" width="120" height="86" alt="TEST7"></a></li> </ul> </nav> </div> <!-- header --> <div class="clearfix"></div> <!-- slidmain --> <div id="slidemain"> <p id="slideshow"> <img src="img/index/photo1.jpg" width="980" height="450" alt="スライドショー1" class="active"> <img src="img/index/photo2.jpg" width="980" height="450" alt="スライドショー2"> <img src="img/index/photo3.jpg" width="980" height="450" alt="スライドショー3"> </p> </div> <!-- slidmain --> </div> <!-- container --> </header> </body> </html> [CSS] @charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; } body { } div#container { text-align:left; width:980px; margin: 0 auto; } div#header { width:840px; text-align:left; margin: 0 auto; padding-top:20px; } h1 { text-indent: -9999px; display: none; } ul { list-style:none; } li { float:left; } .clearfix:after { content:" "; display:block; clear:both; } #slidemain { width:980px; height:450px; } #slideshow { position: relative; width: 980px; height: 450px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; }
- ベストアンサー
- HTML
- スタイルシート DIVとDIVの間に隙間ができてしまいます。
DIVとDIVの間に１０ピクセルほどの隙間ができるのはなぜでしょうか？ ｈｔｌｍは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>タイトル</TITLE> <link rel="stylesheet" href="style_1.css" type="text/css"> </HEAD> <BODY> <DIV id=site> <DIV id=header> <DIV id=top-logo><IMG src="logo2.gif" border="0" alt="ロゴ"> </DIV> <hr color="#ffccff" width="750" height="2"> </DIV> </DIV> </BODY> </HTML> 上部の方はよくわからなくてホームページビルダーのをコピーして、残りはメモ帳で手打ちしました。 スタイルシートは、全て手打ちです。 *{ margin:0px; padding:0px; } #site { width: 760px; border: 2px solid pink; font-size: 90%; line-height: 150%; margin:0px; padding:0px; border: 1px solid red; } #header { width: 760px; border: 1px solid blue; } #top-logo { FLOAT: left; border: 1px solid green; } #siteと#headerの赤と青のボーダーはぴったりくっついているのに、#top-logoの上に隙間があります。 ｈｒの線の下にも１０ｐｘ分くらいの隙間があります。 なぜこのような隙間ができてしまうのでしょうか？
- ベストアンサー
- HTML
- XHTML+CSSによるデザインをしています。
XHTML+CSSによるデザインをしています。 divボックスによる３段組レイアウトをして、左サイドバーの中にdivボックスを、縦に複数設置しようとしたら、２個目のボックスが表示されずメインボックスと右サイドバーが詰まってレイアウトが崩れてしまいました。 コーディングミスをご指摘いただけるのでしたらお願いします。 <div id="wrap"> <div id="header"> <div id="header_top"> <div id="logo"> <img src="image/logo.jpg" alt="" /> </div><!-- /logo --> <div id="header_right"> <div id="logo2"> Lost Book World </div> <div id="header_right_txt"> Yu </div> </div><!-- /header_right --> </div><!-- /header_top --> <div id="header_bottom"> <a href=".html"><img src="image/navi_global01.jpg" alt="" /></a><a href=".html"><img src="image/navi_global02.jpg" alt="" /></a><a href=".html"><img src="image/navi_global03.jpg" alt="" /></a><a href=".html"><img src="image/navi_globa4.jpg" alt=" /></a><a href=".html"><img src="image/navi_global05.jpg" alt="" /></a> </div><!-- /header_bottom --> </div><!-- /header --> <div id="inner"> <div id="largeWrap"> <div id="mainWrap"> </div><!-- /mainWrap --> <div class="sideAlphaWrap"> <div id="form_nv"> <img src="image/form-n.jpg" alt="" /><a href=""><img src="image/form-gen.jpg" alt="" /></a> </div> <div id="form"> </form> </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> <br /> <div id="form_nv"> <div id="form"> ああああ </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> </div><!-- /sideAlphaWrap --> <div class="clear"><hr /></div> </div><!-- /largeWrap --> <div class="sideBetaWrap"> 右サイドバー </div><!-- /sideBetaWrap --> <div class="clear"><hr /></div> </div><!-- /inner --> <div class="footer"> <p>ヘッダー<br /> Copyright © 2004-2010 abc co.,Ltd., All rights reserved.</p> </div><!-- /footer --> </div><!-- /wrap -->
- ベストアンサー
- HTML
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- IE6にてずれる
こんにちは html超初心者です。 headとcontentsを隙間なく表示したいのですが、IEではコンテンツがずれてしまい うまく表示されません。 コードを記載します。 ================================== --------html------------ <div id="all"> <div id="head"> <h1><a href="../index.html"><img src="img/logo.gif"></a></h1> <div id="guide"> <a href="../index.html">ホーム</a> <a href="index.html">プロフィール</a> <a href="#">リンク</a></div> <p class="clear-both"> </p> </div> <div id="contents"> コンテンツ内容 </div> </div> --------css------------ body,a,div,p,h1,h2,h3,ul,li,img,dl,dd,dt,ol{ margin:0; padding:0; text-decoration: none; } #all{ width:650px; } .clear-both{ font-size:0; height:0px; clear:both; line-height:0%; } #head{ width:650px; background:url('../img/main_img.gif') no-repeat; height:90px; } #guide{ float:right; margin:60px 0px 0px 0px; } #contents{ background:url('../../common/img/back_img.gif') repeat-y ; } ================================== headにてボックスを二つ挿入し、それらをそれぞれfloat：left・rightで左右に表示しています。 その下に<p class="clear-both"> </p> を挿入し、cssにてそのクラスに対し、 clear:both; line-height:0%; 等を入力しています。 IEにて確認すると、その下のコンテンツが 右にずれてしまっています。 line-height:0%;がcssに記載されていなければ ずれずに表示されますが、headとcontentsの間に 隙間ができてしまいます。 line-height:0%を記載していてもfirefox・operaではcontentsはずれず、隙間もありません。 どなたか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 自己解決しました。 headerを２分割していて左右にまたがる背景を設置したかったのですが 左にしか表示されず仕方なく右と繋がるよう左右に背景を設置しました。 しかし、これだとIEでは１ｐｘほど隙間ができてしまいました。 左右のheaderをwrapしwrapに左右にまたがる背景を設置することで解決しました。 質問に詳細な目的が書かれていなく、前提も不足していたことをお詫びします。 失礼ながら回答順にポイントを付けさせていただきます。