CSS3 PIEがIE6,7に効きません
- CSS3 PIEを使ってもIE6とIE7ではMultiple background imagesが表示されません。
- 背景画像が表示されない問題は、IE6とIE7に特有のもので、IE8では正常に表示されます。
- CSSのソースコードの一部には、PIE.htcというファイルのパスが指定されています。
- ベストアンサー
CSS3 PIEがIE6,7に効きません。
CSS3 PIEを使えばIEでもMultiple background imagesが使えると聞いて試してるのですが、 IE8はOKなのですがIE7とIE6で背景画像が表示されません(T_T)ちなみにIETesterです。 CSSのソースはこんな感じです↓ body{ font-family: 'Meiryo', 'HGPGothicM','Hiragino Kaku Gothic Pro', 'Osaka', 'VL PGothic', 'TakaoPGothic', 'メイリオ', 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'VL Pゴシック', 'Takao Pゴシック', Sans, sans-serif; -pie-background:url(画象パス) no-repeat 20% 100px,url(画象パス) no-repeat 100% 0, url(画象パス) repeat-x, url(画象パス) repeat-x 0 bottom;/*IE用*/ background:url(画象パス) no-repeat 20% 100px,url(画象パス) no-repeat 100% 0, url(画象パス) repeat-x, url(画象パス) repeat-x 0 bottom;/*moz,webkit用*/ background-color: #FFF; padding-top: 350px; padding-bottom: 150px; behavior: url(PIE.htcパス);/*PIEビヘイビア*/ } 誰か同じ症状orわかる方いらっしゃいますか？ よろしくお願いします。
- toshi_goo
- お礼率80% (28/35)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
試してみたところ、どうやらIE6やIE7ではbodyに適用することができていないようです。 body内に <div id="all"></div> などを追加して、 div#all{ } に同じスタイルを記述したところIE6、7でも表示することができました。
関連するQ&A
- IEのみでCSSのbottomが効かない。
IEのみ、CSSのbottomが効かない現象に悩まされております... こちらを改善する方法をご存知の方は、ご教授いただけますと大変に助かります。。 以下がCSSに記述しているプラグラム内容となります。 body{ position: relative; background-image: url(../image/bg/t_bluestick.jpg), url(../image/pattern/navi_pt.png), url(../image/gnavi/bg.png), url(../image/gnavi/bg_pt.png), url(../image/header/header_img3.png), url(../image/pattern/footer_white_pt.png), url(../image/footer/footer_pt.png), url(../image/pattern/dec_pt_50.png), url(../image/bg/pt_whitetile.png) ; background-repeat: repeat-x, repeat-x, no-repeat, repeat-x, no-repeat, repeat-x, repeat-x, repeat-y, repeat ; background-position: top, center 321px, center 321px, center 311px, center 23px, bottom, bottom, center 10px, center ; background-color: #BFE5FF ; } 何卒よろしくお願い申し上げます。
- ベストアンサー
- 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
- xhtml+cssでレイアウトしたページがmacで崩れる
xhtml+cssでレイアウトして、コーディングしたPageなのですが、 階層Pageで作ったソースをコピーして4P作成しました。 テーブルは一切使わず、ヘッダー、メニュー、メイン、フッターで構成し、CSSでレイアウトをおこない、うまくできたのですが、どうしてか、MACのIE5.1の環境の時だけ、サイドメニューの下にメインコンテンツが、崩れてきてしまい、メインのスペースが空白になってしまいます。 MAC IE5.2では問題なく見れました。 それも、他の階層ページは、問題なく表示するのです。 cssソースは以下になります。 ヘッダー フッター省略 度々の質問で恐縮です。 @charset ”utf-8”; /*ここからコンテンツ*/ #contents { margin: 0px 0px 0px 63px; padding: 0px; width: 900px; height: 1100px; } #contents #main { margin: 0px; padding: 0px; float: right; height: 1100px; width: 680px; } #contents #main h2 { background: url(../treet/images/title_08.jpg) no-repeat; height: 57px; width: 633px; padding: 0px; margin-top: 15px; margin-left: 5px; } #contents #main h2 em { visibility: hidden; } #contents #main p { margin: 5px; padding-bottom: 15px; font: 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; width: 550px; border-bottom: 1px dotted #CCCCCC; } #contents #main h3 { color: #666666; height: 16px; margin-right: 15px; margin-left: 30px; padding-top: 4px; padding-bottom: 6px; padding-left: 6px; border-bottom: 1px dotted #a5d3e2; border-left: 6px solid #a5d3e2; width: 555px; font: 16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; } .p1 { margin: 0px; padding: 0px; width: 550px; font: 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; color: #666666; } .p2 { margin: 0px; padding: 0px; width: 550px; font: bold 12px/16px ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; color: #82C1D7; } .p1-a { font-size: 12px; width: 520px; margin: 0px; padding: 0px; line-height: 16px; text-align: right; float: right; } .block { display: block; width: 520px; margin-left: 25px; } #contents #main h2#list { height: 57px; width: 633px; padding: 0px; margin-top: 15px; margin-left: 5px; background-image: url(../company/images/title_08.jpg); background-repeat: no-repeat; } .p3 { font-family: ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”; font-size: 12px; line-height: 120%; color: #666666; } /*ここまでコンテンツ*/ /*ここからサイドナビ*/ #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; font-family: ”ＭＳ Ｐゴシック”, Osaka, ”ヒラギノ角ゴ Pro W3”, sans-serif; } #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; } /*ここまでサイドナビ*/
- 締切済み
- その他（インターネット・Webサービス）
- 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でアイコンを付けるとWin IE6でのみおかしくなってしまいます
下記のCSSコードでh2を装飾しています。 h2が長くなって改行が入った場合、Win IE6でのみ表示がおかしくなってしまいます。 「h2 a」に「float: left;」を追加してやるといちよう解決出来たのですが、もっと良い方法はないでしょうか。 よろしくお願い致します。 <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; } h2 a{ padding-right: 23px; background: url(images/icon_link1.gif) right center no-repeat; height: 1%; } </style> </head> <body> <h2><a href="#">あああああああああああああああああああああああああああ</a></h2> </body> </html>
- 締切済み
- HTML
- CSSでドロップシャドウ
CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか？ --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }
- 締切済み
- HTML
- CSSでのBackground
質問です。 CSSでTRタグにBackgroundって使えますか？ 何度かやっているのですがうまくいかなくて・・・ リファレンス参照してもそれらしい記述がなくて困ってます。 下記のような感じでやってるのですが何か間違ってますでしょうか？ ちなみにインラインではなく、別ファイルでのCSS記述です。 tr#area_center_column{ background:url('画像パス') no-repeat; height:26px; } 画像パスの間違いなどはありません。 上記の記述じゃ無理ですか？ 下記の記述でも無理でした。 tr#area_center_column{ background-image:url('画像パス'); background-repeat:no-repeat; height:26px; } インラインでは画像は表示されるんですけど・・・ どなたか教えてくださいお願いします！
- ベストアンサー
- HTML
- CSS IEだけがずれます。
いくら頑張ってもずれます。。 どこを変更すればよいのでしょうか？ ご指導下さい。 CSSは以下です。 /******************************************/ body{/*全体的な設定*/ margin:0px; /*全体の余白*/ text-align:center; /*センタリングIEバグ回避用*/ background: url(04.jpg) left top repeat-x; /*全体の背景の設定*/ } /******************************************/ a:link , a:visited , a:hover , a:active{ /*リンクフォントの設定*/ color: #a44; /*リンクの色*/ text-decoration: underline; /*リンク下線の設定。 } /******************************************/ #baseBlock1{/*コンテンツ全体の設定*/ font-family:Verdana, "Tahoma,Arial,sans-serif,ＭＳ Ｐゴシック",MS UI Gothic, Osaka;/*フォントの設定*/ color:#aaa; /*文字色の設定*/ margin-left:auto; /*センタリングのための左の余白*/ margin-right:auto; /*センタリングのための右の余白*/ width:850px; /*コンテンツ全体の幅*/ text-align:left; /*IEセンタリングバグ回避用。*/ font-size: 0.82em; /*文字サイズ。 文字サイズはInternet Explorerの文字のサイズ－中、Firefoxの文字サイズ－標準サイズに合わせてあります。*/ } /******************************************/ #title{/*タイトル部分*/ margin-left:10px; width:1360px; /*タイトル部分の幅*/ height:200px; /*タイトル部分の高さ*/ background:url(01.jpg) no-repeat; /*タイトル部分の背景設定*/ border:1px solid #fff;/*枠線の設定*/ } /******************************************/ h1{/*タイトル部分のフォント、文字位置の設定*/ font-size:1.3em; /*タイトル文字の大きさ 1emでbaseBlock1のfont-sizeと同じ大きさになります*/ color:#fff; /*タイトル文字の色*/ padding-top:80px; /*文字上側の余白*/ padding-left:50px; /*文字左側の余白*/ margin:0px; /*Firefoxでの余分な余白を削除*/ } /******************************************/ h2{/*サブタイトル部分の設定*/ color:#fff; /*文字色*/ padding-left:50px; /*左に余白*/ padding-top:0px; /*上に余白*/ padding-right:50px; /*右に余白*/ font-size:1.0em; /*文字サイズ*/ margin:0px; /*余白の設定*/ font-weight:normal; /*文字の太さ*/ } /******************************************/ #main{/*メインコンテンツ部分の位置設定*/ width: 1078; /*メインコンテンツの幅*/ float: none; /*メインコンテンツ位置設定*/ padding-top: 31px; /*文字上部の余白*/ padding-bottom:30px; /*フッターとの間隔*/ ; padding-left: 226px;} /******************************************/ #maintext{/*IEとfirefoxのズレ対策用*/ padding:30px; /*文字左側の余白。*/ } /******************************************/ h3{/*見出しの設定*/ border-bottom:1px solid #acf; /*下に枠線*/ border-left:4px solid #acf; /*右に枠線*/ padding-left:4px; /*左に余白*/ font-size:1.1em; /*文字サイズ*/ font-weight:normal; /*文字の太さ*/} /******************************************/ #menu{/*メニュー部分の設定。*/ width:219px; /*メニューの幅*/ float:left; /*メニュー位置設定*/ font-size:0.9em; /*メニューの文字サイズ*/ text-align:center; /*文字位置の設定 padding-top:30px; /*上に余白*/ } /******************************************/ #me-top{/*メニュー上部画像用*/ height:34px;/*高さ*/ width:228px; background:url(02t.jpg) no-repeat; /*背景の設定*/ } /******************************************/ #me-mid{/*メニュー中部画像用*/ width:224px; background:url(03.jpg) repeat-y; /*背景の設定*/} /******************************************/ #me-bot{/*メニュー下部画像用*/ height:32px; /*高さ*/ width:228px; background:url(04b.jpg) no-repeat; /*背景の設定*/} /******************************************/ #menutext{/*IEとfirefoxのズレ対策用*/ padding-left:10px; /*左の余白設定*/ } /******************************************/ .m-title{/*メニュータイトルの設定。*/ height:20px; /*高さ*/ font-size:1.2em; /*テキストサイズ*/ border:1px solid #666; /*枠線の設定*/ color:#aaa; /*テキスト色*/ background:#fff url(05.jpg) no-repeat; margin-top:0px; /*上部に余白*/ margin-left:10px; /*左に余白*/ margin-right:22px; /*右に余白*/ margin-bottom:5px; /*下に余白*/ } /******************************************/
- 締切済み
- CSS
- CSSで背景色のwidthが指定できません。
WebサイトのQ&Aのページを<dl>要素を使って作成しています。 質問項目には、background-imageだけを使い、 回答項目には、background-imageとbackground-colorを使っております。 それぞれの回答項目のbackground-colorのwidthを592pxで統一したいのですが、できません。 回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。 かれこれ4時間くらい格闘しておりますが、きちんと表示できません。 ちなみに、dl、dt、ddの要素のうち、marginとpaddingはリセットCSSをしています。 以下に、該当するHTMLとCSSだけ書きました。 何がいけないんでしょうか？ もしくは、以下のコードだけではなく、親要素の属性や属性値とかが問題なのでしょうか？ <!-- HTML --> <dl> <dt class="questiontext_dt">ここで質問</dt> <dd class="question?dd">ここで回答してます</dd> </dl> /* CSS*/ .questiontext_dt { width:592px; padding: 0px 0px 0px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; text-align: left; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background:url(http://www.ok.com/img/question1.gif); background-repeat: no-repeat; } .questiontext_dd { width:592px; padding: 5px 0px 5px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background-color: #f5eabc; background-image:url(http://www.ok.com/img/question2.gif); background-position: left 5px; background-repeat: no-repeat; }
- ベストアンサー
- CSS
- 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
お礼
ありがとうございますッ!できました。結構簡単な事でした。しかもPIEを使用した背景にpng画象を使ってもちゃんとIE6でも透過表示されるっていうのも確認できました(偶然ですが)。ありがとうございました。