- ベストアンサー
IEで表示されてしまう余白をなくす方法
- ブログポータルのテンプレをカスタマイズしたことがあるレベルの私ですが、今回初めてHPを作っています。トップページに、jQueryでスライドショーを設置しているのですが、IEで確認したところ、そのスライドショーの上下に、不要な余白ができてしまいます。
- スライドショーが参照しているCSSに原因があるんだろうということは、なんとなく分かるのですが、解決方法がわかりません。
- ソースを見てもらったほうが確実と思いますので、URL記載します。ほかにも、HTMLの不備などありましたらご指摘下さい。よろしくお願いいたします。
- Catherine-100
- お礼率50% (1/2)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いまどき、transitinalはないでしょう。 ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )1999年 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> もちろんチェックはしておくこと ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) どうしてもtransitinalが必要なら <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> これで解決しなかったら、あらためて
補足
ご回答頂きありがとうございます。 アドバイス頂きましたように、strictで書き出してチェッカーにかけましたら、多数のエラーが返ってきましたので、<!DOCTYPE html>にしてみました。 当該の表示がうまくいかない部分には、変化ありません。
関連するQ&A
- GallerifficというjQueryはIE7で
GallerifficというjQueryを使ってスライドショーを設置しています。 http://www.twospy.com/galleriffic/ IE7よりも古いバージョンで見ると、レイアウトがぐちゃぐちゃに崩れてしまいます。 このjQueryはIE7では使えないのでしょうか？ いろいろ調べていると英語の情報で、「div.slideshow img」にposition: absolute;やposition: relative;を追加しろと出てきますが、レイアウトが崩れるのはjQueryの問題ではなくCSSの問題なのでしょうか？ 詳しい方教えていただけると幸いです。
- ベストアンサー
- JavaScript
- 画像をホバーした時一つだけ半透明にしない
img { transition: 1.0s ; } img:hover { opacity: 0.5 ; } を使って画像をゆっくり半透明になるようにしています それと .relative { position: relative; } .absolute { position: absolute; left: 4px; top: 23px; } で画像に画像を重ねているのですが、 その時に重ねた小さい画像だけを半透明にしないようにしたいのですが それはどうすれば良いでしょうか？
- ベストアンサー
- CSS
- スライドショーが出来ません。。
web作成は全くの初心者で、今までいろんなサイトの見本のhtmlをコピペしてなんとか少しづつ形にになってきたのですが、どうしてもスライドショーができません、、、 こちらのサイト（http://kowaza.boo.jp/）の＜スライドショー＞ * フェードインしながら次々と画像を表示 * というのを参考に作ってみたのですが、全然スライドショーになりません。 何がいけないのか全く分からないのですが、どこかおかしなところがありましたら教えて下さい。どうぞよろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>スライドショーの実験</title> <script type="text/JavaScript"> <!-- var myspd = 200; var myx = 5; var mypic = new Array("myp1","myp2","myp3"); var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } //--> </script> </head> <body onLoad="mygo()"> <span style=" position:absolute ; top:20px ; left:20px ; z-index:1;"> <img src="top.jpg" width="300" name="myp1" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:40px ; left:50px ; z-index:2 ;"> <img src="before.jpg" width="300" name="myp2" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:60px ; left:80px ; z-index:3 ;"> <img src="after.jpg" width="300" name="myp3" border="0" style="filter:alpha(opacity=0);"></span> </body> </html>
- 締切済み
- JavaScript
- 「position:absolute」のIEのバグへの対処方法
CSS #navbar { position: absolute; z-index: 1 } HTML <div id="navbar"> 略 </div> <div id="contents"> 略 </div> CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。 このため「position:relative;」としてみたのですが．． メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。 なにかよい方法はありますでしょうか。
- ベストアンサー
- HTML
- スライドショー画像がズレて表示されてしまいます…
jQuery とcssなどを使用し、TOPページでスライドショーを 表示させたいと考えています。 必要なccsファイル、jsファイル、htmlファイルや画像ファイルは サーバーにアップ済で、TOPページの他部分は予定通りに 表示できていますが、参照画像のようにスライドショーの画像が 右半分のみスペースにズレて表示されてしまい、左半分は何も 表示されていない状態となってしまいます。 ただ、PCによって表示状態が異なるようで、問題なくスライドショーが 表示されているＰＣもあります。 上記スライドショーのcss部分は、以下の通りです。 -------------------------------------------------------- /* .viewer ------------------------- */ .viewer { margin-top: 10px; margin-bottom: 0px; margin-left: 20px; width: 790px; height: 500px; position: absolute; overflow: hidden; } .viewer ul { width: 100%; overflow: hidden; position: absolute; } .viewer ul li { top: 0; left: 0; width: 100%; height: 500px; position: absolute; } .viewer ul li img { width: 750px; height: 500px; } /* sideNavi ------------------------- */ .viewer .btnPrev, .viewer .btnNext { margin-top: -25px; top: 50%; width: 50px; height: 50px; position: absolute; z-index: 100; } .viewer .btnPrev { left: 10px; background: #ccc url(../images/top-page/btnPrev.jpg) no-repeat center center; } .viewer .btnNext { right: 10px; background: #ccc url(../images/top-page/btnNext.jpg) no-repeat center center; } /* ======================================= ClearFixElements ======================================= */ .viewer ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; } .viewer ul { display: inline-block; overflow: hidden; } -------------------------------------------------------- ズレた状態をなくし、どのＰＣで閲覧しても 正常に表示されるようにするには、どこを修正すれば良いか どなたか教えて下さい！ よろしくお願い致します。
- 締切済み
- CSS
- 教えてください!
教えてください！jQueryについて safariではうまく表示されるのですがgoogle chromeでは表示されません。 初心者です。 どうしてでしょうか？ コード載せております。 困っています。分かる方 どなたかご教授お願いいたします。 よろしくお願いいたします。 -----------html------------ <body> <div id="slideshow"> <img src="images/top_01.jpg" width="950" height="450" alt="" class="active" /> <img src="images/top_02.jpg" width="950" height="450"alt="" /> <img src="images/top_03.jpg" width="950" height="450"alt="" /> <img src="images/top_04.jpg" width="950" height="450"alt="" /> <img src="images/top_05.jpg" width="950" height="450"alt="" /> </div> </body> -----------css------------- #slideshow { position:relative; height:450px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } ----------js----------- function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); よろしくおねがいします
- ベストアンサー
- CSS
- firefoxでの画像の表示位置が違う
HP作成時での質問です、どうぞ宜しくお願い致します。 トップページにイメージ画像を配置し、それをjqueryというjavascriptで スライドショーさせる(計4枚を5秒ずつで切り換え、最後の画像でストップ)ようにしました。 作成後、プレビューするとスライドショーそのものの動作確認は問題ありませんでした。 が、ブラウザ上での表示位置に違いが出ました。 IEだと何の問題もありません(画像(1))。が、Firefoxだとその画像が図の位置にあるんです(画像(2))。 どちらのブラウザでもスライドショーはします。 使用したタグの記述としては以下の通りです。 --------------------------------------------------------- 【head内】 その(1) <style type="text/css"> <!-- #slideshow { position: relative; width: 800px; height: 250px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; } --> </style> その(2) <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> その(3) <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ $(function() { function slideSwitch() { var $active = $('#slideshow img.active'); var $next = $active.next().length ? $active.next() : null; if ($next !== null) { $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } else clearInterval(intervalID); } var intervalID = setInterval(slideSwitch, 5000); }); </script> --------------------------------------------------------- 【body内(の画像を置きたい場所)】 <TABLE border="0" width="800" height="250" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD <p id="slideshow" valign="middle" width="800" height="250"> <img src="images/top_image01.jpg" class="active"> <img src="images/top_image02.jpg"> <img src="images/top_image03.jpg"> <img src="images/top_image04.jpg"></TD> </TR> </TBODY> </TABLE> --------------------------------------------------------- ※ちなみにこのページをfirefoxでソース表示すると上記body内のこの部分が赤字表示されます。 <TD <p id="slideshow" valign="middle" width="800" height="250"> 見てわかると思いますが上記body内、</p>がありません。 メモ帳でtop_image04.jpg">の後に</p>を書いて上書きするのですが、その上でfirefoxで開いても やはり画像表示位置は違うままです。 さらに私は通常ホームページビルダーで作成しているのですが、 このソフト上でトップページを開くとエラー検出となり自動修正され、毎回この</p>が消えています。 (しかし</p>が無い状態でもIEでは問題無く正しい位置で表示されています) こういったことも今回の現象と何か関係があるのでしょうか。 以上の情報から、何か原因が特定出来るようでしたら、どうかお教え頂きたく存じます。 宜しくお願い致します。
- ベストアンサー
- CSS
- position:relative とカーサーについて
初めましてして質問します。 http://ywphotography.net flashのスライドショーと半透明なpng画像をposition:relativeで重ねています。メニューバーの上にもposition:relativeでリンクを置いています。しかし、リンクをマウスオーバーしても通常の様にカーサーがポインタに変わりません。直接cssでcursor:pointerと指定しても変わりません。でもposition:staticに戻すとポインタに変わってくれました。 これを回避する方法はありますか。解決方法が分かる方いらっしゃいましたら宜しくお願いします。
- 締切済み
- HTML
- jQuery クリックした後の動き
ボタン(#btn)をクリックすると、#navWarpを右に200px 移動するところまでは出来ましたが、２度目のクリックで元の位置まで 戻すにはどのような方法があるのでしょうか。 宜しくお願いします。 ■jquery $(function(){ $("#btn").click(function(){ $("#navWarp").stop().animate({"left":"200px"},500); }); }); ■css #navWarp{ position:relative; margin:0 0 0 -200px; } #btn{ position:absolute; top:0; left:200px; cursor: pointer; } ■html <div id="navWarp"> <div id="btn"></div> </div>
- ベストアンサー
- JavaScript
- CSS検証サービス
ヘッダーと本体の部分のCSSをこの前教えてもらった CSS検証サービスにかけたらエラーが返ってきました。 div { position : relative ; color : white ; } #header {position : fixed ; top : 0px ; left : 0px ; overflow : auto ; width : 100% ; height : 8% ; z-index : 2 ; border-bottom : 1px red solid } #navi{ position : absolute ; left : 50 px ; top : 10 % ; height : 88% ; overflow-x : hidden ; overflow-y : auto ; z-index : 1 ; } #headerではエラーで出ず、#naviのtopとleftで構文的におかしいと出ます。 やっぱりおかしいですか？ちなみにブラウザ上は想定した通りに行っています。
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 transitinalでも大丈夫ですか＾＾； ご指摘の通りclear:bothで解除したところ、上の余白が詰まりました！ （下はそのまま・・・。） すみません、ちなみにIE7（以前）の現象のようで、IE8以降では、改変前のコードでも大丈夫でした。 とりあえず、これで進めたいと思います。 的確＆明解なご回答に感謝します。