CSSでIE6だけ出る隙間をなくしたい
- CSSとtableを組み合わせてレイアウトをしていますが、IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。この隙間をなくす方法はないでしょうか。
- WindowsのIE7やSafari、Netscapeでは正常に表示されるが、IE6ではメインメニューの行と赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。
- CSSの設定を見直してください。HTMLにおいて、<div>と<div>の間の隙間をなくすことができます。
- ベストアンサー
CSSでIE6だけ出る隙間をなくしたい
お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。
- kirishimaakira
- お礼率81% (13/16)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは <style type="text/css"><!-- body { background-image: url(img/bodybg.gif); margin: 0; padding: 0; } #wrapper { background-color: #FFFFFF; width: 780px; margin: auto; text-align: left; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; margin-left: 14px; margin-top:1px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height: 20px; padding-top: 8px; text-align: center; font-size: 12px; color: #FFFFFF; float:left; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height: 16px; padding-top: 12px; text-align: center; font-size: 12px; color: #000000; float:left; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; padding: 4px; text-align: right; font-size: 11px; color: #FFFFFF; } --></style> <body> <div id="wrapper"> <div id="mainmenu"> <div id="menublock_over">HOME</div> <div id="menublock">メニュー</div> <div id="menublock">メニュー</div> <div id="menublock">メニュー</div> <div id="menublock">メニュー</div> <div id="menublock">メニュー</div> </div> <div style="clear:both;"></div> <div id="headermenu">ヘッダーメニュー</div> <div id="pankuzu">■ホーム＞</div> <div id="footer"></div> </div> とか？ ・・・僕好みのやり方なので好き嫌いがあると思うので質問ので直すとしたら #mainmenu { height:28px; } #mainblock,#mainblock_overでheightが2つあるのでheight:29px;を削除(後の方が適用されるので無視されている) td height="30"を削除（中身があれば自動で高さ取得してくれますので、つけるとしたらheight="28"） え～と理由としましては #mainmenu height:29px; padding-top:1px; で高さ29px（paddingはtable上部の余白を作ってるので関係ない) #mainblock height:16px; padding-top:12px; で高さ28px #mainblock_over height:20px; padding-top:8px; で高さ28px <td height="30"> で高さ30px(?) となって1px～2pxほど高さが異なってる為に出来てるのかな？と思います
関連するQ&A
- ieでの微妙な隙間(CSS)
以下のソースでhtmlを表示するとie6でpage_topとfooterの間に 3～5pxほどの隙間が開いてしまいます。 しかしfirefoxで表示すると隙間なく表示されます。 特にmarginなど指定していないので何が原因なのかが全くわかりません。 どのようにしたらie6でも隙間なく表示できるようになるでしょうか？ 以下ソースの抜粋です。宜しくお願いします。 //CSS #page_top { clear: both; width: 900px; height: 24px; margin: 0 auto; padding: 0; background: #fff; text-align: right; } #footer { width: 900px; margin: 0 auto; padding: 10px 0 5px 0; background: #fff url(img/footer_bg.gif) repeat-x; text-align: center; } //html <div id="page_top"> <a href="#top"> <img src="img/btn.gif" alt="ボタン" width="114" height="24" /> </a> </div> <div id="footer"> あいうえおかきくけこさしすせそ・・・ </div>
- 締切済み
- HTML
- XHTML、CSSレイアウトでフッターを常に最下部に配置するには?
フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }
- 締切済み
- ホームページ作成ソフト
- CSSについて教えて下さい
ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側（上下位置は中間）に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>
- ベストアンサー
- その他([技術者向] コンピューター)
- 外部CSSファイルからのリンク色指定
外部CSSファイルでヘッダー・フッター・左・右と４種類の枠をそれぞれ違ったリンク色に設定したいのですが、下記の記述で個々にリンク色を設定することはできますか？ できるのであればどのように記載すればいいですか？ body{ text-align:center; background-image: url("image/back.gif"); margin: 0 auto; } #container{ width:800px; margin:0px; text-align:left; } .header{ height: 120px; background-image: url("access/top.gif"); background-repeat: no-repeat; background-position: bottom; margin: 0px; } .main{ width:600px; height:100%; float:right; background-color: #FFFF99; padding: 10px; margin: 0px; } .side{ width:200px; float:left; background-color: #0000FF; padding: 10px; margin: 0px; text-decoration:none; color:#FFFFFF; } .footer{ font-size: 10px; } .clear{ clear:both; line-height:0; height:0; }
- ベストアンサー
- CSS
- CSSのpositonでフッタを下部に固定したのですがIE6でズレてしまう原因が分からないので教えてください
こんばんは、CSSのpositionで下部にフッタを固定する為に設定したらwinIE６で見るとフッタだけ右にずれてしまいます。 当方Mac、osXで主にドリームウィーバーに手打ちです。safari、frefoxではずれませんでした。ソースを省略すると原因が分からないのでCSSを全部載せます。 アドバイスいただけると大変うれしいです。お願いいたします。 html,body{ text-align:center; margin: 0px; background:#FFFFFF; height:100%; } #countainer{ position: relative; height: 100%; min-height:100%; } #contents { padding-bottom:50px; } #header{ height:106px; background-image: url(img/headbg.gif); background-repeat: repeat-x; } #logo { width: 800px; height: 96px; text-align: left; padding: 10px 0 0 0; margin: auto; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 100% 100%; } #logo img{ float: left; } #navi{ width: 600px; float: right; } #navi ul{ margin:75px 11px 0 0; padding:0; } #navi li{ width: 100px; height: 21px; float: right; margin:0; padding:0; list-style-type:none; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 100%; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 0% 100%; } #navi a:link,#navi a:visited{ color:#635142; padding: 0 0 0 12px; } #navi a:hover{ color:#FF6633; text-decoration:none; } #navi a.s:link,#navi a.s:visited{ color:#B59980; } #main{ width: 800px; margin: auto; text-align:left; font-size:80%; } #main .topimg{ width:500px; float:left; text-align: center; } #main .news{ width:300px; height:300px; float:right; background:url(images/bg_news.gif) no-repeat 0px 20px; } #main .news p{ margin:50px 40px 0px; color: #5D4F41; line-height: 150%; font-size: 12px; } #main .body{ width:550px; float:left; clear:both; } #main .body p{ margin:10px 5px; } #main .menu{ width:183px; float:left; font-size:12px; } #main .tabmenu{ width:250px; float:right; } #main h1 span.jp{ font-size: 12px; letter-spacing: normal; font-family:"ＭＳ Ｐゴシック","Osaka","ヒラギノ角ゴPro"; } #main h2{ margin: 30px 0 5px 0; padding:3px; border-bottom: 4px double #83684F; font-size:180%; color: #333333; clear: both; } #main h3{ margin: 30px 0 5px 0; padding:3px; background-color: #83684F; font-size:120%; color: #FFFFFF; clear: both; } #main th{ padding: 3px 5px; background-color: #F3EBDC; border-bottom:1px solid #83684F; text-align:left; font-weight: normal; color:#A07D5E; } #main a.mail{ padding:5px 0 5px 30px; background:url(images/btn_mail.gif) no-repeat 0px 0px; color: #FF0000; } #main a.mail:hover{ background:url(images/btn_ov_mail.gif) no-repeat 0px 0px; } #main .box{ width:183px; float:left; } #main .box img{ margin:0 8px; filter:chroma(color=#FFFFFF); } #main .box h3{ margin: 0 10px; padding: 3px; font-size:100%; color:#A07D5E; position: relative; top: -10px; background-color: #F3EBDC; } #main .box p{ margin: 0 10px; padding: 0; font-size:10px; top: -5px; position: relative; } #footer{ clear:both; color:#666; font-family: Arial, Helvetica, sans-serif; border-top-width: 3px; border-top-style: solid; border-top-color: #D8D8D8; position: absolute; bottom: 0px; margin:auto; text-align: center; font-size: 75%; height: 30px; width: 100%; } #main .body #mn6 { margin-top: 20px; } /*----------------------------span-*/ span.tel{ font-size:24px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#424242; line-height: 24px; } /*-------------------------------------for any--*/ .clear{ clear:both; line-height:1px; } #main .body p { margin-left: 15px; } #main .topimg { margin-top: 20px; }
- ベストアンサー
- Mac
- CSSでレイアウトが崩れます
CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }
- 締切済み
- 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
- サイドメニューとメインの左右入れ替え（ＣＳＳファイル）
あるテンプレートを利用しようと思っていますが、左メニューの配置を右メニューの配置にしたいと思っています。 メニューボックスとメインボックスの入れ替えは出来たのですが、フレームの入れ替えが出来ません。 以下のスタイルシートですが、どのようにすればよろしいのでしょうか。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /*ページ全体の指定*/ *{ margin:0; padding:0; font:100% "ＭＳ ゴシック","Osaka",sans-serif; } body{ background:url("img/bg.gif") repeat-y center; color:#333333; font-size:84%; } /*ページの輪郭*/ #flame{ width: 780px; margin:0 auto; } /*ヘッダ*/ #head{ background:url("img/headbg.gif") top repeat-x; } /*サイト名前：ロゴを入れたりしてください*/ #logo{ font-size:30px; padding:20px; font-family:Arial Black; } /*ヘッダメニュー*/ #headmenu{ width:780px; background:#133D76 url("img/headbg.gif") bottom repeat-x; color:#ffffff; padding-bottom:7px; margin-bottom:5x; } #headmenu ul{ width:780px; list-style:none; } #headmenu li{ width:100px; float:left; background:url("img/headmenubg.gif") no-repeat right; text-align:center; padding:5px; } #headmenu li a{ text-decoration:none; color:#ffffff; } #headmenu li a:hover{ } /*サイドとメインのブロックを囲む*/ #center{ width:780px; background:url("img/centerbg.gif") repeat-y; } /*サイドのブロック*/ #box_side{ width: 200px; float: right; } .menu{ width:178px; margin:20px 10px 0px 10px; } h3{ height:20px; font-weight:bold; background:url("img/menut.gif"); color:#ffffff; padding:6px 0 0 20px; } #box_side ul{ background:#ffffff; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding-top:3px; padding-bottom:3px; list-style:none; } #box_side li{ background:url("img/listbg.gif") no-repeat 0 50%; padding:0 0 0 15px; margin:3px 0 3px 15px; } #box_side li a{ text-decoration:none; color:#092853; } #box_side li a:hover{ color:#E72137; } /*メインのブロック*/ #box_main{ width: 580px; float: left; } /*右のタイトル部分*/ h1,h2{ font-size:120%; font-weight:bold; background:#ffffff url("img/maintbg.gif") repeat-x bottom; padding:10px; } /*メインの記事の部分*/ .main{ background:#F7F5F5; border:1px solid #cccccc; margin:20px; } /*本文をくる*/ p{ margin:10px; line-height:150%; } /*引用文*/ blockquote{ line-height:150%; border:1px solid #cccccc; background:#eeeeee; margin:10px; padding:5px; } /*著作権表示の部分つまりフッタ*/ #foot{ border-top:1px solid #666666; padding:10px; } #foot a{ color:#333333; text-decoration:none; } #foot a:hover{ text-decoration:underline; } .both{ clear:both; }
- ベストアンサー
- HTML
- CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。
- 締切済み
- HTML
- 隙間ができてしまいます。
高さ7pxのボックスを作ったのに7px以上の大きさで表示され隙間ができてしまいます。 margin: 0px; padding: 0pxを追加しても解決しませんでした。 http://teatsite.ninja-x.jp/ ↑のborderで囲んである部分です。 この隙間の部分を埋めるにはどうすればよいのかご指摘お願いいたします。 以下ソース 【html】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div class="all"> <div class="header"> </div> <div class="menu"> <div class="font-menu"> <div class="menu-top"></div> <div class="menu-center">テスト</div> <div class="menu-bottom"></div> </div> </div> <div class="main"> <div class="font-main"> <div class="main-top"> テスト </div> <div class="main-center"> 本文テスト </div> <div class="main-bottom"></div> </div> </div> <div class="footer"> <div class="font-footer"> テスト </div> </div> </div> </body> </html> 【css】 body{ margin: 0px; padding: 0px; } img{ border: 0; vertical-align: top; } .all{ margin: 0px auto 0px auto; width: 720px; } .font-menu{ color: #ffffff; font-size: 12px; line-height: 150%; } .font-menu a:link{ color: #ffffff; text-decoration: none; } .font-menu a:visited{ color: #ffffff; text-decoration: none; } .font-menu a:hover{ color: #ffffff; text-decoration: underline; } .font-main{ font-size: 12px; line-height: 150%; } .font-footer{ font-size: 12px; } .header{ padding: 44px 0px 0px 0px; height: 56px; } .menu{ margin: 0px 20px 0px 0px; width: 160px; float: left; } .menu-top{/* 問題の部分 */ margin: 0px; padding: 0px; width: 158px; height: 0px; border: solid 1px #000000; background-image: url(pic_menu_top.png); background-repeat: no-repeat; } .menu-center{ width: 124px; height: 22px; padding: 4px 0px 0px 36px; background-image: url(pic_menu_center.png); background-repeat: no-repeat; } .menu-bottom{/* 問題の部分 */ margin: 0px; padding: 0px; width: 158px; padding: 0px; height: 5px; border: solid 1px #000000; background-image: url(pic_menu_bottom.png); background-repeat: no-repeat; } .main{ margin: 0px 0px 0px 20px; width: 520px; float: left; background-image: url(pic_main_wp.png); } .main-top{ margin: 0px; padding: 11px 0px 0px 40px; width: 480px; height: 29px; color: #ffffff; font-size: 16px; background-image: url(pic_main_top.png); background-repeat: no-repeat; } .main-center{ padding: 40px 40px 40px 40px; width: 440px; float: left; } .main-bottom{/* 問題の部分 */ margin: 0px; padding: 0px; width: 518px; height: 5px; border: solid 1px #000000; background-image: url(pic_main_bottom.png); background-repeat: no-repeat; } .footer{ padding: 14px 0px 0px 200px; width: 520px; height: 26px; text-align: center; clear: left; }
- ベストアンサー
- レンタルサーバ・ASP
お礼
ありがとうございます！ 後半の高さをそろえる方法で無事に解決できました！ 私のCSSの記述もあちこち無駄が多かったようで勉強になりました。 親切な回答で大変分かりやすかったです。 どうもありがとうございました！