ベストアンサー

firefoxでdivタグの体裁崩れ

2006/09/22 12:20

お世話になります。以下のソースを IEで見るとリスト１、リスト２は同じ内容が表示されます FireFoxで見るとリスト２のlist3が左側につめられて表示されます。・これはIE or FireFoxのバグになるのでしょうか？・IEと同じようにFireFoxで表示したいのですが出来ますでしょうか？申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>DIVタグテスト</title> <body> DIVタグテスト<br> <br> リスト１ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list2</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> <br> <br> リスト２ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div></div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> </body> </html>

bakenshibakenshi
お礼率81% (115/141)

HTML
回答数4
ありがとう数7

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2006/09/22 16:51 回答No.4

内容物が無い場合、高さの算出結果が0になるのが問題のようなので height:1px;とか指定するのはどうでしょう？（指定する場所は3重のdivのどれでもOK）

質問者

お礼 2006/09/22 21:41

steel_grayさん、ご教授有難う御座います。 >3重のdivのどれでもOK これがヒントとなり、ここの問題ではなく、実際に抱えてた問題を解決することが出来ました。本当に有難う御座いました。

その他の回答 (3)

nipox
ベストアンサー率32% (10/31)

2006/09/22 16:18 回答No.3

余談ですみませんが、「」だと、スペースも表示されずに便利です。

質問者

お礼 2006/09/22 16:58

「」を入れてもFirefoxですとダメでした。

Kuppycat
ベストアンサー率50% (109/216)

2006/09/22 13:24 回答No.2

リスト２のlist2にあたる<div>が空要素（中味なし）なので、幅が取られず詰められるためです。 <div></div>　→　<div> </div> とすれば回避できますよ。

質問者

お礼 2006/09/22 14:04

Kuppycatさん、ご教授有難う御座います。 divタグに何かしらの値をwidthやご教授いただいた を入れれば正しく表示されるのは知っていたのですが何かしらを入れなくても表示させる方法はないものかと思っておりまして。多分firefoxだとダメなんですね。。。有難う御座いました。

yambejp
ベストアンサー率51% (3827/7415)

2006/09/22 13:22 回答No.1

firefox1.5でみるかぎり特に問題はないようですがもし気になるようであればpaddingやmarginや border-widthをすべて0pxにして、white-spaceを nowrapにしてやればいけるかもしれません。全体幅が300しかないのに100の幅のdivを３つ並べればなにかあれば確実に幅があふれちゃいますよね？もう少し全体幅に余裕をもたせてみてはいかがですか？

質問者

お礼 2006/09/22 14:01

yambejpさん、ご教授有難う御座います。 >firefox1.5でみるかぎり特に問題はないようですがわたしはWindows firefox1.5.07ですが、リスト２はつめられてしまいます。 >もし気になるようであればpaddingやmarginや >border-widthをすべて0pxにして、white-spaceを >nowrapにしてやればいけるかもしれません。 marginもしくはheight,width,NO2でお答えいただいた を入れれば IEのように表示されました。他の指定ではダメでした。 >全体幅が300しかないのに100の幅のdivを３つ並べればそうですね。気をつけます。有難う御座いました。

関連するQ&A

firefoxでdivタグ要素が突き抜ける
お世話になります。 firefoxですとdivタグで指定した高さ・幅を要素が超えると突き抜けて表示されます。IEだと、指定した幅・高さが大きくなってくれる。以下のソースで子の要素が親のボックス、子のボックスを突き抜けなくできないでしょうか？もしかしたら簡単なことなのかもしれませんが、ご教授よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #oya { border-right:orange 1px solid; border-top:orange 1px solid; border-left:orange 1px solid; border-bottom:orange 1px solid; } #ko { border-right:green 1px solid; border-top:green 1px solid; border-left:green 1px solid; border-bottom:green 1px solid; } </style> </head> <body> <div id="oya" style="width:200px;height:200px;"> <div id="ko" style="width:100px;height:100px;">ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ</div> </div> </body> </html>
- ベストアンサー
- HTML
div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css">  </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
ieとfirefoxでdiv枠に２pxのズレ
宜しくお願い致します。現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div> <div id="goods"> <div id="top-menu"> </div> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が右に２pxにずれる。どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div>  <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div> <br style="clear:both;"> </div> <br style="clear:both;">  </div> </body> </html>
- ベストアンサー
- CSS
DIVタグの背景に画像を配置できない
<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。パスは間違っていませんが。どこが違うのでしょうか？宜しくお願いします。
- ベストアンサー
- HTML
<DIV>タグで書いた文字が、
<DIV>タグで書いた文字が、 IEで位置を合わせるとFIREFOXではズレてしまいます。どうしてなんでしょう？ <DIV style="top : 79px;left : 55px; position : absolute; z-index : 23; width : 530px; height : 13px; " id="moji"> <P><FONT size="2">IE8とFIREFOXとでズレる</FONT></P> どうもこんな感じのプログラムで、だいたい20ピクセルぐらい下がって表示されてしまうようです。前に同じ質問をしたのですが、うまく解決できなかったもので急いでます…
- 締切済み
- レンタルサーバ・ASP
高さを指定せずに子divにスクロールバー
お世話になっております。内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか？何がしたいのかと言えば高さを規定した親div内に、問題の子divを入れます。この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか？お詳しい方、何卒ご教授下さい。だいぶ簡略化したものですが、下記コードがイメージに近いです。汚いコードですが・・・ <style type="text/css">  </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> （「親divの高さ」-「他の要素の高さ」）＜「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか？無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>
- 締切済み
- CSS
firefoxで見るとdiv背景画像がスクロールで消えてしまいます
http://www.geocities.jp/testac2007/ bodyに「top_bg.gif」という背景画像指定をした上で更にdivを重ね、そのdiv内に「side_860.gif」という背景画像を指定しています。 ieだと意図した通りに表示されるのですが、 FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。何とか同症状についてネットで検索し試行錯誤してみたのですが、解決に至りませんでしたのでこちらでヘルプさせていただきました。皆さんのお知恵を拝借いただきたいです。 ■■■HTMLの概要■■■ <body> <div id="side_bg"> <div id="outline"> <div id="A01">○○○</div> <div id="A02"> <div class="A02_left">○○○</div> <div class="A02_right">○○○</div> <br class="c-both"> </div> <div id="B01">○○○</div> </div> </div> </body> ■■■CSSの概要■■■ body { margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; height:100%; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } #outline { width:830px; margin:0 auto; background-color:#FFFFFF; } .c-both { clear:both;} #A01{ width:830px; margin:15px 0px 4px 0px; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; float:right; margin-top:4px; } #B01{ width:730px; margin:20px 50px; }
- ベストアンサー
- CSS
Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。よろしくお願いいたします。 <!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> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
<DIV>で作った左右段落がOpera・Firefoxでリサイズすると重なる
以下のようなソースでファイルを作ったのですが、IEやLunascapeではウインドウを小さくすると右段落（topr）が左段落（topl）の下に右配置されるのに、OperaとFirefoxでは右段落が下にずれてくれず、左段落の上に重なってしまいます。 IEのように下にずらして表示させる事はできないのでしょうか？　ご教授のほどよろしくお願いいたします。 ▼スタイルシート部分（抜粋） <style type="text/css">  </style> ▼<BODY>部分（抜粋） <div class="topl" align="center"> <table border="1" bordercolor="#0066ff" cellpadding="0" width="430" height="430" style="border-collapse:collapse"> ～TABLEの中身は省略～ </table> <br> <font size="-2">テキスト</font> </div> <div class="topr" align="center"> <br> <p id="uhhd">テキスト</p> <iframe src="frame.htm" scrolling="AUTO" name="frame" width="250" height="100px"> <a href="frame.htm">こちら</a>からご覧いただけます。 </iframe> </div> <div class="topb"> <hr width="80%" align="left"> </div>
- ベストアンサー
- HTML
スタイルシートの表示結果の違い（IEとNetscape)
スタイルシートを使ってボックスのレイアウトをしています。IE6.0ではうまくいきますがNetscape7.1では崩れてしまいます。どのようにソースを修正したらいいでしょうか教えて下さい。 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>質問用のページ</title> <style type="text/css">  </style> </head> <body> <div class="left"> ボックス１</div> <div class="center"> メインのボックス<br> IE6.0では「ボックス１」が左に配置され「メインのボックス」は右側に配置されます。<br> <br> しかしFireFox1.0やNetscape7.1では上から下へボックスが並んでしまいレイアウトが崩れてしまいます。<br> <br> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト

firefoxでdivタグの体裁崩れ