- ベストアンサー
[CSS]Firefox2では横表示・IE6では縦表示
CSSについて質問させてください。 contentsというDIVの中に、con-leftというDIVとcon-rightというDIVを横に並べて表示したい場合に、以下のタグを書きました。 [CSS] #contents { width:910px; padding:20px; } #contents #con-left , #contents #con-right { width:453px; float:left; border:solid 1px red; } [HTML] <div id="contents"> <div id="con-left"></div> <div id="con-right"></div> </div> 理論上では、con-left及びcon-rightの横幅は453px+ボーダーの2pxで、合計455px、それが二つで910pxで、横に表示されるはず。 しかしIEでは縦に並んで表示されてしまいます。 この解釈の違いがよく分かりません…。 分かる方は教えていただけませんか？
- ititit
- お礼率23% (4/17)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
IE 7標準モードで再現せず。互換モードで再現。 明らかにDOCTYPEスイッチの問題。 http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.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" xml:lang="ja" lang="ja"> <head> <title>Q3445896 TestCase 1</title> <style type="text/css"> #contents { width:910px; padding:20px; } #contents #con-left , #contents #con-right { width:453px; float:left; border:solid 1px red; } </style> </head> <body> <div id="contents"> <div id="con-left"></div> <div id="con-right"></div> </div> </body> </html>
その他の回答 (3)
himajin100000さんの回答にもありますが、IE6は互換モードの場合widthにpaddingやborderを含めるので、実質#contents内のスペースは870pxになってしまいます。 なのでfloatの指定がある横幅が453pxのdivが2つ並ぶだけのスペースがなく、#content-rightほうのdivが落ちてしまいます。 一応、ハックを使わないで対応できる参考サイトのリンクを載せておきます。
お礼
なるほど、仕様の違いなんですね。 丁寧にお答えいただきありがとうございました
- ICHI-yan
- ベストアンサー率33% (45/134)
IEがcssの仕様書どおりに動く意志が無い為です。 ボックスの解釈が他のcssに準拠したブラウザと異なる解釈をするためにはみ出て、落ちる結果になっています。 widthがpadding・borderを含むのか含まないのかで計算結果が違います。 DOCTYPE宣言によって、スイッチが切り替えられますのでブラウザで表示が違う相談の時はDOCTYPE宣言もデータに入れたほうがいいですよ。 http://www.css-designsample.com/others/layout.html ブラウザで異なった表現になる時は解釈違いによる事が多いです。 解釈ではないけど、バグ（プログラムの欠陥）もあったりします。 バグ辞典 http://cssbug.at.infoseek.co.jp/ それぞれ大量にバグはありますので、その穴埋めをする技術をハックといいます。 これもバグを利用してバグ封じみたいな、技から、いろいろあります。有名なものは名前がついています。スターハックとか、アンダースコアーハックとか。なるべくならハックなど使わない方向で組めるようにがんばってください。
- himajin100000
- ベストアンサー率54% (1660/3060)
コピーミスった ×!DOCTYPE html ○<!DOCTYPE html
関連するQ&A
- CSSでページ作成、Firefoxでうまく表示できません
ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- CSS
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでの横位置指定：IE6の表示について
初心者です。宜しくお願い致します。 テーブルを使わず、画像の下にテキストが入った2つのboxを、中央に表示させたいのですが、IE6だけうまくいきません。 ソースは以下です。 ■HTML ---------------------------------- <div id="list"> <div class="list_top"> <div class="list_title">タイトル</div> </div> <div class="list_cont"> <div class="list_photo"> <img src="g"width="130" height="150" border="0" /></a> <a href="">ＡＡＡＡＡＡＡＡ</a> </div> <div class="list_photo"> <img src="g"width="130" height="150" border="0" /></a> <a href="">ＡＡＡＡＡＡＡＡ</a> </div> </div> </div> ■CSS ---------------------------------- #list { FLOAT: right; MARGIN: 5px 4px 5px 6px; WIDTH: 315px; HEIGHT: 300px; BORDER: #000000 1px solid; } .list_top { PADDING-RIGHT: 0px; PADDING-LEFT: 5px; BACKGROUND: url() left top; PADDING-BOTTOM: 0px; PADDING-TOP: 9px; HEIGHT: 24px; } .list_cont { padding:0px 0px 0px 25px; BACKGROUND: url() left top; } .list_photo { FLOAT: left; MARGIN: 7px; WIDTH: 130px; } 以上です。 CSS側の 【.list_cont { padding:0px 0px 0px 25px;】 上記の指定で、Firefoxと、IE7では中央に表示できるのですが、 IE6のみずれてしまいます。 長くなり申し訳ありません。宜しくお願い申し上げます。
- ベストアンサー
- HTML
- IEだとdivが横に並びません
CSSでレイアウトをしているのですが、横にふたつdivを並べたいのに、右側のdivが下にまわってしまいます。 http://oshiete1.goo.ne.jp/qa3576983.html こちらでIEでは左の余白が倍になってしまうと知り、display:inlineを指定しましたが、解決しません。 何が原因でしょうか。 HTML: <div id="main"> <div id="mainl"> </div> <div id="mainr"> </div> </div> CSS: #main { width: 900px; } #mainl { float: left; height: 317px; width: 324px; display: inline; padding-top: 26px; padding-right: 16px; padding-bottom: 0px; padding-left: 40px; } #mainr { float: right; height: 317px; width: 480px; padding-top: 26px; padding-right: 40px; }
- 締切済み
- CSS
- フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが 「container」>を突き抜けて表示されてしまいます。 下記がhtml、cssソースになります。 【HTML】 <body> <div id="container"> <!--メインナビ--> <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div> <!--フッター--> </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。 【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。 「contents」 を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。 それとも根本的にブラウザの問題なのでしょうか？ (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。
- ベストアンサー
- CSS
- FirefoxでのCSSページの崩れについて（長文）
こんにちわ。Firefoxで<div>を使って段組をしているのですが、セレクトボックスを設置した瞬間、右側に配置した段組が崩れてしまいます（他のブラウザでは崩れません）。どうしても解決できず途方にくれております。何卒ご指南下さい（涙） 「RSS 表示」の段組部分が「エントリー01」セレクトボックスの段組と同列にならばず、下の段へはじき出されてしまうのです。 ----<body部分>------ <body> <div class="page"> <div class="contents"> <!-- 左側メニュー 表示 --> <div id="leftmenu"> <!-- カテゴリボックス表示 --> <form method="get" action="#"> <select name="category"> <option value="">選択してください</option> <option value="01">＊＊＊＊＊＊＊</option> <option value="02">＊＊＊＊＊＊</option> </select> <input type="submit" value="表示" /> </form> </div> <!-- 中央コンテンツ 表示 --> <div id="main"> <!-- 本文表示 --> <h2 class="title">エントリー01</h2> </div> </div> <!-- 右側メニュー 表示 --> <div id="rightmenu"> <!-- RSS 表示 --> <h3 class="calendar_title">RSS 表示</h3> </div> </div> </body> ---<使用しているCSS>----- .page { width: 800px; text-align: left; background: #ffffff; display: table; border: 1px solid #370d55; margin: 20px auto; padding: 0px 0px 0px 0px; } .contents{ width: 595px; border: 1px solid #370d55; float: left; } #main{ width: 390px; border: 1px solid #370d55; float: right; } #rightmenu{ width: 190px; border: 1px solid #370d55; float: right; } #leftmenu{ width: 190px; border: 1px solid #370d55; float: left; padding: 0px 0px 0px 10px; }
- 締切済み
- HTML
- 【css】Firefoxで見るとborder-bottomが消える
ただいま、IEとFirefoxで動作確認をしております。 IEでは問題なく表示されるのですが、Firefoxで確認した場合、ボックスの下部のボーダーが消えてしまいます。 このとき、文字を大きくするとボーダーが表示されます。 また、文字を小さくすると、文字の大きさによっては表示される場合と表示されない場合とがあります。 こちらを回避する方法はあるのでしょうか？ 不必要と思われる部分は端折っていますが、 html及びcssは下記の通りです。 /////////////////////////////////////////// <div id="aaa"> <div id="left">あああ</div> <div id="right">あああ</div> </div> /////////////////////////////////////////// #aaa{ background-color: #ffffff; border: 1px solid #000000; width: 498px; zoom:100%; overflow:auto; } * html #aaa{ width: 500px; overflow: visible; height:1px; } #left{ float:left; } #right{ float:left; } ///////////////////////////////////////////
- 締切済み
- HTML
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで1つのボックスの中に2つのボックスを横に並べて両サイドをピッタリ表示したい
CSSをちょこっと勉強している者です。 どうしてもうまくいかないところがあるので質問させてください。 先に参考イメージを載せておきます。 http://www.geocities.jp/shinopo/sample.gif 一番外枠になる１つのボックス(Aとする)の中に２つのボックス (左をB、右をCとする)を横に並べてAの横幅一杯ぴったりに表示 されるようにしたいと思っています。(参考イメージの下を参照) 参考イメージ下のようにAのborderを無くすとBとCが横に並んで ぴったりと表示されるのですが、Aに1pxのborderを設定すると CがBの下段に表示されてしまい、Cの右側とAのborderの間に 少しの隙間ができてしまいます。（参考イメージ上参照） この隙間を無くすにはどのようにすれば良いのでしょうか？ この隙間がなくなればBとCは横にぴったりと表示されると思うのすが。 自分なりにCのmargin-rightやpadding-rightに0pxなどを設定して 試してみましたがうまくいきません。 以下にコードを載せておきます。 ご教授よろしくお願い致します。 ============== index.html ============== <html> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> </head> <body> <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <br> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="menu"> <br> <dl> <dt>メニュー</dt> <dd>カテゴリ１</dd> <dd>カテゴリ２</dd> <dd>カテゴリ３</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> </body> </html> ============== style.css ============== body{ margin:0px; } #centermain{ text-align:center; } #container{ width:780px; margin-left:auto; margin-right:auto; text-align:justify; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; } #banner{ background-image:url(../img/sima.gif); width:780px; height:60px; } #banner h1{ margin-top:0px; margin-bottom:0px; padding-top:15px; padding-left:20px; } #content{ float:left; background-color:#cccccc; width:540px; height:100px; padding-left:20px; } #menu{ float:right; background-color:#999; width:240px; height:100px; padding-left:10px; } #foot{ clear:both; text-align:center; font-size:12px; color:#ffffff; background-color:#cccccc; width:780px; height:25px; padding-top:7px; }
- ベストアンサー
- HTML
お礼
DOCTYPE宣言の問題だったのですね！ ありがとうございました