IEで背景が正しく表示されない videoscript
- videoboxというlightboxの動画版のライブラリをテストしています。firefox、chrome共に表示の問題は有りません。
- IE7～のみ背景の黒色が高さ0pxになりフェイードアウトされません。また表示されている動画も、Y軸は中央寄せがされず0pxのところで表示されます。
- 原因はわからないのですが、javascriptが画面の高さを動的に算出し、高さを割り当てている気がするのですが、算出値がIEのみ0pxになっているのではないかと思います、直感ですが。
- ベストアンサー
IEで背景が正しく表示されない videoscript
IEで背景が正しく表示されない videoscript videoboxというlightboxの動画版のライブラリをテストしています。 firefox、chrome共に表示の問題は有りません。 IE7～のみ背景の黒色が高さ0pxになりフェイードアウトされません。（実際は最上段?だけ表示されている） また表示されている動画も、Y軸は中央寄せがされず0pxのところで表示されます。 原因はわからないのですが、javascriptが画面の高さを動的に算出し、高さを割り当てている気がするのですが、算出値がIEのみ0pxになっているのではないかと思います、直感ですが。 問題のURL(IEで背景が表示されず、videobox) http://www.wushu-online.com/html/newpage.html?code=3 css(m_sys_common.css)を取り除いてもうまくいきません。 本家(問題なく表示されます) http://videobox-lb.sourceforge.net/ どなたか教授お願い致します。
- ssmx
- お礼率86% (95/110)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
以下の行の場所が違います。 // OKWAVE ADD10806 this.htmlinfo = htmlinfo(); // OKWAVE end ADD10806 これは、open: function(sLinkHref, sLinkTitle, sLinkRel) 関数の中に記載してみてください。 以下が修正例。 open: function(sLinkHref, sLinkTitle, sLinkRel) { // OKWAVE ADD10806 this.htmlinfo = htmlinfo(); // OKWAVE end ADD10806 this.href = sLinkHref; this.title = sLinkTitle; this.rel = sLinkRel; this.position(); this.setup(); this.video(this.href); // OKWAVE ADD10806 //this.top = Window.getScrollTop() + (Window.getHeight() / 15); this.top = this.htmlinfo.scrolly + (this.htmlinfo.height / 15); // OKWAVE end ADD10806 this.center.setStyles({top: this.top+'px', display: ''}); this.fx.overlay.start(0.8); this.step = 1; this.center.setStyle('background','#fff url(/design/wushuonline/img/loading.gif) no-repeat center'); this.caption.innerHTML = this.title; this.fx.center.start({'height': [this.options.contentsHeight]}); },
その他の回答 (2)
- nekomikekamo
- ベストアンサー率73% (71/97)
ためしに以下の4点を実施してみてください。 1.videobox.jsの先頭に下記関数の追加。 var htmlinfo = function(){ var info = {}; if (window.innerWidth) { info.height = window.innerHeight; info.scrolly = window.pageYOffset; } else { if (document.documentElement && document.documentElement.clientWidth) { info.height = document.documentElement.clientHeight; info.scrolly = document.documentElement.scrollTop; } else { if (document.body.clientWidth) { info.height = document.body.clientHeight; info.scrolly = document.body.scrollTop; } } } return info; }; 2．videobox.js内のopen: function(sLinkHref, sLinkTitle, sLinkRel)関数の先頭に以下追加 this.htmlinfo = htmlinfo(); 3.videobox.js内のopen: function(sLinkHref, sLinkTitle, sLinkRel)内の以下の処理を変更。 [変更前] //this.top = Window.getScrollTop() + (window.getHeight() / 15); ↓ [変更後] this.top = this.htmlinfo.scrolly + (this.htmlinfo.height / 15); 4.position: function()内の処理を変更。 [変更前] this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'}); ↓ [変更後] this.overlay.setStyles({'top': this.htmlinfo.scrolly+'px', 'height': this.htmlinfo.height+'px'});
お礼
ありがとうございます。 かなりお時間かけて修正していただき恐縮です。 javascriptはわかりませんが、なんとなく高さの算出方法を変えたスクリプトなのかな？と思っています。 結果ですが修正しましたが、各ブラウザ共にポップアップされなくなりyoutubeに直接移動してしまうようになりました。 どこかに間違いがあるのでしょうか？ よろしければご覧になっていただけたら助かります。 変更箇所は // OKWAVE ADD10806 // OKWAVE end ADD10806 で囲ってあります。
- nekomikekamo
- ベストアンサー率73% (71/97)
HTMLがボロボロです。 ドキュメント宣言の位置が異常です。 <html></html>が変なところで切れています。 <body></body>がありません。 一度HTMLを見直されることをお勧めします。 HTMLが不正なので、正しく値が取得できていないのだと思われます。
お礼
ご回答ありがとうございます！ 説明の補足ですが利用しているCMS(Makeshop)の都合上、宣言の場所や</head>の重複もやむなしで行っています。 確かに、宣言の書き方により正しく表示できないとlightbox系のライブラリの事例がありました。 CMSの都合上、<body>内しか変更できないので、苦肉の策として以下のように書きます。 <head></head><body> ヘッダ部のJSの宣言</head>本文 </body> カートシステムでライブラリやCSSを追加するときの苦肉のハックですが、これが大きな原因かもしれません。 これを踏まえまして何か対策・アイデアがあればご教授くだされば幸いです！ 追加 間違えているところがあり、そこも修正しました。 冒頭にある</html>→</head> 終端に</body></html>追加。 状況は変わらずです。 参考URL(こっちが本番に近いです) http://www.wushu-online.com/html/newpage.html?code=4
関連するQ&A
- IEだけ背景が出てこない。。。
みなさま、こんにちわ。いつもお世話になっています。 みなさんにお尋ねします。 CSSで背景を指定しているのですが、IEだけなぜか表示できません。 html側はこうしています。 <div class="ttlh2"> <h2>新着情報</h2><p>News</p> </div> そしてCSS側はというと、 .ttlh2 { width:676px; height:34px; display:block; background:url(../img/sub_h3_bg.gif) 0 0 no-repeat; margin-bottom:5px; } .ttlh2 h2 { font-size:16px; float:left; background:none; display:inline; font-weight:normal;} .ttlh2 p { font-size:16px; float:right; color:#FFFFFF; margin:6px 5px 0 0; display:inline; background:none;} というようにしました。Firefoxなどでは問題なく表示できるのですが、IEだけ見えません。 何が問題なのでしょうか。 ご存知の方いらっしゃいましたらご助言ください！
- ベストアンサー
- HTML
- IE9のみ、背景が縦に２回表示される
質問よろしくお願い致します。 タイトル通り、IE9でのみ、背景画像が縦に２回連続して表示されてしまいます。 Macの全てのブラウザ、Win Chrome、Safari、Firefox、IE6～8では問題なくきちんと表示されます。 IE9だけなんです。。。 CSSは一部分、直接HTMLに記載していますが、外部CSS（commonで使用している方など）に書いても同じでした。 ソースは下記になります。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <div class="w1000 box_shadow" style="height:645px;background:url(images/bg1.jpg) left top no-repeat;"> <div class="w960"> <h3><img src="images/ttl1.png" width="800" height="500" alt="title1" class="p-top25" /><h3> <p class="m-top30"> キャプションキャプションキャプション<br /> キャプションキャプションキャプションキャプションキャプションキャプションキャプション <p> </div> </div> <div class="w1000 box_shadow" style="height:300px;background:url(images/bg2.jpg) left top no-repeat;"> <div class="w960"> <h3><img src="images/ttl2.png" width="800" height="300" alt="title1" class="p-top25" /><h3> <p class="m-top30"> キャプションキャプションキャプション<br /> キャプションキャプションキャプションキャプションキャプションキャプションキャプション <p> </div> </div> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2つ縦にブロックをおいていますが、１つだけだときちんと表示されます。 背景画像と内包内容違いで複数おくと、この現象がおきます。 position:relativeやzoom:1も試してみましたがダメでした。 具体的な表示内容は、下記のようになります。（わかりずらいの画像も添付します） ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 高さ645pxでbg1.jpg背景が表示：内容カラ ーーーーーーーーーーーーーーーーー 高さ645pxでbg1.jpg背景が再度表示：タイトル画像やキャプションが入る ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 高さ300pxでbg2.jpg背景が表示：内容カラ ーーーーーーーーーーーーーーーーー 高さ300pxでbg2.jpg背景が再度表示：タイトル画像やキャプションが入る ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 原因や改善策などありますでしょうか？ どうぞ宜しくお願い致します。
- 締切済み
- CSS
- 背景画像表示について
CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。 なので <div style="width : 1300px; height : 1000px; top : 1px; left : 2px;position : absolute; background-image: url(****.gif); z-index: 1; visibility : visible; " id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが 基本なはずの背景画像にブラウザによって表示が異なるのか、と。 本を読んでもインターネットで調べてもそんなことはないとかいてありました。 僕の記述が間違っているとしか考えられません。 正しい記述を教えてください。 ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした
- ベストアンサー
- HTML
- スタイルシートで、背景画像が表示されない
スタイルシートで、背景画像（header.jpg'）を設定してるのですが表示されません。 --- style.css newpage5.html --- ｉｍｇ ┐ header.jpg スタイルシートは border-bottom: 1px solid #FF9900; background-image: url('img/header.jpg'); padding: 20px; ホームページビルダーでは、簡易表示されてるんですが アップロードすると、画像が表示されないのですが・・・ 以上宜しくお願いします。
- ベストアンサー
- HTML
- IE７とfirefox2.0でcssによってテーブルのセルの背景の表示がfirefoxで表示されないことについて。
cssを外部リンクで td.1-cell{ width:200px; background:#F8F8F8; } と記述し、 <td class=1-cell> で呼び出したところ、IE７では正確に表示されているのに対して、 firefoxで背景の色が表示されず無色となってしまいます。 どうすればfirefoxとIE両方で表示できるのでしょうか。
- ベストアンサー
- HTML
- cssのボタンについて（IEで背景が表示されない）
リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。 そこでzoom: 1;などを足すなどしてみたのですが やはり表示されません。どうしたらいいのかご指南いただけませんか？ どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; ｝
- ベストアンサー
- CSS
- IEの背景の表示がおかしいんです
WINXPのIE(多分5)なんですが、背景画像、背景色、文字色がHTMLに設定されているものと違うんです。 ワンポイントなどの画像はちゃんと表示されますが背景画像だけ表示されず背景色は白で固定、文字色はリンク以外は全て黒になります。 画像ファイルはちゃんと指定された場所にあるのは確認できるんですが、ファイル形式に関係なく表示されない状態です。HTMLだけでなくCSSで設定しても同じようです。 インターネットオプションの詳細にある画像の表示にはチェックが入っているんですが、何度やっても表示されません。 なんとか普通に表示できるようにしたいんですが、方法がわからず困っています。 再インストール以外の対策方法をご存知の方、助けてください。
- ベストアンサー
- オフィス系ソフト
- IE７の表示崩れを直したい
CMSでCSSを使ってサイトを作成するにあたり、IE7だけ表示が崩れてしまうのですが、何が原因で崩れてしまうのかがわかりません。 IE6、IE8、Firefox、Opera、Safariともに表示が崩れないのですが、これはIE7単体のバグなのでしょうか？ ・サイトURL http://www.tantanmen.com/site/index.html ・CMSは、SOY-CMSを使っています。 おそらくは、大きな画像部分のCSSの記述の問題化と思うのですが、このように記述しております。 /*トップイメージの設定*/ #top_image { width: 1000px; height: 528px; clear: both; width: 1000px; height: 528px; padding: 0; background: url("img/top_image01.jpg") 0 0 no-repeat scroll; text-indent: -9999px; display: block; } どうぞ、よろしくお願いいたします！
- ベストアンサー
- HTML
- 背景画像だけをはみ出して表示させたい。
CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。
- ベストアンサー
- HTML
- ＷＩＮのＩＥ６でボックスに指定した背景画像が表示されません
外部リンクのCSSでボックスに背景画像を表示させたいのですが、ウィンドウズのIE６では表示されません。記述がおかしいのでしょうか？タグは以下の通りです。ほとほと困り果てております <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>タイトル</title> <link rel="stylesheet" href="eps.css" type="text/css"> </head> <body> <div class="outer"> <p>内容を書き入れます</p> </div> </body> </html> 外部リンク .outer{ position: absolute; top: 0px; bottom: 0px; left: 80px; width:650px; background-image: url("back-sen.jpg"); padding: 0px; margin: 0px auto; }
- 締切済み
- CSS
お礼
できました！！！！ ありがとうございます。 javascriptを学べばこのようにすぐに対応できるようになるのでしょうか、本当に驚きました。 本当は理由も知りたいのですが、cssのブラウザごとの癖もまだわかりませんし、javascriptは なおさらわかりませんので、自分のレベルに応じてソースを勉強します。 どうもありがとうございました！！ p.s 少し右端が切れていたり、画像の並び方もくせがありますが(IEは3列と他は4列)、これはＣＳＳで IEハックするのでしょうね。頑張ってみます。