締切済み

Light Window　IE6,7,8での不具合について

2009/07/20 17:35

こんにちは。javascript初心者です。宜しくお願い致します。 Light Windowのサンプルを作成しております。参考サイトの通りに作ってアップしたのですが、 WindowsIE6.7.8でおかしな事になってしまいました。問題１：サムネール画像が表示されないパスはあっています。マック版Safari.Firefoxでは問題なく表示されます。問題2：フラッシュ動画が勝手に動いてしまいます。マック版Safari.Firefoxでは問題ないです。調べてみたのですが原因、解決方法が分かりません。ブラウザに依存しないLightWindowというのも見つかりませんでした。以下、HTMLのソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="css/lightwindow.css" type="text/css"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightwindow.js"></script> <title>LightWindowサンプル</title> </head> <body>  <div><a href="photo/002.jpg" class="lightwindow" title="夕焼け"><img src="thumb/002.jpg" width="96" height="54" alt="夕焼け" /></a> <a href="photo/003.jpg" class="lightwindow" title="富山湾"><img src="thumb/003.jpg" width="96" height="54" alt="富山湾"></a></div>   <div> <a href="photo/001.jpg" class="lightwindow" rel="[00]" title="富士山"> <img src="thumb/001.jpg" width="96" height="54" alt="富士山"> </a> <a href="photo/002.jpg" class="lightwindow" rel="[00]" title="夕焼け"> <img src="thumb/002.jpg" width="96" height="54" alt="夕焼け"> </a> <a href="photo/003.jpg" class="lightwindow" rel="[00]" title="富山湾"> <img src="thumb/003.jpg" width="96" height="54" alt="富山湾"> </a> </div>  <div> <a href="photo/uranai.swf" class="lightwindow page-options" params="lightwindow_width=340,lightwindow_height=260">swfの表示もOK</a> </div> <div> <a href="http://journal.mycom.co.jp/" class="lightwindow">毎コミジャーナル</a> </div> <div> <a href="http://www.yahoo.co.jp/" class="lightwindow page-options" params="lightwindow_width=300,lightwindow_height=300">html大きさ指定入れるのもOK</a> </div> </body> </html> 参考にしたURLはこちらです。 http://journal.mycom.co.jp/articles/2007/10/02/lw/index.html 成果物はこちらです。 http://www1.odn.ne.jp/~cks23160/light_window_sample/ お分かりになる方、いらっしゃいましたらどうぞよろしくお願いします。

rarii_1972
お礼率100% (9/9)

JavaScript
回答数1
ありがとう数2

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

みんなの回答

yyr446
ベストアンサー率65% (870/1330)

2009/07/22 09:21 回答No.1

lightwindowはブラウザーに依存して無いはずです。特にWindows版のIE6やIE7では多数のユーザーがいるはずです。ご提示の成果物のページをWindows版のIE6,IE7,FireFox3.0で見ましたが。問題2のフラッシュ動画が勝手に動く現象は発生しません。問題1のサブネイル画像が表示されないのは、thumb/にサブネイル画像ファイルが存在しないから表示されていないだけで、機能的には問題ありません。MAC版で表示できてる方が不思議です。ご提示のソースコードをいじらずそのまんま、画像のディレクトリーと画像ファイルのみ自分の持っている画像に変えてためしてみましたが、まったく問題ありませんでした。解決策はあまり思いつきませんが、 WindowsのIEのキャッシュを全部クリアーしてみたらどうでしょう。 WindowsのIEの設定を確認してみてはどうでしょう。これくらいです。

質問者

お礼 2009/07/27 13:31

yyr446様こんにちは。お返事が遅くなり大変失礼致しました。現在試してみる時間が取れないため取り急ぎ、お礼だけで失礼します。何度もアドバイス頂き、大変助かっています。 >lightwindowはブラウザーに依存して無いはずこれを聞いて安心しました。近いうちに試してみて、また結果を報告させてください。どうもありがとうございました。

関連するQ&A

同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを同じHTML内に入れたいのですが両方ともうまくいきません。いろいろ自分なりに調べたのですが、わからないです。うまくいく方法をどうか教えてもらえないでしょうか？宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div>  <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div>  </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
【jQuery】サムネイル
3つのサムネイル画像(.thumb)があります。クリックした.thumbはopacityを1に、その他は0.5に切り替わるする方法を教えてください。始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });
- ベストアンサー
- JavaScript
jCarouselLiteループ時の属性値取得
jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分５つの１ループ目はそれぞれ取得できるのですが、２ループ目以降の<a>のhref属性が取得できません。現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){ 　　alert($(this).attr("href"))；//←２周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。
- ベストアンサー
- JavaScript
画像のフェードイン・フェードアウト
現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます）回答の方、宜しくお願い致します。  <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'>  </script>  <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head>  <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div>  </div>  <div class="work-bottom">  <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a>  </div>  </div> </div> </div>
- ベストアンサー
- JavaScript
キーエンス社のトップコンテンツのような動的なコンテンツのスクリプト
javaScript初心者です。どうぞよろしくお願いします。 http://www.keyence.co.jp/ このサイトのトップの様なコンテンツを作りたいです。 1：一つ一つの中身はflashで 2:時間が立てば次の項目に自動スクロール最低限上記を必要としたいです。 javaScriptをしっかり扱えるようになりたいので解説等もいれていただけたら幸いです。図々しくて恐縮ですがどなたかよろしくお願い致します。 html----------------------------------------------- <body> <div id="rollover"> <p><img src="rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></a></p> <ul id="thumb"> <li><a href="#"><img src="rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></li> <li><a href="#"><img src="rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li> </ul> </div> </body> </html> css--------------------------------------------- <style type="text/css"> /* ロールオーバー */ ul,li{ padding:0;margin:0; } div#rollover { height:295px; width:580px; } div#rollover p { float:left; margin:0; } div#rollover ul { float:right; width:150px; list-style:none; } div#rollover li { height:50px; } div#rollover a img { border:0; } </style> javaScript------------------------------------------ <script type="text/javascript"> //<![CDATA[ window.onload =function(){ var myImg = document.getElementById("thumb").getElementsByTagName("img"); var regrep = "_thumb"; var newimg = new Array(); for (var i = 0; i <myImg.length; i++) { newimg[i] = new Image(); newimg[i].src = myImg[i].src; myImg[i].onmouseover =function() { var href = this.src.replace(regrep,""); document.getElementById('rollover_view').src=href; } } } //]]> これは拾ったフリーのもののソースなのですがこれを改造したほうがやりやすいようでしたらその旨をご教授いただきたいです。どうぞよろしくお願い致します。
- 締切済み
- JavaScript
HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。
DreamWeaver8を使いHPをさわってるんですが、IE6で見ると、TOPページの画像と画像の間に空白ができて見えます。DreamWeaver上でもFirefoxでも問題なく表示されるんですが、原因がわかりません。（当方初心者で、このHPももともと業者さんが作ったものを、途中から簡単な更新等のみを知人からお願いされてしておりますので、CSSやらタグやら勉強中で、まだまだよく解ってないような感じです。そんな人間がHPを触るな！という意見がごもっともだとは思いますが、知人も周りに頼めるような人間もなく私にお願いしてきておりますので、なんとか綺麗に見えるようにしたいのです。）これだけの説明では解りにくいと思いますので、以下におかしいと思われる個所を載せます。 <div class="top-h-left"></div> <div class="top-h-right"> <div class="t-sub-navi"> <ul> <li class="h-home"><a href="../index.html"><img src="../img/top_h_home.jpg" alt="HOME" width="53" height="20" class="imgover" /></a></li> <li class="h-inquiry"><a href="../info/inquiry.html"><img src="../img/top_h_inquiry.jpg" alt="お問い合わせ" width="81" height="20" class="imgover" /></a></li> <li><a href="../info/sitemap.html"><img src="../img/top_h_sitemap.jpg" alt="サイトマップ" width="82" height="20" class="imgover" /></a></li></ul><br clear="all" class="partition" /></div><img src="../img/top_img1.jpg" alt="○○○」" width="410" height="160" /></div> <span class="top-h-left"><a href="http://www./○○○"><img src="../img/logo_top.jpg" alt="○○○" width="340" height="180" /></a></span><br clear="all" class="partition" /> <img src="../img/top_img2.jpg" alt="" width="340" height="209" /><img src="../img/top_img3.jpg" alt="" width="410" height="209" /><br /> <div class="top-global-navi"> この画像のimg1とimg3の間に空白が現れてしまいます。（○の部分はHPのアドレスや店名等が表示されていましたので、略させて頂きました）
- ベストアンサー
- ホームページ作成ソフト
画像のサムネール+フォトアルバムを制作中で困っています
こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。よろしくお願いいたします。サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" > 　　　　　　　　　　・　　　　　　　　　　・　　　　　　　　　　・　　　　　　　　　　・　　　　　40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、　B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。　　　　　　"mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。上記のような方法をとりたいです。どうか、よろしくお願いいたします。
- 締切済み
- JavaScript
ページ内に複数のJQueryスライドを設置したいが
JQuery勉強中の初心者です。１ページ内に同じタイプのスライドショーを４つ設置しようとしていますが、上手く表示されません。使用しているのは、Galleriaのクラッシックデーマ（下記URLと同一のもの）です。 http://galleria.io/themes/classic/ これをJQueryでオーバーレイさせ、オーバーレイ表示上にGalleriaのスライドを設置しています。ページ内にはギャラリーを表示するための４つの画像ボタンがあり、そのボタンをクリックすると、オーバーレイ表示上にそれぞれ違うスライドを表示します。下記のソースのような記述をしています（文字数の関係で、下記ソースの画像ボタンは２つにしています。）。しかし、<div id="btn1">～</div>をクリックすると、オーバーレイ表示上にギャラリーが表示されることはされるのですが、５秒後ぐらいにギャラリー画面上に「Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.」と表示されます。どうしてもこのスライドショーを使用したいので、お盆休み中に格闘しましたが、どなたか分かる方がおられましたら、解決方法をお教えいただけないでしょうか。何卒よろしくお願いします。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" id="camera-css" href="../common/css/galleria.classic.css" media="all"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script src="../common/js/galleria-1.2.9.min.js"></script> <script> /* オーバーレイ表示用のcss */ <style type="text/css"> #btn1,#btn2 { display:block; width: 420px; height: 281px; cursor: pointer; } #overlay1,#overlay2 { display: none; width: 100%; height:100%; position: fixed; top: 0; z-index: 100; background: rgba(0,0,0,0.8); } #close1,#close2 { width: 80px; cursor: pointer; position:absolute; top:50px; right:0; } </style> </head> <body> <div id="overlay1">　/* オーバーレイ用のボックス */ <div id="galleria">　/* １つ目のスライドショー用のボックス */ <a href="../common/img/photo/t1.jpg"><img src="../common/img/photo/thumb/t1.jpg",data-big="../common/img/photo/t1.jpg"></a> <a href="../common/img/photo/t2.jpg"><img src="../common/img/photo/thumb/t2.jpg",data-big="../common/img/photo/t2.jpg"></a> <a href="../common/img/photo/t3.jpg"><img src="../common/img/photo/thumb/t3.jpg",data-big="../common/img/photo/t3.jpg"></a> </div> <p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div> <div id="overlay2">　/* オーバーレイ用のボックス */ <div id="galleria1">　/* ２つ目のスライドショー用のボックス */ <a href="../common/img/photo/s1.jpg"><img src="../common/img/photo/thumb/s1.jpg",data-big="../common/img/photo/s1.jpg"></a> <a href="../common/img/photo/s2.jpg"><img src="../common/img/photo/thumb/s2.jpg",data-big="../common/img/photo/s2.jpg"></a> <a href="../common/img/photo/s3.jpg"><img src="../common/img/photo/thumb/s3.jpg",data-big="../common/img/photo/s3.jpg"></a> </div> <p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div> /* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */ <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("#overlay1").fadeIn(); }); $("#btn2").click(function() { $("#overlay2").fadeIn(); }); $("#close1").click(function() { $("#overlay1").fadeOut(); }); $("#close2").click(function() { $("#overlay2").fadeOut(); }); }); </script> /* ギャラリーをオーバーレイ表示するためのボタン */ <div id="container" class="clearfix"> <div id="btn1"><img src="../common/img/photograph/no1_tbt.jpg" alt="" class="item"></div> <div id="btn2"><img src="../common/img/photograph/no2_bali.jpg" alt="" class="item"></div> </div> /* ギャラリー用オプション＆JQuery呼び出し用 */ <script> // Load the classic theme Galleria.loadTheme('../common/js/galleria.classic.min.js'); option = { width: 900, // 幅 height: 600, // 高さ imageCrop: false, // 画像のクロップ有無 // true：width/heightにフィットさせるように画像を切り取って表示 // false：画像を全体表示させるように縮小 transition: 'fade', // 画像の遷移イフェクト _toggleInfo: false, // imgのalt属性を取得してキャプションとして表示 // true：キャプションの非表示 // false：キャプションの表示 } // Initialize Galleria Galleria.run('#galleria',option); Galleria.run('#galleria1',option);　/* ←idを分けてみたりしました。 */ </script>
- 締切済み
- JavaScript
【jqueryを設置】ブラウザによって崩れてしまう
いつもお世話になっています。 Firefoxとsafariでカラム崩れしてしまい、どこをなおせばいいかわかりません。どうすれば崩れないでしょうか？ HTML↓ <div class="slider-wrap"> <div id="main-photo-slider" class="csw"> <div class="panelContainer"> <div class="panel" title="Panel 5"> <div class="wrapper"> <img src="images/tempphoto-1.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> <img src="images/tempphoto-2.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 3"> <div class="wrapper"> <img src="images/tempphoto-5.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 4"> <div class="wrapper"> <img src="images/tempphoto-5.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> <img src="images/tempphoto-5.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 6"> <div class="wrapper"> <img src="images/tempphoto-5.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> </div> </div> <a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a> <div id="movers-row"> <div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> </div> </div> <br clear="all" /> <div style="margin-top:20px;"> <img src="images/tempphoto-2thumb.jpg" alt="temp-thumb" /> </div> CSS↓ .slider-wrap { width: 1050px; top: 87px; left: 40px; clear: both; border:solid #fff 0px;} .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .stripViewer { position: relative; overflow: hidden; width: 1050px; height: 455px; } .stripViewer .panelContainer { position: relative; left: 0; top: 0; } .stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 1050px; } .stripNavL, .stripNavR, .stripNav { display: none; } .nav-thumb { border: 1px solid black; margin-right: 5px; } #movers-row { margin: -43px 0 0 62px; } #movers-row div { width: 10%; float: left; } #movers-row div a.cross-link { float: right; } .photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 45px; margin-top: -65px; position: relative; z-index: 9999; color: white; } .photo-meta-data span { font-size: 13px; } .cross-link { display: block; width: 62px; margin-top: -14px; position: relative; padding-top: 15px; z-index: 9999; }
- ベストアンサー
- CSS
IE6,IE7でThickBox3の画像がうまく表示されません。
IE6,IE7でThickBox3の画像がうまく表示されません。 htmlへの記述は以下のような感じなのですが、Firefoxでは問題なく表示されるのですが IE6、IE7だと、画像だけ表示されなかったり、同じ画像が上下に２枚表示されたりします。そしてたまに上手く表示されます。検索するとIEで真中に表示されないというのがありましたが、それとは原因が違うようです。どなたかご存知の方はいませんでしょうか？宜しくお願い致します。 <ul> <li><a href="../img/photo/flower/001.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/001_s.jpg" alt="花" width="100" height="66" /></a></li> <li><a href="../img/photo/flower/002.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/002_s.jpg" alt="花" width="100" height="66" /></a></li> </ul>
- ベストアンサー
- HTML

Light Window　IE6,7,8での不具合について

みんなの回答

お礼 2009/07/27 13:31

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

Light Window IE6,7,8での不具合について

みんなの回答

お礼 2009/07/27 13:31

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

Light Window　IE6,7,8での不具合について

カテゴリ
一覧

専門家に質問してみよう
専門家登録