- ベストアンサー
position:absoluteが表示されない
ORUKA1951の回答
ある意味、とても有名なバグです。 googleで「IE6 position:absolute 表示 OR 消える」で検索すると必要な情報が得られるでしょう。 ここでそれを書かないのは、様々な状況が絡んでいるようで、ここで書ききれる内容ではないからです。
関連するQ&A
- ＣＳＳレイアウト positionについて
下記のタグにてpositionタグを使って指定した場合 ＩＥの文字サイズを変更しるとcopyrightと言うboxが ずれてしまいます。ずれない方法はありませんでしょうか？ お分かりの方のご回答をお待ちしております。 なお簡単なタグを記載してくれると幸いです。 body { margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px; width:900px padding-bottom:10px; padding-top:10px; } ＨＴＭＬ <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>
- ベストアンサー
- HTML
- position:absoluteが表示されない
今adobeのspryメニューバー(垂直)を使用しているのですが、 position:absoluteを設定している要素がIEだと指定した場所でなく、 右端の方に表示されてしまいます。 <ul id="MenuBar3" class="MenuBar01"> <li><a class="MenuBarItemSubmenu" href="#"><img src="●○.gif" width="240" height="45" border="0" /></a> <ul> <li><a href="#">項目 1.1</a></li> <li><a href="#">項目 1.2</a></li> <li><a href="#">項目 1.3</a></li> </ul> </li> </ul><br clear="left"> ここから▼ <ul> <li><a href="#">項目 1.1</a></li> <li><a href="#">項目 1.2</a></li> <li><a href="#">項目 1.3</a></li> </ul> ここまで▲ が、ずれてしまいます。 ul.MenuBar01 { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 240px; float: left; } ul.MenuBar01 li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 240px; } ul.MenuBar01 ul { margin: 0 0 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 210px; left: -1000em; top: 0; } 色々調べ、親要素にwidth: 100%;を入れたり、 position: absolute;の入ったところにclear:bothをいれたりもしたのですが、いっこうにIEが直ってくれません。 どのようにすれば正しく表示されるでしょうか？ どうぞアドバイスをお願い致します。 こちらのサイトを参考にしました。 http://jmblog.jp/archives/180 http://www.buzz727.jp/2007/12/ieabsolute.html
- ベストアンサー
- HTML
- IE6にてliタグに対してposition:absolute;を使ったときのバグについて
すみません、質問させて下さい。 下記のソースとスタイルシートでIE6の場合だけliが原因と思われる余白ができます。他のモダンブラウザ、IE7以降ではhrの部分を除いて問題ありませんでした。余白をなくす方法はないでしょうか。 ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="test.css" type="text/css" rel="stylesheet"> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>test</h1> </div> <div id="contents"> <div id="lefty"> <p>test test test （略）</p> </div> <div id="righty"> <p>test test test （略）</p> </div> </div> <hr> <div id="navi"> <ul> <li id="list01"><a href="#">赤</a></li> <li id="list02"><a href="#">青</a></li> </ul> </div> <div id="footer"> <address>copyright.</address> </div> </div> </body> </html> スタイルシート @charset "shift_JIS"; * { margin: 0; padding: 0; } body { text-align: center; } #wrapper { margin: 0 auto; width: 760px; position: relative; text-align: left; } #header { width: 760px; height: 100px; background-color: #CC9900; } #contents { width: 760px; } #lefty { width: 380px; float: left; background-color: #CCC; } #righty { width: 380px; float: right; color: #FFF; background: #000 } #list01 a { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav01.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 30px; right: 0; } #list02 a { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav02.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 60px; right: 0; } #list01 a:hover { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav01_on.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 30px; right: 0; } #list02 a:hover { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav02_on.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 60px; right: 0; } #footer { clear: both; padding-top: 30px; width: 760px; background-color: #990033; } li { list-style-type: none; } a { text-decoration: none; } hr { clear: both; width: 0; } どなたかご教授ください、よろしくお願いします。
- ベストアンサー
- HTML
- 付属画像がwebの表示画像ですが、その画像の赤い丸
付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように 灰色のリストの右側の真ん中に３行ほど文字を入れたいです。 コードは以下でです。 回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title></title> <style> * { margin : 0; padding : 0; -webkit-box-sizing : border-box; box-sizing : border-box; } .box { height : 56px; width : 100%; background-color : #0fd; } .wrap{ width : 100%; display : -webkit-box; display : -ms-flexbox; display : flex; -ms-flex-wrap : nowrap; flex-wrap : nowrap; padding-bottom : 30px; } .wrap .wrap_inner_left { width : 300px; } .wrap .wrap_inner_left ul { width : 300px; } .wrap .wrap_inner_left ul li { color : #444; list-style-type : none; width : 300px; height : 30px; line-height : 30px; padding-left : 20px; border-bottom : solid 1px #53535352; background-color : #f6f4f4; } .wrap .wrap_inner_left ul li:first-child { border-top : solid 1px #53535352; } .wrap .wrap_inner_right { width : 100%; } .wrap .wrap_inner_right img { width : 100%; } </style> </head> <body> <div class="box">正方形</div> <div class="wrap"> <div class="wrap_inner_left"> <ul> <li>使い方・マニュアル</li> <li></li> <li></li> <li>翻訳機能</li> <li>英語</li> <li>中国語</li> <li>スペイン語</li> <li>フランス語</li> <li>ロシア語</li> <li>アラビア語</li> <li>a</li> <li>a</li> <li>ヘルプ</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>w</li> <li>s</li> <li>mmmm</li> <li>ログアウト</li> </ul> </div> <div class="wrap_inner_right"> <img src="https://placehold.jp/1794x400.png"> </div> </div> </body> </html>
- ベストアンサー
- CSS
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- footerを{position:absolute;bottom:0p
footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。 これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？ 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって） </div> <div id="mainContainer"> ・・・・中略(3カラム等あって） </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。
- 締切済み
- HTML
- CSSのpositionでフッターが最下に配置されてくれない
CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか？ WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; text-align:center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------ ●以下、HTMLソースです ------------------------------------------------------ <div id="hdr-wrap"> <div id="hdr"> <div id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA--> コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。
- 締切済み
- HTML
- jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、 メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。 ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、 またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたら そこの画像から順にsetIntervalが開始されるようにしたいと思っております。 そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。 今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> </div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })
- ベストアンサー
- JavaScript
- position:absoluteなのにセンター合わせができるのは何故？
CSSです。 うまく表示されているのですが、何でうまくいっているのかわからないことがあります。 というのも、コンテンツをセンター合わせのレイアウトにしているというのにposition:absoluteのパーツがちゃんとセンター合わせがなぜかできてしまっているんです。 ユーザがブラウザの横幅を拡げようとも狭めようとも、常に左右をセンター合わせするつくりになっています。 以下が成功ソースです。 ※下記のlinkboxは、headerというIDセレクタに包含されている。 div#linkbox { position: absolute; top:50px; padding-left: 300px; width: 500px; _width: 800px; } div#header { background: #333333; text-align: left; width:800px; height:100px; margin-left: auto; margin-right: auto; } なぜこのソースでうまくいってしまうんでしょうか。 absoluteでも、左右を設定しない場合、自動で包含ブロック内に収まるとでもいうのでしょうか。
- ベストアンサー
- HTML
- FireFoxでvisitedの表示不具合について
HTMLやCSSに知識がなく困っています。 質問をよろしくお願いいたします。 メニューバーには８つのボタンがあるのですが FireFoxでは、visitedが表示されず IEはページの行き来でメニューボタンが消失します。 何か解決法はありませんでしょうか？ よろしくお願いいたします。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> <li><a href="../new/top.html" target="main" class="c"></a></li> <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
お礼
無事解決しました。有難うございました！