- 締切済み
IEのbox-shadow（CSS3 PIE）が…
CSS3 PIEを使ってIEにbox-shadowをコンテナ全体に施したところ、フッター以下部分の影を含めて画面に表示されてしまいました。 希望としては添付画像の波線以下の部分は画面に表示させずに、フッターを画面最下部にするようにしたいのですが、、、どうしたらいいのでしょうか？ 全体の縦幅をIEだけ-30pxにしたいのです。 分かりにくい日本語で申し訳ありません、何と説明したらいいのかが自分でも分かっていなくて・・・。
- shibashiaba
- お礼率25% (2/8)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
関連するQ&A
- 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わかる方いらっしゃいますか？ よろしくお願いします。
- ベストアンサー
- HTML
- [CSS] 常にフッターは下部に表示 IE7
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。 内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> <div id="container"> <div id="main"><p>内容</p></div> <div id="footer">Copyright</div> </div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、 画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると その場所のままです。更新をかけると一番下に移動するのですが、 これはIE7では無理なのでしょうか？ 広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が いらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- CSS
- IE・FirefoxでのCSS表示違いについて
HTML＋CSSでホームページを制作する際、以下のような構成 上部：メインロゴ 中部：コンテンツ（What's newなど） 下部：メニューバー で、IE7とFireFoxで表示違いの差が発生してしまいます。 IEだと問題なく表示されるのですが、FireFoxで表示した場合、 ・中部のWhat's newが表示されない ・下部メニューバーが上部メインロゴの右側に表示されてしまう などの表示の問題が発生します。 CSSファイル内のソースが問題だというところまでは分かって いるのですが、一般的にこういった場合、CSS内でページ全体を 構成するfloatの設定がおかしいのでしょうか？ 全体のページ構成を決めるCSSタグでIEでもFireFoxでも全体を 崩さず表示を同じにするようなタグがあればご教示ください。 説明が分かりづらくてすみません・・。 （URLを具体的にお教えできれば良いのですが、、） お分かりであればお願いいたしますm(＿)m
- ベストアンサー
- CSS
- ie7の印刷レイアウトがくずれます。css対策
質問です。 印刷についてのIE7対策をうかがいたいです。 画面上はまったく問題ないのですが、 いざ、印刷となると崩れてしまいます。 フッターがメインメニューの半ばまで せりあがって （崩れた形）で印刷されてしまいます。 たぶん3のメニューが短いからか... (今後 a-2 が更新する可能性があるためにheightはautoに してありますが。。) 対策としてはどうしたらよいでしょうか？ よろしくお願いします。 ※print用のcss はすでに作成しています。 IE8,ＦＩＲＥＦＯＸについてはフッターを css改行コードに強制改ページさせることにより 修正は成功しています。 メイン部分のレイアウトとしてはこういった感じです。 http://css.uka-p.com/3column/image.html レイアウトの順番としては。 0コンテナでつつんでます。 1ヘッダー height=auto 2メイン height=auto float: right; （内部）a-1 右エリア height=auto float: right; （内部）a-2 メインの部分 height=auto float: none; 3左メニュー height=auto float: left; 4フッター height=auto clear:both; ちなみに画面上では ie6,ie7.firefoxはまったく問題が ありません.... よろしくお願いします。
- ベストアンサー
- CSS
- フッターのCSSに関して
フッターのCSSの処理でわからず困っています。 やりたいことは以下の通りです。 １．ブラウザが十分に大きい場合は一番下にフッターを置く。 ２．もしブラウザの大きさが取れない場合はフッターの上の部分の終了後にフッターを置きたい。 フッターはposition: absolute;で指定してあるのでブラウザが十分に大きい場合は問題ないのですが、ブラウザを小さくして最表示した場合にフッター部分がメインの部分のところに被ってしまいます。 出来ればメインコンテンツの下部がフッターの上部より下にある場合はメインコンテンツの下にフッターがくる用に修正したいです。
- ベストアンサー
- CSS
- IEでCSSを動的に切り替える方法
もう３日間悩んでおりまして、糸口がつかめずご質問させていただきました。 何でも結構ですのでアドバイスいただけましたら助かりますm(_ _)m 【やりたいこと】 IEで画面をリロードすることなくCSSを再読込して適用させる。 【試した方法でIE以外では動いたもの】 http://phpspot.org/blog/archives/2009/08/css_91.html http://allabout.co.jp/gm/gc/23930/4/ 【本当にやりたいこと】 AjaxでPOSTして、戻ってきたページ全体のHTMLを使ってページ全体を上書き更新したい。 それはPOSTすることで画面の表示位置をずらしたくないためです。 IE（６，７，８）以外ではうまくいっていそうです。（FF3、Chromeで確認） IEだと、CSSが不完全に適用されているようなくずれた画面になるため ＣＳＳを再読込してリフレッシュできたら、解決すると考えたわけです。 検索していると、IEはCSSの動的切り替えに対応していないような記述もあったり。。 よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）
先ほど、質問させて頂きました問題に関しまして、簡単なレイアウトで再度新規にページを作成してみたところ、どうも、PCの縦幅よりも小さい値のページは、下が空いてしまうのではないかという気がしました。 レイアウトの構成は １．上部に「header」コンテナ ２．その下に「wrapper」コンテナ ３．その下（最下部）に「footer」コンテナ という構成で作成したところ、２．の縦幅が300pixのときは、このような現象が起こるが、２．の縦幅が800pixのときは起こりませんでした。 ソースコードは以下の通りです ■ html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> id "header" の内容がここに入ります</div> <div id="wrapper"> id "wrapper" の内容がここに入ります-</div> <div id="footer"> id "footer" の内容がここに入ります</div> </body> </html> ■ CSS部分 body { margin: 0px auto; padding: 0px; } #header { margin: 0px auto; padding: 0px; height: 50px; width: 800px; background: #666666; } #wrapper { margin: 0px auto; padding: 0px; height: 300px; width: 800px; background: #FFFF00; } #footer { margin: 0px auto 5px; padding: 0px; height: 60px; width: 800px; background: #00FFFF; } です。 もし、予想通りPCの縦幅の問題だとしたら、 １．コンテンツの少ないページはどのように対処するのか？ ２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？ ３．これまでの推測は間違えで、別の考え方から、エラーになるのか？ をご教授いただけますと幸いで御座います。 月曜日の朝から、くだらない質問かもしれませんが、宜しくお願いします。
- ベストアンサー
- HTML
- IEで角丸を表示させるには？
ワードプレスを使用してHPを作りました。 HP制作初心者です。 角丸がIEでも表示されるように、 こちらのサイト↓ http://kruz-graphix.com/2010/02/css3_radius_shadow_for_ie/ を参考に、htcファイルを読みに行くよう スタイルシートを編集したのですが、どうしても効きません。 詳しい方…コーディングをチェックして、 原因を解明していただけるととても助かります…（＞＜） 制作したHPはこちら http://ogosechurch.minibird.jp/ CSSファイルは以下 http://ogosechurch.minibird.jp/wp-content/themes/responsive/style.css?ver=1.8.7 ※編集したコードは1150行目、セレクタ名「menu li」です。 リンクしているPIEファイルは以下です。 http://ogosechurch.minibird.jp/PIE/border-radius.htc よろしくおねがいいたします。
- 締切済み
- HTML
- 100%ボックス・フッタ固定、IE6だけ左寄り…
いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%; text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }
- ベストアンサー
- HTML
- CSSをどう書けばいいでしょうか？
CSSをどう書けばいいでしょうか？ 以下のhtmlを想定しています。flashの表示位置はウインドウの上下中央センターに表示させたいと思っております。 footerは常にページの下部に表示させる予定です。 ページ上にコンテンツが少ないのでスクロールするまでもない状態なのでこのような表示位置を実現したいのですがどのようにすればいいでしょうか？ 下記に書いているCSSに添削をお願いいたします！ #flash { margin: 0 auto; width: 960px; height: 450px; } #footer { margin: 0 auto; width: 960px; height: 150px; } <div id="flash">上下左右の中央に表示されるコンテンツ</div> <div id="footer">常にページ下部に表示されるコンテンツ</div>
- ベストアンサー
- HTML
