- 締切済み
ブラウザ間でのdiv幅の違い
次のようなdivの入れ子を作ったのですが、 IEとFirefoxで大きさが違って表示されてしまいます。 FirefoxでもIEと同じ幅、同じ見ためで表示させるには 何をどのように指定してやれば良いでしょうか。 よろしくお願いします。 <html> <head> <style type="text/css"> <!-- .blue {width:200px; padding:10px; background-color:#0000ff;} .green {width:180px; padding:5px; background-color :#00ff00;} --> </style> </head> <body> <div class="blue"> <div class="green">ここが180px</div> </div> </body> </html>
- 44100hz
- お礼率55% (11/20)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- partita
- ベストアンサー率29% (125/427)
ヒントです。 ・<html>を書き換える。→「DOCTYPE宣言」 ・marginを設定する ・marginやpaddingはブラウザごとに初期値が異なる ・有名な「IE・ボックスのバグ」はご存知？ ・フォントサイズは指定しなくていいのかな？
関連するQ&A
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- 隙間があく理由
以下のHTMLを見ると隙間がキャンバスの下に開きます。 クロム IE ファイヤーフォックス似て確認。 なぜあくのかわかりません。教えてください。 ------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <style> <!-- *{ margin:0px; padding:0px; border:none; } canvas{ width:100px; height:50px; background-color:red; } div{ width:100px; height:50px; background-color:green; } --> </style> </head> <body> <canvas></canvas> <div> </div> </body> </html> --------------------------------------
- ベストアンサー
- CSS
- div配置のことで質問です。
div配置のことで質問です。 こんにちは。タイトル通りなのですが、divタグがうまく使えません。 いろいろなサイトを参照しましたが、解決できないのでこちらで質問させてください。 お聞きしたい事は3点あります。 （下の方に画像をつけているので参照しながらお願いします。） 1.画像上の黄色のdivくくりを水色の隣に持っていきたいということ 2.赤からオレンジまでの固まりをセンターに持っていきたいということ（横です） 3.紫のdivくくりをpadding:40;に指定すると上下左右に40pxずつ幅が広がってしまうのですが、サイズはwidth900×height500のまま内側に40px余白を作りたいということ もしおわかりになる方がいらっしゃいましたら、教えていただけると幸いです。 どうぞよろしくお願いいたします。 ■スタイルシート /*------------------------------------------------------------------ */ * { margin: 0; padding: 0; } body { text-align: center; background-color: #ffffff; } body div { margin: 0 auto; border : 0 ; } /*------------------------------------------------------------------ブロック要素 */ div.all { width: 900px; margin:0; padding: 0px; } div.aka { text-align: left; width: 900px; margin:0; padding: 0px; background-color: #ff0000; } div.murasaki { font-size:10pt ; text-align: left; width: 900px; height:300px; margin:0; padding:40px; background-color: #aaaaff; } div.mizu { font-size:10pt ; text-align: left; width: 500px; margin:0; padding:0px; background-color: #00ffff; } div.kiiro { font-size:10pt ; text-align: left; width: 400px; margin:0; padding:0px; background-color: #ffff00; } div.orange { font-size:10pt ; text-align: right; width: 900px; margin:0; padding: 0px; background-color: #ff6600; } ■ボディ内 <div class="all"> <!--ーーーーーーーー赤色--> <div class="aka"> テスト </div> <!--ーーーーーーーー紫色--> <div class="murasaki"> テスト </div> <!--ーーーーーーーー水色--> <div class="mizu"> news<br /> <table cellspacing="0" cellpadding="0" width="500"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーー黄色--> <div class="kiiro"> topics<br /> <table cellspacing="0" cellpadding="0" width="400"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーーフッター--> <div class="orange">テスト</div> </div> 長々とすみません。よろしくお願い致します。
- ベストアンサー
- HTML
- 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の入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 締切済み
- HTML
- 左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
- ブラウザの横幅イコール100％ではない？
以下のコーディングで、各色、1行になる筈なのですが、上手くいかず困っています。根本的に何かを間違えているようで、思ったようになりません。何を勘違いしているのか、どうすればいいのかを教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>無題ドキュメント</title> <style type="text/css"> body{margin:0;padding:0;width:600px;} h1{margin:0 1%;width:98%;background:#ffbbbb;} div{float:left;padding:2em;margin:0 1%;} .test2{width:48%;background:#ffdddd;} .test3{width:31.3%;background:#ddffdd;} .test4{width:23%;background:#ddddff;} .test1{width:98%;background:#ffffcc;} </style> </head> <body> <p>body{margin:0;padding:0;width:100%;}</p> <h1>見出し1 h1{margin:0 1%;width:98%;}</h1> <div style="margin:0;width:100%;background:#eeeeee;height:30px;padding:1em;">div 共通{float:left;padding:2em;margin:0 1%;}</div> <div class="test2">div.test2{width:48%;赤}</div> <div class="test2">.test2（左右1％のマージンと48％のコンテンツで50％）が2個で100％のつもり</div> <div class="test3">div.test3{width:31.3%;緑}</div> <div class="test3">.test3（左右1％のマージンと31.3％のコンテンツで33.3％）が3個で99.9％のつもり</div> <div class="test3">.test3</div> <div class="test4">div.test4{width:23%;青}</div> <div class="test4">.test4（左右1％のマージンと23％のコンテンツで25％）が4個で100％のつもり</div> <div class="test4">.test4</div> <div class="test4">.test4</div> <div class="test1">.test1{width:98%;黄}（左右1％のマージンと98％のコンテンツで100％）のつもり</div> </body> </html>
- ベストアンサー
- CSS
- IE7でのhoverについて
IE7からhoverがa以外の要素にも適用できるようになったという情報を見たのですが 以下のような記述だとhoverが機能しませんでした。 （Firefoxでは以下の記述で機能しました） <html> <head> <style type="text/css"> .test {width: 120px; height: 120px; background-color: #FFFFFF;} div.test:hover {background-color: #FF0000;} </style> </head> <body> … <div class="test"> 文章がここに書いてあります。 </div> … </body> </html> IE7では機能しないような何かマズイ記述方法をしてしまっているのでしょうか？ ちなみにサイトの仕様上htmlの構造はいじることができません。 足りない部分は別途補足させて頂きますのでご教授の程よろしくお願いします。
- ベストアンサー
- HTML
- この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
お礼
解決しました。ありがとうございました。