- 締切済み
CSSでアイコンを付けるとWin IE6でのみおかしくなってしまいます
goldfoxの回答
- goldfox
- ベストアンサー率49% (123/249)
winXPIE6使用しています。 float: left;をつけてもお望みの状態にはなりませんでした(汗 IEのバグと考えても、画像にしてしまうのが一番手っ取り早いと思います。 ＞そうですか…。他のサイトで同じ事をやっているページを見つけましたがこちらでも問題なく見えますでしょうか？ ＞(こちらはWin IE5で見ても表示がおかしい分、完成度が低いですが…) ＞http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/ すみません、NN7で見ても、私にも問題箇所が見つけられません(汗
関連するQ&A
- css
上下２つの画像で角丸にcssでしようと思います。上はこれでいいんですが 下の表示はどうするんでしょうか。 <div id="sub"> <h1>メニュー</h1> <ul> <li><a href="1.html" >123</a></li> <li><a href="2.html" >123</a></li> <li><a href="3.html" >123</a></li> </ul> </div> #sub { float:right; margin-top:5px; width:180px; padding:5px 5px 2px 5px; background-image: url(ue.gif); background-repeat:no-repeat; } #sub h1 { background: url(images/a.gif); color:#333333; font-size:11px; font-weight: normal; padding:5px 20px ; } #sub ul{ padding:0; list-style:none; background-color:#FFFFFF; } #sub li{ margin:0 0 0 0px; border-bottom:1px solid #0000ff; } #sub li a { display:block; padding-left:20px; background:url(images/1.gif) 2% 50% no-repeat; line-height:35px; } わかりましたらよろしくお願いします。
- ベストアンサー
- CSS
- CSSのボタン作成の崩れ
winでDreamweaver8で作成しています。 ロールオーバーボタンを作成したのはいいのですが、、、 一番左のボタンをクリックすると一番右のアクティブな状態のボタンが出現してしまいます。 フロートと左にしてます。 何度やり直しても解決できません（＞＜） 宜しくお願い致しますm(_ _)m cssコードは body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; background: #FFFFFF; text-align: center; margin: 0px; padding: 0px; }#wrapper { margin: 0px auto; padding: 0px; height: auto; width: 860px; border-right: 1px solid #F69789; border-bottom: 1px solid #F69789; border-left: 1px solid #F69789; text-align: left; } /*ヘッダ全体コンテナ*/ #header { background: url(images/backheader.gif) no-repeat left top; margin: 0px; padding: 0px; height: 95px; border-bottom: 5px inset #F69789; position: relative; } #header h1 { margin: 0px; padding: 0px; float: left; } /*ヘッダ内タイトルロゴ*/ #header img { margin: 0px; padding: 26px 0px 6px 10px; height: 63px; width: 130px; } /*ヘッダ内ナビ*/ #header ul { font-size: 11px; font-weight: bold; margin: 80px 0px 0px; padding: 0px; color: #666666; float: right; list-style: none; } #header li { display: inline; margin: 0px; padding: 0px 10px 0px 15px; background: url(images/tpo_button.gif) no-repeat left center; } #header li a { text-decoration: none; color: #666666; } #header li a:hover,#header li a:active { color: #990033; text-decoration: underline; } #header #midashi { position: absolute; height: 40px; width: 400px; left: 230px; top: 35px; background: url(images/midashi1.gif) no-repeat; font-size: 9px; } /*メイン*/ #main { margin: 0px; padding: 0px; height: 180px; border-bottom: 1px solid #660000; } #topnavi { margin: 0px; padding: 0px; height: 30px; border-bottom: 1px solid #990033; background: #666666; } #topnavi h2 { margin: 0px; padding: 0px; font-size: 9px; float: left; } #topnavi h2 a { text-decoration: none; display: block; margin: 0px; padding: 0px; height: 30px; } /*1番目のボタン*/ #topnavi h2#tn1 a { background: url(images/butoon1/tb1.gif) no-repeat; width: 130px; } #topnavi h2#tn1 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb1_2.gif) no-repeat; } /*2番目のボタン*/ #topnavi h2#tn2 a { background: url(images/butoon1/tb2.gif) no-repeat; width: 130px; } #topnavi h2#tn2 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb2_2.gif) no-repeat; } /*3番目のボタン*/ #topnavi h2#tn3 a { background: url(images/butoon1/tb3.gif) no-repeat; width: 130px; } #topnavi h2#tn3 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb3_2.gif) no-repeat; } /*4番目のボタン*/ #topnavi h2#tn4 a { background: url(images/butoon1/tb4.gif) no-repeat; width: 130px; } #topnavi h2#tn4 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb4_2.gif) no-repeat; } /*5番目のボタン*/ #topnavi h2#tn5 a { background: url(images/butoon1/tb5.gif) no-repeat; width: 130px; } #topnavi h2#tn5 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb5_2.gif) no-repeat; } /*6番目のボタン*/ #topnavi h2#tn6 a { background: url(images/butoon1/tb6.gif) no-repeat; width: 210px; } #topnavi h2#tn6 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb6_2.gif) no-repeat; } になります。
- ベストアンサー
- 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を使って、 下のようなホームページを作成しました。 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
- 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のおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 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
- IE6とXHTML+CSS
外部スタイルシート＋XHTMLでサイトを作成したのですがその際メニュー項目のロールオーバーのオーバー時がIE7だと正常に見えるのですがIE6だとオーバー時の画像が消えてしまいます。その部分の外部スタイルシートとXHTMLをそれぞれ記述するので詳しい方アドバイスお願いします！ちなみにメニューボタンの高さは一緒で幅はそれぞれ違います。 <XHTML> <div id="sabNavi"> <ul> <li class="smenu01"><a href="#">サイトマップ</a></li> <li class="smenu02"><a href="#">プライバシーポリシー</a></li> <li class="smenu03"><a href="#">お問合せ</a></li> </ul> </div> <外部スタイルシート> #sabNavi{ width:300px; } #sabNavi a{ height:20px; display:block; text-indent:-9999px; } #sabNavi a:hover{ background-position:0 -20px; } .smenu01 a{ background:url(images/btn_sitemap.gif) no-repeat 0 0; width:71px; } .smenu02 a{ background:url(images/btn_privacy.gif) no-repeat 0 0; width:108px; } .smenu03 a{ background:url(images/btn_information.gif) no-repeat 0 0; width:55px; } .smenu01:hover{ background:url(images/btn_over_sitemap.gif) no-repeat 0 0; } .smenu02:hover{ background:url(images/btn_over_privacy.gif) no-repeat 0 0; } .smenu03:hover{ background:url(images/btn_over_information.gif) no-repeat 0 0; }
- 締切済み
- HTML
- CSS backgroundが反映されない件
CSSレイアウトで問題にぶつかってしまいました。 http://www.vivibond.com/demo/test/test.html 上記URLをFirFoxで見ると#contentsに書いた 「background: url(images/bg2.gif) repeat-y;」が反映されません。 いったい何故でしょうか。。。 CSSはこんな感じです。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ body { background: #FFFFFF; margin: 0px; padding: 0px; font: 12px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; } /*font*/ .pink {color:#F26E71;} /*ページ全体ラッパー*/ #wapper { margin: 0px; padding: 0px; width: 850px; } #wapper1 { margin: 0px; padding: 0px; width: 850px; background: url(images/bg.jpg) repeat-y; } /*コンテンツ*/ #contents { margin: 0px; padding: 0px; width: 800px; height: auto; clear: both; background: url(images/bg2.gif) repeat-y; } /*ナビ*/ #navi { background: #F3EDEE url(images/b_bg.jpg) no-repeat; padding: 44px 44px 150px 42px; width: 160px; float: left; } .navibox1{ height: 52px; background: url(images/naviboxbg.gif) no-repeat bottom; width: auto; } .navibox2{ height: 52px; width: auto; } #main { margin: 0px; padding: 0px; float: right; width: 554px; } .image { margin: 0px; padding: 20px 34px 20px 20px; } .topics { margin: 0px 34px 0px 20px; padding: 0px; } .about_text { margin: 0px 30px 0px 24px; padding: 0px 5px 30px 10px; line-height: 20px; } /*フッター*/ #footer { margin: 0px; background: url(images/footer.jpg) no-repeat; text-align: justify; clear: both; padding: 30px 0px 30px 470px; } ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
- xhtml+cssでロールオーバーがうまく動作しない
以下挑戦したのですが、うまくいかないので、 こちらで質問させていただきました。 すいませんが、わかる方教えていただけませんでしょうか。 xhtml+cssでhpコーディングしてみたのですが、ロールオーバーがうまく動作しないのです。 レイアウトもCSS 再度にメニュー項目をCSSで作りました。 以下が htmlの記述です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テストテストテストテスト</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1>id "header" の内容がここに入ります</h1> </div> <div id="contents"> <div id="sidenavi"> <h2 id="sn1"><a href="#"><em>TOP</em></a></h2> <h2 id="sn2"><a href="#"><em>テスト</em></a></h2> <h2 id="sn3"><a href="#"><em>テストテスト</em></a></h2> <h2 id="sn4"><a href="#"><em>リンク集</em></a></h2> </div> ************ 以下は、cssのコードです。 /*ここからサイドナビ指定*/ #contents #sidenavi { background: #99CC66 url(images/bg_19.jpg) repeat; margin: 0px; padding: 15px 0px 0px 5px; height: 1100px; width: 190px; float: left; } #contents #sidenavi h2 { font-size: 9px; float: left; margin: 0px; padding: 0px; } #sidenavi h2 a { text-decoration: none; display: block; height: 56px; width: 182px; margin: 0px; padding: 3px 0px 3px 3px; color: #0000CC; visibility: hidden; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #sidenavi em { visibility: hidden; } /*サイドナビ1番目*/ #sidenavi h2#sn1 { background: url(images/navi_06.jpg) no-repeat; } #sidenavi h2#sn1 a:hover,#sidenavi h2#sn1 a:active { background: url(images/navi_ov_06.jpg) no-repeat; } /*サイドナビ2番目*/ #sidenavi h2#sn2 { background: url(images/navi_12.jpg) no-repeat; } #sidenavi h2#sn2 a:hover,#sidenavi h2#sn2 a:active { background: url(images/navi_ov_12.jpg) no-repeat; } /*サイドナビ3番目*/ #sidenavi h2#sn3 { background: url(images/navi_14.jpg) no-repeat; } #sidenavi h2#sn3 a:hover,#sidenavi h2#sn3 a:active { background: url(images/navi_ov_14.jpg) no-repeat; } /*サイドナビ4番目*/ #sidenavi h2#sn4 { background: url(images/navi_16.jpg) no-repeat; } #sidenavi h2#sn4 a:hover,#sidenavi h2#sn4 a:active { background: url(images/navi_ov_16.jpg) no-repeat; } /*ここまでサイドナビ指定*/
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSでの影の付け方
http://radiocaroline.jp/ 上記のサイトのようにコンテンツ表示領域と 背景領域の間のグラデーション部分はどのように 設定すればいいのでしょうか？ 現在真ん中780px固定で左右を背景画像にしてます。 <style type="text/css"> <!-- body { background: #000000; margin: 0px; padding: 0px; text-align: center; color: #ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-image: url(images/bg.gif); background-repeat: repeat; } .oneColFixCtrHdr #container { width: 780px; background: #000000; margin: 0px auto; text-align: left; } .oneColFixCtrHdr #header { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #header h1 { margin: 0px; padding: 0px 0px; } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer p { margin: 0px; padding: 5px 0px; } #left { background-color:#000000; width:530px; float:left; } #right { background-color:#000000; width:250px; float:left; } .style2 { color: #FFFFFF; font-size: 80%; } .style1 {font-size: 60%; color: #CCCCCC; } .style6 {color: #CCCCCC} .style7 {font-size: 70%} --> </style>
- 締切済み
- ホームページ作成ソフト
お礼
実際作った物にリンクを張っておいたのですが消されちゃいました。 下記がWin IE6でOKなソースです。 <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; height: 1%; } h2 a{ padding-right: 23px; background: url(images/icon_link1.gif) right center no-repeat; float: left; } </style> <body> <h2><a href="#">あああああああああああああああああああああああああああ</a></h2> </body> </html>
補足
Win IE6だけがダメなんです。