- ベストアンサー
IEとFirefoxでボックスレイアウトが違う
- IE(6,7)とFirefox(2.0.0.14)で検証しながらページを作成しています。メニューブロックと本文ブロックが重なってしまう問題が発生しています。
- メニューブロックに設定したposition:fixedを削除すると、ブロックが正しく並ぶものの、画面をスクロールしてもメニューが固定表示されません。
- 本文ブロックを先に記述し、float:rightで右側に表示し、メニューブロックを回り込ませる方法を試していますが、うまくいっていません。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- position:fixed;でメニューを右側に固定したい
position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか？現状では無理なのでしょうか？ HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。
- ベストアンサー
- HTML
- 100%ボックス・フッタ固定、IE6だけ左寄り…
いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%; text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }
- ベストアンサー
- HTML
- IEの印刷プレビューでレイアウトが崩れてしまう
ＨＰ作成の際にＩＥで段組みレイアウトを組むと印刷プレビューで行ずれを起こしてしまいます。 たとえば、 全体の幅(755px)＝メニュー(55px)＋本文(700px) とすると本文がメニューの下に回り込みをしてしまいます。 （メニュー＋本文を754pxに設定すると印刷プレビューはうまくいくみたいなんですが・・・） 原因や解決方法がわかれば教えていただけませんでしょうか？ よろしくお願いします。 ※ソースは以下のとおりです。 <body style="background-color: #cccccc;"> <div style="width: 755px;margin: 0px 0px 0px 20px;background-color: #ffffcc;"> <div style="background-color:#CC6666;float:left;width:55px;height:200px">メニュー</div> <div style="background-color:#CCCC66;float:right;width:700px;"> 本文<br> 本文 </div> <div style="clear:both;"></div> </div> </body>
- 締切済み
- HTML
- oveflow、margin等の表示について質問です
以下のようなhtml （XHTML 1.0 Transitional、文字コードはUTF-8） <body> <div id="wrapper"> <div id="container"> test </div> </div> </body> で、bodyにリピート有りの背景、wrapperにx軸にリピートの背景、containerにリピート無しの背景と背景色に白をcssで設定しました。 containerは中央揃えで上に35pxの空きをもたせたいのですが、containerに「margin-top:35px」とするとIE（6、7）では意図した通りに表示されるのですがfirefoxだとwrapperにも35pxの空きができてしまいbodyの方の背景が見えてしまうといった状態になりました。 containerのmargin-topを指定せず、wrapperに「padding-top:35px」を指定する、または、containerのmarginはそのままでwrapperに「overflow: hidden」を指定すると両方のブラウザで意図した通りに表示されました。 ただ、paddingを指定した方はわかるのですが、なぜoveflowで、しかもhiddenで解決できたのかが全くわかりません。個人的な感覚ではcontainerのmarginをいかす方法で進めたいのですが…。 変な質問ですが、なぜこれで解決できたのが教えていただけると助かります。根本的に間違っている点などもありましたらご指摘していただければ幸いです。説明下手ですが何卒、よろしくお願いいたします。 ---元のcss--- html,body { height: 100%; margin: 0px; padding: 0px; } body { background-image: url(../img/***1.jpg); background-repeat: repeat; background-position: left top; height: 100%; } #wrapper { background-image: url(../img/***2.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 100%; } #container { background-color: #FFFFFF; background-image: url(../img/***3.jpg); background-repeat: no-repeat; background-position: left top; width: 850px; margin-right: auto; margin-left: auto; height: auto; min-height: 620px; margin-top: 35px; }
- ベストアンサー
- CSS
- 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
- position:fixedが親要素に準じて表示してくれません。。
position:fixedが親要素に準じて表示してくれません。。 <div id="relative"> <div id="flashContent"><img></div> <div id="TopBnr"><img></div> </div> ーーCSS－ーーーーーーーーーーーーーーーーーーーーーーーーーーーー #relative { position:relative; width:990px; height:374px; margin:0px auto; } #flashContent { width:990px; height:374px; margin:0px auto; z-index:0; } #TopBnr { position:fixed; width:260px; height:90px; right:90px; top:30px; z-index:1; } Ie6対応済みです。。 なぜかIeでの配置はできているのですが、 それ以外のブラウザでは、親要素に準じて配置してくれません。 どなたか解決策を教えてください。。
- 締切済み
- HTML
- IEとFireFoxでCSSの見た目をそろえたい
CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1> </h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2> </h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p> </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }
- ベストアンサー
- CSS
- CSSでIEとFirefoxでの表示の違い
IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- div入れ子による height100%
お世話になります。 親要素のdivは縦100%になるのですが、 入れ子のdivが縦100%にならず困っております。 検証ブラウザは、IE6、IE7、FF2、Safariです。 お分かりの方、ご教授をお願いいたします。 ▼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=shift_jis" /> <title>test</title> <style type="text/css"> <!-- html { height:100%; } body { height:100%; margin:0; padding:0; } #wrapper { background: #99CC00; width:500px; margin-left:auto; margin-right:auto; min-height:100%; } #wrapper-inner { background:#CCFF00; width:450px; margin-left:auto; margin-right:auto; min-height:100%; } #contents { background: #FFFFCC; width:400px; margin-left:auto; margin-right:auto; min-height:100%; } * html #wrapper { height: 100%; } * html #wrapper-left { height: 100%; } * html #wrapperA { height: 100%; } --> </style> </head> <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="contents"> テスト <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </div> </body> </html>
- ベストアンサー
- CSS
- CSSのposition:fixed;に関する質問です。
position:fixed;で画面下部に固定表示させたdivの中にメニュー画像を入れているのですが、 表示領域・窓サイズがこのdivより小さくなった場合、 ある大きさ以下からスクロールバーを表示させることは可能でしょうか？ 現状画面右端からどんどん消えていってしまいます。 下記がソースになります。 ＜HTML＞ <div id="wrapper"> <div id="main"> 割愛 </div> <div id="topmenu"> <ul> <li id="topmenu01"><a href="">link01</a></li> <li id="topmenu02"><a href="">link02</a></li> <li id="topmenu03"><a href="">link03</a></li> <li id="topmenu04"><a href="">link04</a></li> <li id="topmenu05"><a href="">link05</a></li> </ul> </div> </div> ＜CSS＞ div#wrapper{ z-index:100; background:url(images/bg.png) no-repeat left top; width:1004px; margin:0 auto; } div#topmenu{ position:fixed; bottom:0; vertical-align:bottom; margin:0 auto; overflow:hidden; width:1105px; height:332px; display:block; } div#topmenu ul{ margin:0 auto; overflow:hidden; position:relative; top:-120px; /* 略した部分の要素に関連して上にあげています*/ } div#topmenu ul li{ float:left; position:relative; } div#topmenu ul li a{ display:block; }
- 締切済み
- HTML
お礼
IE６では表示固定されないのは諦めてたのですが、幅が違ってしまうのだけが気になってました。 でも、幅のことも含めて「IE6はposition:fixedに非対応」と考える方がいいですね。 この件については、メニューブロックをIE７／Firefoxに最適なwidth:24%で幅調整して、IE６でメニューブロックと本文ブロックの隙間が開いてしまうのは仕方なしということにします。 ご教示ありがとうございました！