IE以外のブラウザーでホームページ作成時のheader menu画像の表示に問題が発生

2023/08/16 03:55

このQ&Aのポイント

ホームページ作成時に、IE以外のブラウザーでheader menuの画像表示が正しく表示されない問題が発生しています。
ソースコードとCSSを確認した結果、FirefoxやSafariなどのブラウザーではmenuが縦に並んでしまうことが分かりました。
修正方法についてのご指導をお願いします。

ベストアンサー

IE以外のブラウザーで

2012/03/29 11:34

はじめまして。ホームページの作成をDW5.5で行っています。以下のソース、cssにてアップしたところ、header menuの部分の画像が IEだとちゃんと横並びに表示されるのですが、Firefox、Safariなどでは menuが縦に並んでしまいます。どのように修正すればいいのか、ご指導いただけませんでしょうか？＜＜ソース部＞＞ <body> <div id="header"></div> <div id="head_navi"> <ul> <li id="head_bu1"><a href="../index.html"></a></li> <li id="head_bu2"><a href="../about.html"></a></li> <li id="head_bu3"><a href="#"></a></li> <li id="head_bu4"><a href="#"></a></li> <li id="head_bu5"><a href="#"></a></li> <li id="head_bu6"><a href="../policy.html"></a></li> <li id="head_bu7"><a href="#"></a></li> <li id="head_bu8"><a href="#"></a></li> </ul></div> </body> ＜＜css部＞＞ *{ margin:0px; padding:0px; } img{ border:none; } li{ list-style-type:none; } body{ font-size:12px; line-height:1.4em; font-family:"ＭＳＰゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #333333; margin:0px auto; } /* FireFox リンク選択時の点線を消す */ a{ overflow:hidden; outline:none; } /* FireFox flashの境界の点線を消す */ object{ outline:none; } /* ■ヘッダー */ #header{ width:1000px; height:320px; background-color: #000000; } #head_navi{ width:1000px; height: 40px; background-color: #666; } #head_navi ul{ overflow:hidden; float:left; padding-left: 21px; } #head_bu1 a{ display:block; width:112px; height:38px; float: left; background:url(../img/header_1_off.png) no-repeat left top; } #head_bu1 a:hover{ background:url(../img/header_1_on.png) no-repeat left top; } #head_bu2 a{ display:block; width:113px; height:38px; float: left; background:url(../img/header_2_off.png) no-repeat left top; } #head_bu2 a:hover{ background:url(../img/header_2_on.png) no-repeat left top; } #head_bu3 a{ display:block; width:117px; height:38px; float: left; background:url(../img/header_3_off.png) no-repeat left top; } #head_bu3 a:hover{ background:url(../img/header_3_on.png) no-repeat left top; } #head_bu4 a{ display:block; width:122px; height:38px; float: left; background:url(../img/header_4_off.png) no-repeat left top; } #head_bu4 a:hover{ background:url(../img/header_4_on.png) no-repeat left top; } #head_bu5 a{ display:block; width:101px; height:38px; float: left; background:url(../img/header_5_off.png) no-repeat left top; } #head_bu5 a:hover{ background:url(../img/header_5_on.png) no-repeat left top; } #head_bu6 a{ display:block; width:126px; height:38px; float: left; background:url(../img/header_6_off.png) no-repeat left top; } #head_bu6 a:hover{ background:url(../img/header_6_on.png) no-repeat left top; } #head_bu7 a{ display:block; width:134px; height:38px; float: left; background:url(../img/header_7_off.png) no-repeat left top; } #head_bu7 a:hover{ background:url(../img/header_7_on.png) no-repeat left top; } #head_bu8 a{ display:block; width:133px; height:38px; background:url(../img/header_8_off.png) no-repeat left top; } #head_bu8 a:hover{ background:url(../img/header_8_on.png) no-repeat left top; }

BULL2656
お礼率0% (0/4)

ホームページ作成ソフト
回答数1
ありがとう数1

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

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

ベストアンサー

outbrave
ベストアンサー率60% (231/380)

2012/03/29 17:00 回答No.1

li{ に float: left; を追加。 a{ には float: left; は必要ないと思います。

関連するQ&A

cssのfloatで右にメニューを出す方法を勉強し
cssのfloatで右にメニューを出す方法を勉強しています。ヘッダの左にロゴ（クリックをするとTOPへ飛ぶ）右にメニューを横並びで表示したいです。＿＿＿＿＿＿＿＿＿ ■　　　■■■■ ロゴ　　メニュー＿＿＿＿＿＿＿＿＿のようにしたいのです。例えばロゴもメニューもそれぞれwidth100px heith50pxのサイズとし、メニューにもそれぞれ違う画像を入れ、マウスオーバーで違う画像に変わるようにし、marginを10pxあけるとすると ☆★☆★css☆★☆★ /* abc */ #header ul.abc{ float:right; margin: 0 ; padding: 0 ; width: 400px; } #header ul.abc li { float:left; display: inline; } /* 01 */ #header ul.abc li.01 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.01 a { display: block; background: url(../img/01.jpg) no-repeat top left; } #header ul.abc li.01 a:hover { display: block; background: url(../img/01_om.jpg) no-repeat top left; /* 02 */ #header ul.abc li.02 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.02 a { display: block; background: url(../img/02.jpg) no-repeat top left; } #header ul.abc li.02 a:hover { display: block; background: url(../img/02_om.jpg) no-repeat top left; /* 03 */ #header ul.abc li.03 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.03 a { display: block; background: url(../img/03.jpg) no-repeat top left; } #header ul.abc li.03 a:hover { display: block; background: url(../img/03_om.jpg) no-repeat top left; /* 04 */ #header ul.abc li.04 { width:100px; height:50px; margin:0 0 0 0; } #header ul.abc li.04 a { display: block; background: url(../img/04.jpg) no-repeat top left; } #header ul.abc li.04 a:hover { display: block; background: url(../img/04_om.jpg) no-repeat top left; ☆★☆★html☆★☆★ <div id="header"> <div class="logo"><a href="">ロゴ</a></div> <ul class="menu"> <li class="01"><a href=""01</a></li> <li class="02"><a href="">02</a></li> <li class="03"><a href="">03</a></li> <li class="04"><a href="">04</a></li> </ul> <div class="clear"></div> </div> これは例なんですが、この記述できると思ったのですが、うまくいかず困っています。何か足りないのでしょうか？それともcssで何か勘違いをしているのでしょうか？お手数をおかけしますが、ご教授お願いします。
- ベストアンサー
- CSS
CSSについて
/** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、ホームページを作成しました。すべて人から教えてもらったものなので、CSSは初心者です・・・。そこで思ったのですが、 TOP・掲示板・メール等・・・のメニューを、左寄りにすることはできないのでしょうか？よろしくお願いします。
- ベストアンサー
- CSS
横並びのメニュータブについて
横並びタブナビゲーションのテキストを画像の後ろに含める方法で試行錯誤しております。下記のCSS記述ではie8及びFirefoxはテキストが隠れ動作確認も問題ないのですが、ie6dではテキストが隠れず画像の下に表示されてしまいます。どこを訂正または記述追加すればよいか困っております。ぜひ、ご教授いただければ幸いです。 CSS /* ---------------- .navi .naviin ---------------- */ .navi { background:#063686 url("/test/menu_bg.png") repeat-x top; border-bottom:1px solid #8fa5ca; } .navi .naviin{ width:990px; clear: both; margin: 0 auto; } .navi .naviin ul.tab{ height:30px; } .navi .naviin ul.tab li{ float:left; } .navi .naviin ul.tab li a.tab_01{ width:163px; height:0; overflow:hidden; display:block; padding-top:30px; margin-right:2px; background:url(/test/navi01_n.png) no-repeat left top; } .navi .naviin ul.tab li a.tab_02{ width:163px; height:0; overflow:hidden; display:block; padding-top:30px; margin-right:2px; background:url(/test/navi01_n.png) no-repeat left top; } .navi .naviin ul.tab li a.tab_03{ width:163px; height:0; overflow:hidden; display:block; padding-top:30px; margin-right:2px; background:url(/test/navi01_n.png) no-repeat left top; } .navi .naviin ul.tab li a.tab_04{ width:163px; height:0; overflow:hidden; display:block; padding-top:30px; margin-right:2px; background:url(/test/navi01_n.png) no-repeat left top; } .navi .naviin ul.tab li a.tab_05{ width:163px; height:0; overflow:hidden; display:block; padding-top:30px; margin-right:2px; background:url(/test/navi01_n.png) no-repeat left top; } .navi .naviin ul.tab li a.tab_06{ width:165px; height:0; overflow:hidden; display:block; padding-top:30px; background:url(/test/navi06_n.png) no-repeat left top; } /* ---------------- a.の設定 ---------------- */ .navi .naviin ul.tab li.on a.tab_01{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li.on a.tab_02{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li.on a.tab_03{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li.on a.tab_04{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li.on a.tab_05{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li.on a.tab_06{ background:url(/test/navi06_o.png) no-repeat left top; } /* ---------------- hoverの設定 ---------------- */ .navi .naviin ul.tab li a:hover.tab_01{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li a:hover.tab_02{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li a:hover.tab_03{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li a:hover.tab_04{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li a:hover.tab_05{ background:url(/test/navi01_o.png) no-repeat left top; } .navi .naviin ul.tab li a:hover.tab_06{ background:url(/test/navi06_o.png) no-repeat left top; } /* ---------------- submenu ---------------- */ .navi .naviin ul.submenu{ padding:6px 0 6px 0; } .navi .naviin ul.submenu li{ float:left; padding:0 7px 0 10px; background:url(/test/sub_line.png) no-repeat left center; white-space:nowrap; } .navi .naviin ul.submenu li a{ padding:0 0 0 12px; color:#ffffff; background:url(/test/triangle.png) no-repeat left center; } .navi .naviin ul.submenu li.firstList{ background:none; padding:0 7px 0 5px; } HTML <div> <div class="navi"> <div class="naviin"> <ul class="tab"> <li class="on"><a class="tab_01" href="">タブ01</a></li> <li><a class="tab_02" href="">タブ02</a></li> <li><a class="tab_03" href="">タブ03</a></li> <li><a class="tab_04" href="">タブ04</a></li> <li><a class="tab_05" href="">タブ05</a></li> <li><a class="tab_05" href="">タブ06</a></li> </ul> <ul class="submenu clearfix"> <li class="firstList"><a href="">サブ01</a></li> <li><a href="">サブ02</a></li> <li><a href="">サブ03</a></li> <li><a href="">サブ04</a></li> <li><a href="">サブ05</a></li> </ul> </div> </div> </div>
- 締切済み
- HTML
リストタグを用いた縦メニューで画像に隙間ができます（IE6）
いつも皆さまには助けていただきありがとうございます。さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい）こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？色々調べてみましたが、これ以上どういじって良いのかよく分かりません。一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。よろしくお願いします。【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container">  <div id="header"> <div id="headerImg" title="タイトル"> </div> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div> </div> <div id="contents">  <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div> </div>  <div id="main"> </div>  <div id="footer"> </div> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }
- ベストアンサー
- HTML
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で見るとメニューバーが崩れてしまいます
ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }
- ベストアンサー
- ネットトラブル
CSSについての質問
/** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、下のようなホームページを作成しました。 http://www.nin-site.net/ すべて人から教えてもらったものなので、CSSは初心者です・・・。そこで思ったのですが、 TOP・掲示板・メール等・・・のメニューを、左寄りにすることはできないのでしょうか？下は、イメージ図です。（編集しました。） http://www.nin-site.net/image_style.jpg よろしくお願いします。すべての内容が見たい場合は、 HTMLソース：http://www.nin-site.net/index.txt CSS：http://www.nin-site.net/css/style.css です。
- ベストアンサー
- CSS
IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・
XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE６だけ一部右寄りになってしまいます。一部というのは、上から「head」「nav」「main」「wrap」としているのですが「nav」と「wrap」部分だけが微妙に右寄り、もしくはその他が微妙に左より？になってしまいます。センター寄せには基本的に「0px auto」を使用しているので、色々調べたところ、それが原因？と思い、「textalign center」にしてもなぜか少しずれてしまいます。ためしに、headとnavだけのスリムな状態にしても同じでした。。。解決方法に心当たりのある方はお願いします。【CSS】 @charset "shift_jis"; * { line-height: 150%; font-size: 12px; letter-spacing: 1px; } body{ margin:0px; padding:0px; text-align:center; background-repeat: no-repeat; } img { border: none; vertical-align: bottom; } h1 { font-weight: normal; margin: 15px 0 0 50px; } #head{ width:900px; height:69px; background-image: url(img/bg-head.jpg); margin: 0px auto; text-align: left; } #nav { width: 100%; background-image: url(img/bg-nav.jpg); } #nav ul { margin: 0px auto; width: 900px; padding: 0px; list-style: none; height: 31px; } #nav li { float: left; } #main { width: 100%; height: 284px; text-align: center; background-image: url(img/bg-main.jpg); } #wrap{ width:880px; margin:0px auto; text-align:left; padding: 0 10px 0 30px; background-image: url(img/bg-wrap.jpg); background-repeat: repeat-y; } #left{ width:645px; float:left; } #right{ width:220px; float:right; text-align: right; padding: 0px; height: 1200px; background-image: url(img/bg-right.gif); } #foot{ position:relative; width:100%; height:35px; clear:both; background-image: url(img/bg-foot.gif); margin: 0 0 50px 0; } 【html】 <body>  <div id="head"> <h1>\\\\\\\\\\\\\\\\\\</h1> </div>  <div id="nav"> <ul> <li><img src="img/nav_01.jpg" /></li> <li><img src="img/nav_02.jpg" /></li> <li><img src="img/nav_03.jpg" /></li> <li><img src="img/nav_04.jpg" /></li> <li><img src="img/nav_05.jpg" /></li> <li><img src="img/nav_06.jpg" /></li> <li><img src="img/nav_07.jpg" /></li> </ul> </div>  <div id="main"><img src="img/main.jpg" /></div> <div id="wrap">  <div id="left"> </div>  <div id="right"> </div> <br style="clear:both" /> </div>  <div id="foot"> </div> </body>
- ベストアンサー
- HTML
リストタグでのナビゲーションボタンで、背景画像が表示されません。
winIE6では正常に表示されるのですが、 safariだとまったくcssが無視され、横並びにもならない始末です(^_^;) どなたかご教授お願いいたします。 ■html <div id="header"> <ul id="headerMenu"> <li id="home"><a href="index.html">ホーム</a></li> <li id="sitemap"><a href="sitemap.html">サイトマップ</a></li> <li id="recruit"><a href="recruit.html">リクルート</a></li> <li id="contact"><a href="contact.html">お問合せ</a></li> </ul> </div> ■css #header { width:100%; height:107px; margin:0px; padding:0px; position: relative; font-size:12px; background:url("img/top.gif") no-repeat; } #headerMenu{ 　　list-style-type:none;　　 padding:0px; margin:6px 0px 0px 532px; } #headerMenu li { 　　display:inline; padding:0; 　　margin:0px; 　　float:left;　　 } #headerMenu a { 　　display:block;　　　　text-decoration:none; 　　text-indent:-5000px;　　　　height:25px; } #home { 　　display:block;　　　　background-image: url("img/topmenu_01.gif");　　　　background-repeat: no-repeat;　　　　width:63px;　　　　background-position:0px 0px;　　 } #home a:hover {　　　　background-image: url("img/topmenu_01.gif");　　　　background-repeat: no-repeat;　　　　background-position:0px -25px;　 } #sitemap { 　　background-image: url("img/topmenu_02.gif");　　　　background-repeat: no-repeat;　　　　width:90px;　　　　background-position:0px 0px;　　 } #sitemap a:hover {　　　　background-image: url("img/topmenu_02.gif");　　　　background-repeat: no-repeat;　　　　background-position:0px -25px;　　 } #recruit { 　　background-image: url("img/topmenu_04.gif");　　　　background-repeat: no-repeat;　　　　width:82px;　　　　background-position:0px 0px;　　 } #recruit a:hover {　　　　background-image: url("img/topmenu_04.gif");　　　　background-repeat: no-repeat;　　　　background-position:0px -25px;　　 } #contact { 　　background-image: url("img/topmenu_05.gif");　　　　background-repeat: no-repeat;　　　　width:82px;　　　　background-position:0px 0px;　　 } #contact a:hover {　　　background-image: url("img/topmenu_05.gif");　　　background-repeat: no-repeat;　　　　background-position:0px -25px;　　 }
- 締切済み
- CSS
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> <div id="pro_back"> <p>○○○○○</p> </div> </div> </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