- 締切済み
パディングを使ったボックス
パディングを使用してボックス内のテキストにマージンを作りたいのですが、突然いつも通りに作れなくなり途方にくれています。 例えば、200ｘ200のボックスで背景に同じく200ｘ200の画像を設定します。そしてボックス内のテキストを左上から10ｐｘほど中に寄せて表示させます。 いつもだとcssのソースは .box{ background:url(images/box.gif) no-repeat top left; width:190px; height:190px; padding-top:10px; padding-left:10px; padding-bottom:0px; padding-right:0px; } と書いてました。 しかし、突然、このままだと190ｘ190のボックスになってしまうようになりました。ちなみにfirefoxだと普通に200ｘ200のボックスで表示されます。IE6だと190ｘ190になります。 なので試しにパディングはそのままで200ｘ200にしたところ正しく表示されました。そのかわりやっぱりというかfirefoxだと210ｘ210のボックスになってしまいます。 それだけではなく100ｐｘの幅の背景画像を使ってタイトルバーを作ろうとして左のパディングを10pxにして90pxのボックスを作ったら、90pxの幅で左に10pxの余白がある状態になってしまいます。 使っているのはドリームウィーバーです(Studio8)。なにか環境設定で設定するところがあるのでしょうか？もしくはHTMLの宣言に重要なヒントがあったりするのでしょうか？ 今のところ、ハックを使用してダブルでCSSを書いていますが、調整に果てしなく時間がかかり、途方に暮れています。 どなたかお助けください。よろしくお願いします。
- yassan3507
- お礼率75% (9/12)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- steel_gray
- ベストアンサー率66% (1052/1578)
↑こちらのバグでしょうか。 http://members.at.infoseek.co.jp/cssbug/detail/winie/b001.html ↑ここでいわれている「標準モード」とか「互換モード」についてはこちら http://members.at.infoseek.co.jp/cssbug/detail/winie.html
関連するQ&A
- safariでの横並びリスト（List）CSSずれについて
CSSマスターの方にご質問させていただきます。 現在横並びリストを制作しようとしております。 リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。 IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。 <UL id="sitemenu"> <LI id="side">あいうえお <LI id="side">かきくけこ </UL> /***********LI設定***********/ #side A{ width:60px; //幅 height:40px; //高さ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; background-image : url(背景.gif); //背景 background-position : 0px 0px; no-repeat; text-align : center; //文字の位置 text-decoration : none; //文字飾り vertical-align : top; //文字の高さ padding-top : 10px; //パディング高さ float : left; } #side A:hover{ background-position : 0px -40px; no-repeat; } /***********UL設定***********/ #sitemenu{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; border-width : 0px 0px 0px 0px; vertical-align : top; text-align : left; list-style-type : none; float : left; } #sitemenu LI{ float : left; } なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。
- ベストアンサー
- HTML
- CSSのボックスのブラウザごとの解釈の違いについて
見出し（h3）と内容をそれぞれ罫線で囲んだものをCSSで作るため、以下のCSSを作りました。 IEでもFirefoxでも思ったように表示されました。 見出しと内容部分のwidthとborderとpaddingを足した数値を同じにしたので、IEで見出しと内容部分の幅が同じに表示されるのはいいのですが、Firefoxでも幅が同じにに表示されるのはなぜでしょうか？widthだけの幅は違うので、見出し(h3）の方が2px狭く表示されると思ったのですが・・・ そもそもの考え方が間違っているのでしょうか。 ご教授のほど宜しくお願い致します。 h3 { font-size: 13px; padding: 3px 3px 3px 5px; border-top: 1px solid #009933; border-right: 1px solid #009933; border-left: 5px solid #009933; margin: 0px; width: 286px; } p { font-size: 11px; border: 1px solid #009933; margin: 0px; padding: 5px; width: 288px; line-height:130%; }
- 締切済み
- HTML
- 【至急】ボックスの高さ指定
base（３つのボックスを包囲する）のボックスに背景画像をつけています。baseの中にboxを３つ横に並べてます。 ■box左は画像（背景黒でパディングで画像に黒枠をつけているようにみせている※アウトラインでやったらIEだと表示されなかったので） ■box真ん中は仕切り線（背景はなし） ■box右はテキスト（背景グレー）にしてます。 質問内容： box右【テキストの高さ】に合わせて、baseの【背景画像】とbox真ん中の【仕切り線】を延長させるにはどうすればいいのでしょうか？ （html） <div class="base"> <div class="box1_img"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3_text"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; } .base { width: 618px; height: 100%;（←分からない？？） margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1_img { width: 130px; height: 97px; margin: 0; padding: 2px; float: left; background: black; } .base .box2_line { width: 2px; height: 100%;（←分からない？？） margin: 0 10px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3_text { width: 450px; margin: 0; padding: 5px; float: left; text-align: left; background: #eee; } ul .list-y{ font-weight: bold; text-align: left; } とっても切羽詰まってます！！ すぐに回答いただけると、とっても助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- Firefox と IE での padding の認識の違いについて
CSS にて padding の記述をしているのですが、IE と Firefox で padding の認識の仕方が違い困っております。 例えば、幅100px の枠に左右の padding を 10px 指定した場合、幅100px の内に 10px の padding を取るのが IE であり、幅100px の外側に改めて padding 10px 取る（最終的に幅が120pxになる）のが Firefox であるようにです。 CSS例 #header { float: left; padding: 0 20; width: 100; height: 20; text-align: right; } このIE と Firefox の違いを解決する方法をご存知の方いらっしゃれば教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSSでボックスのheightが0になる
http://css-happylife.com/ 上のサイト(私のサイトではないです)で、 <div id="contentsInner"> <div id="main"> </div> <div id="sub"> </div> </div> という部分があります。 CSSはだいたい下のような感じです。 #contentsInner { margin:0pt auto; position:relative; width:910px; } #main { float:left; overflow:hidden; width:500px; } #sub { float:right; margin-top:20px; padding:8px 0pt 8px 10px; width:390px; } Firebugで確認したところ、 #mainの大きさは500 x 1552 #subの大きさは390 x 1305 に対し、 #contentsInnerの大きさは910 x 0 と、高さが0になっています。 もちろん、#contentsInnnerに背景画像を設定しても 表示されることはありません。 ブラウザもheight=0と認識しているようです。 なぜ高さが0になってしまっているのでしょうか。 このバグ？の対策を教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
- CSSでmarginを指定すると、表示の仕方がブラウザによって変わってしまいます。
はじめまして、CSS初心者です。 お聞きしたいことがあります。 ---CSS--- body{ margin:0px; padding:0px; } #formbox{ width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; } ---HTML--- <div id="formbox"> <div id="box">ほげほげ</div> </div> というHTMLをIE6.0とfirefox1.5で表示させたときに、 <div id="box">のmargin-leftがIE6.0だと60pxぐらいになってしまいます。firefoxでは、30pxとられているようなのですが…。 IE6.0とfirefox1.5で誤差が生じしてしまうのはなぜなのでしょうか。 どなたかご教授お願いできないでしょうか。 よろしくお願い申し上げます。
- ベストアンサー
- 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を利用しています。 ＩＥだと場合によっては普通に表示されるのですが、FireFoxだと文字がどでかく表示されてしまって、レンタルスペースはＦＣ２を使っているのですがページの最後に表示されるはずの広告が文字列の中に割り込んでいたりして、表示がめちゃくちゃになってしまいます。 ちなみに使っているcssは * { margin:0; padding:0; } html { text-align:center; height:100%; } body { width:600px; height:100%; text-align:left; } #HEADER img { display:block; } #NAV { float:left; width:200px; height:100%; margin-top:-100px; padding-top:100px; } #CONTENT { width:650px; height:100%; margin-top:-100px; padding-top:100px; margin-left:200px; } です。index.htmlのbody部分にはfontの大きさは全く指定していません。 よろしければFireFoxでご覧になってみてください。 http://clovermiwa.web.fc2.com/ 私はＨＴＭＬをかじったくらいで、cssについては全く分かりません。 ＨＴＭＬが間違っているのかもしれません。 色々いじってみましたが、問題が解決されず、困っています。 よろしければご教授、お願い致します。
- ベストアンサー
- HTML
- IEだけで配置したボックスがずれて困っています。
DIVでボックスを配置してレイアウトをしています。 IE以外では、問題なく中央に配置されるのに、 IEのバージョン関係なく、上のボックスがずれてしまいます。 スターハックなどを使ってもダメでした。 問題箇所を下記に明記しますので、解決策を教えてください。 宜しくお願いします。 .top p{ background-image:url(../img/basis/br.gif); background-repeat:repeat-x; width:720px; height:35px; z-index:2; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 40px; padding-bottom: 0px; padding-left: 40px; text-align: center; float: left; position: relative; border: 1px solid #0033FF; } .h2-img{ width:800px; padding:0px; margin:0px auto 0px auto; border: 1px solid #009900; background-color: #009900; } /*---メニュー類---*/ .m-bar { border: 0; padding:0; overflow:hidden; height:35px; width:720px; position:relative; margin-top: 60px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: left; right: 0px; float: left; display: block; background-color: #333399; }
- 締切済み
- CSS
- ボックスに背景を指定した時、firefoxでうまく表示されない
CSS初心者です。 タイトルの通りなんですが、ボックスにbackground-imageで背景を指定して、ブラウザで表示させると、IE6.0だとちゃんと表示されますが、firefoxだと表示されません。 サンプルソースを書きます。 -HTML- <div id="formbox"> <div id="box01">テストテスト</div> </div> -CSS- #formbox{ background-image: url(./img/bg.gif); background-repeat: no-repeat; width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; background-color:skyblue; float:left; } どなたかご教授お願いできませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
返信のほど遅れて申しわけございません。 あのあとかなり苦戦しながらしらべたところ、HTMLの宣言文が互換モードではないのが原因のようでした。 アドバイスありがとうございました。感謝感謝です。