- 締切済み
ie6での重なり順（z-index）について
ie6では親要素の重なり順が絶対だと思うのですが、 例えば以下のようなソースで#a-2が#bより上で#b-2より下、という事は実現出来ないのでしょうか？ <div id="a"> <div id="a-2"> </div> </div> <div id="b"> <div id="b-2"> </div> </div> 今自分でやってみている限りでは、#bが#a-2の下に来た時点で、#bの要素である#b-2を#a-2よりも前面に表示させる事が出来ていません。 何かやり方があればご教授いただけないでしょうか。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
- metametamu
- ベストアンサー率51% (153/295)
関連するQ&A
- IE7でのz-index対応について
以下のようにコーディングすると、IE7でドロップダウンリストが後ろ側に隠れるのですが、対応方法はありますか？div#gnavi ul li ul.sublist のz-indexを9999とかにしても効果なくて。。。 <div id="gnavi"> <ul> <li><a href="#">MENU01</a></li> <li><a href="#">MENU02</a> <ul class="sublist"> <li><a href="#">MENU02-01</a></li> <li><a href="#">MENU02-02</a></li> <li><a href="#">MENU02-03</a></li> <li><a href="#">MENU02-04</a></li> <li><a href="#">MENU02-05</a></li> </ul><!-- /.sublist --> </li> <li><a href="#">MENU03</a></li> <li><a href="#">MENU04</a></li> </ul> </div><!-- /#gnavi --> <div id="adArea"> <ul> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> </ul> </div> CSS側では、以下のようにしています。 div#gnavi ul li { float:left; position:relative; } div#gnavi ul li ul.sublist { position:absolute; top:0px; left:0px; display:none; } div#gnavi ul li ul.sublist li { float:none; } div#adArea { clear:both; } div#adArea ul li { float:left; }
- ベストアンサー
- HTML
- IE6とFirefoxの表示の違い
どうか教えてください。 IE6とFirefoxでの表示結果が違うのですが、同じにするには どうすればいいのですか？ Firefoxでは文字の背景色の赤が上下にでてるし、IE6は左のボックスが 下にくっついているし、それと、A Bにかけた margin:10px;なのですが、10pxマージンとれてますかね？ よろしければ教えてください。 【html】 <body> <div id="container"> <div id="A"> <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> <div id="B"> <p>ああああああああああああああああああああああああああああああ</p> </div> </div> </body> 【CSS】 body{ font-size:20px; } #container{ background:#000; width:600px; overflow:auto; } #A{ float:left; width:200px; background:#ff0000; margin:10px; } #B{ width:200px; float:right; background: #ff0000; margin:10px; }
- 締切済み
- CSS
- MTでのタイトルリストをアルファベット順、アイウエオ順にするには
現在MTでの投稿タイトルごとにアルファベット順、アイウエオ順に表示させようとしているのですがエントリー順でしか表示されません。 カテゴリー名は自動で順番どおりになってくれるのですがどのようにすれば投稿タイトルの表示が上記のような並びになるのでしょうか？。 現状のソースとしては <div id="beta"> <div id="beta-inner" class="pkg"> <div class="archive-date-based archive"> <h2 class="archive-header">アーカイブ</h2> <div class="archive-content"> <ul class="archive-list"> <MTArchiveList> <li class="archive-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li> </MTArchiveList> </ul> </div> </div> </div> </div> となります。 宜しくお願いいたします。
- 締切済み
- ブログ
- jqueryDOM要素の生成、IE6,7での表示
Jqueryを使い、DOM要素の生成を行っていますが、 IE6、7での表示がズレてしまいます。 この様に書いています。 var footer ='<div><a href="#">test</a></div>' $(document).ready(function(){ $("#frame").append('<div id="footer_oya">' + footer + '</div>'); }); #frameの後ろに<div id="footer_oya">を移動させ、さらにその中にfooterを入れてます。 当方素人です、ネットの情報を見ながら自分なりに作ってみましたが、 どうしてもIE６、７だけズレて表示されてしまいます。 詳しい方おられましたらご教授頂けると助かります。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- IE6,IE7でボックスがずれてる。解決法を願いし
こんにちは、Santaと申します。 いつもお世話になっております。 さて、ホームページを製作しております。 ブラウザプレビューには、 Chrome 16.0 Firefox 8.0.1 IE9 ソフト Microsoft Expression SuperPreview 4 Trial を使用しまして IE6 IE7 IE8 IE9 Firefox3.6 を確認しておりますが、IE6とIE7のみ、ボックスがずれてしまいます。 どのようにしましたたら、解決できますでしょうか？ html（複雑に作ってしまいましたので、簡単に書かせて下さい） ******************************************* <div id="wrapper"> <div id="header> Rと書いてある画像が入っているボックスです </div> <div id="line"> 直ぐ下の、１０pxの横長の950pxの黒いラインです。 </div> <div id="contents"> こちらに５つのDIVボックスが入っております。 ●左の赤いwidth:75px height:500px;のものが一つ目のDIVボックスです。 </div> </div> 簡単に書きました。 画像のとおり、<div id="line"></div>に入っている width:950; height:10px; の黒のラインが少し下がってしまい、赤色の部分と重なってしまっております。 赤色の部分が上がっているのではなく、上の横長の黒のラインが下がっているようです。 何か解決法が御座いますでしょうか？ どうぞ、よろしくお願い致します。 失礼致します。
- ベストアンサー
- CSS
- ＩＥ７でスタイルシートの表示がうまくいかなくなった
これまで使っていたスタイルシートがＩＥ７ではＩＥ６までの時のように表示されなくなりました。 ＩＥ７環境でもＩＥ６環境と同じように表示させるには、スタイルシートをどのように直したらよいでしょう。 ■スタイルシートのソース <style type="text/css"> p {font-size=12pt;Letter-spacing:0.3pt;line-height:15pt;} a:link {color:blue;text-decoration:none;} a:active {color:blue;text-decoration:none;} a:visited {color:lightseagreen;text-decoration:none;} a:hover{text-decoration:none;background:brown;color:white} <!-- body{ scrollbar-shadow-color:blue; scrollbar-face-color:antiquewhite; scrollbar-Highlight-Color:cornflowerblue; scrollbar-arrow-color:dodgerblue; } --> div.blocka { float: left; width: 69%; } div.blockc { clear: both; } </style> ■想定している表示（ＩＥ６で実現できている表示） <div class="blocka"> 以下を左側に６９％幅で表示 </div> <div class="blockb"> 以下を右側に表示 </div> <div class="blockc"> 以下をａ｜ｂの下に表示 </div> ａ（69%）｜ ｂ －－－－－－－－－－－ ｃ
- ベストアンサー
- CSS
- 画像の重なりの順序を代える方法を教えてください。
画像の重なりの順序を代える方法を教えてください。 HTML <IMGで複数の画像を表示し、重なった部分があります。 INPUTボタンなどでJavaScriptを起動し、JavaScriptで背面にある画像を前面に表示 する方法を教えてください。 画像1：背面 画像2：前面 ↓ ボタンAをクリック ↓ 画像1：前面 画像2：背面 ↓ ボタンBをクリック ↓ 画像1：背面 画像2：前面 サンプルなどがあれば助かります。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- ずっと悩んでます。特定タグを子要素を含め取得したい
ずっと悩んでなかなか解決できません。特定タグを子要素を含め取得したいのですが... 例えば以下のタグがあるとして <div id="1">a<div id="2">b<div id="3">cc</div>b</div>a</div> 特定タグを子要素を含め取得して、それを配列に格納。配列の中は [0] <div id="1">a<div id="2">b<div id="3">cc</div>b</div>a</div> [1] <div id="2">b<div id="3">cc</div>b</div> [2] <div id="3">cc</div> このような配列の結果がでる動作方法はどうやればいいのでしょうか？ 正規表現を使ってやろうとしてますが、自分のレベルでは難しくてできません。 よろしくお願いします。
- ベストアンサー
- PHP
- 特定のIDがついているdivを任意の順に
HTML内の特定のIDがついているdivを任意の順に並び替える処理を行いたいです。 <div id="sample-field">hogehoge</div> <div id="hoge-field">ほげほげほげ</div> <div id="dummy-field">ホゲホゲ</div> divのIDが固定であれば、 jQuery('#kotei').after(jQuery('#hoge-field'),jQuery('#dummy-field'),jQuery('#sample-field')); という感じでいけるそうで、このafter()の中身を作ろうとして詰まっています。 ---------------------------------------------------------------- var targetField = "hoge-field,dummy-field,sample-field";//←この順にしたい targetField = targetField.split(","); targetFieldLength = targetField.length; for ( i=0; i < targetFieldLength; i++ ) { source = "jQuery(" + "'" + "#" + targetField[i] + "'" + "),"; } ---------------------------------------------------------------- jQuery('#kotei').after(source); まず、↑のように書きました。 順にお尻に連結していくには「＋」だというのは理解しているのですが、 そもそも、変数 source は上書きされていくので、意図したものにはなりません。 最後の「,」を削除する処理も必要ですが、targetFieldLengthの数のループの時だけ処理を変える事で対応できそうな気はしています。 本当は、↓こうしたいです。 jQuery('#kotei').after(jQuery('#hoge-field'),jQuery('#dummy-field'),jQuery('#sample-field')); 拙い説明で恐縮ですが、 アドバイスいただけると嬉しいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 ややこしくなるかと思って簡略化して書いたのですが、 aはヘッダ、b-2がレフトナビゲーション、bがレフトナビゲーションとコンテンツを囲んでいるボックスです。 実現しようとしているのはヘッダーのロゴ周りの画像がメイン部分の背景よりも前でレフトナビよりも下、というものです。 それに、すでにhtmlとcssを組み終わった後でのデザイン変更なので 根本からhtmlをひっくり返すのはちょっとやりたくない感じです。 cssのみで実現したいのですが、やはり無理なのでしょうか・・・。