IE6でpaddingが消える問題の解決法と入れ子要素の許容範囲について
- IE6でpaddingを指定した際に、背景画像が足りなくなる問題について解決方法を考えます。
- 解決策として、宣言の変更やCSSハック、入れ子の使用を検討する必要があります。
- ただし、入れ子の使用には許容範囲があり、大枠のレイアウトを作る程度の入れ子は問題ありませんが、過度に使用するとパフォーマンスに影響が出る可能性があるため注意が必要です。
- ベストアンサー
IE6だとpaddingで指定したぶんだけ消えてしまう。。。
いま、CSSでサイトつくっているのですが、IE6だけpaddingで指定した分だけ、画像（背景）が足りません。 <h2>と<p>をくっつけて一枚の背景画像を作ろうとしています。 解決するには宣言を変えるか、CSSハック？をする、もしは<div>を入れ子するしかないのでしょうか？ また、<div>を入れ子にするのはよくないと教えていただいたのですが、どれくらいまでが許容範囲でしょうか？ いつもwrapperで囲っているので、大枠のレイアウトを作るだけでもすでに１つ入れ子状態なんですが・・・ <h2>あああああああああああああああああ</h2> <p>あああああああああああああああ </p> .h2 { background-image: url(img/flow6_01.gif); height: 37px; width: 650px; text-indent: -9999px; float: left; margin-bottom: 0px; } #p { width: 625px; height: 120px; float: right; background-image: url(img/flow1_02.gif); margin: 0px; margin-bottom: 10px; background-repeat: no-repeat; padding-left: 25px; }
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
レスを拝見した上で、以下の様なレイアウトを希望されていると判断しました。 ・元々の一枚の”画像A”はW650px×H157px（37px＋120px）というサイズ ・"flow6_01.gif"は「画像Aの上から37pxまでを切り取ったもの」 ・"flow1_02.gif"は「画像Aから "flow6_01.gif"を切り取った残りのH120px分」 ・親要素div#HOGE（所謂メイン部分と想定）のwidthが650pxで定義済み、その中で幅一杯に画像を表示 ・<h2><p>は親要素の幅と同じで上下に隙間なく並ぶだけ 以下は上記と仮定させて頂いた上でのサンプルです。表示確認はIE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPです。 サンプルの通り書式はXML宣言有り、エンコーディングはEUC-JPです。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" href="./css/common.css" type="text/css" media="all" /> <title>サンプル</title> </head> <body> <div id="HOGE"> <h2>見出し</h2> <p>パラグラフ</p> </div> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- div#HOGE { width: 650px; } div#HOGE h2 { background: url(../images/flow6_01.gif) top left no-repeat; text-indent: -9999px; line-height: 0; padding-top: 37px; margin-bottom: 0; } div#HOGE p { height: 120px; background: url(../images/flow1_02.gif) top left no-repeat; line-height: 140%; padding-left: 25px; margin: 0 0 10px 0; } ---------------------------------------------------------------------- これで別にhackも使わず宣言モードとも関係なく、ご希望のレイアウトはできます。 【修正のポイント】 ・親要素div#HOGEに固定値でwidthが定義されており、子要素<h2><p>共にその幅一杯の表示でかまわないのであれば、<h2>も<p>もブロック要素ですから幅を指定しなければそのまま親要素の幅と同じになります。これにより、<h2><p>に直接widthを定義する必要がなくなったので、左右方向のpaddingを定義してもモードに関係なくその値がwidthに加算される事はありません。 ・上下に並べるのですから、floatプロパティは（もとより）不要です。 ・<h2>にheightが指定されていると、続く<p>との間に微妙な隙間ができます。これを回避する為、line-heightを0に初期化した上で替わりにpadding-topで高さを確保しています。 ただし、Firefox2.0～とOpera9.25では、div#HOGE pの下マージンが無視されてしまう様です。回避策としては、替わりに次に来る要素にmarginやpaddhingで上方向に10pxの余白を与えるか、div#HOGE pにmargin-bottomに値を0にした上で、替わりにborder-bottomで背景と同色のソリッドな10pxの線を引く、という手もあります（ただし親要素div#HOGEの背景が単一の色で塗りつぶされている場合に限ります。背景画像がレンダリングされている場合はこの手は使えません）。 多分、質問者様はfloatの使い方がまだよくわかっておられないと思いますので、あれこれチャレンジするのも結構なんですが、まずはCSSのシンタックスと各プロパティの性質、という基礎的な知識を一刻も早く身につけられる様に、充分に勉強なさって下さい。floatやposition（別スレッドではこちらの理解にも不安要素が見受けられました）はちゃんと理解しないで当てずっぽうに使用すると、致命的なレイアウト崩れに直結しますから、要注意です。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
そもそもCSSのセレクタが全く違っていますが、これは単なるコピペのミスですか？ 【誤】 .h2 {（省略）} #p {（省略）} これだと、上は「タグの種類を問わない"h2"というclass」ですし、下は「タグの種類を問わない"p"というid」という定義になってしまい、サンプルであげられたHTMLには全く適用されなくなりますが？ 【正】 h2 {（省略）} p {（省略）} という記述の間違いだと解釈させて頂いた上で。「<h2>と<p>をくっつけて一枚の背景画像を作ろうとしています。」と仰っていますが、「一枚の背景画像」を仮に”画像A”とすると、CSSでの定義からして”画像A”はW650px×H157px（37px＋120px）というサイズ、でしょうか？そして"flow6_01.gif"は「画像Aの上から37pxまでを切り取ったもの」であり、"flow1_02.gif"は「画像Aから"flow6_01.gif"を切り取った残りのH120px分」でしょうか？ サンプルのマークアップでは、<h2>が左にフロートし、続く<p>が右にフロートしているので、（未知の親ボックスの幅を考えなければ）<p>は<h2>の下ではなく、右にレイアウトされてしまい、上下に分割された筈の画像が左と右に並んでしまいますが、そういうレイアウトを意図しているわけではないですよね？おそらくは、 以下のマークアップに対し、 <h2>見出し</h2> <p>パラグラフ</p> 表示結果は以下の様なレイアウトとなることを期待しているのではないですか？ --------------------------------------------------------------------- 見出し（"flow6_01.gif"をW650px×H37px領域にぴったり描画） --------------------------------------------------------------------- パラグラフ（"flow1_02.gif"をW650px×H157px領域にぴったり描画） --------------------------------------------------------------------- > 解決するには宣言を変えるか、CSSハック？をする、もしは<div>を入れ子するしかないのでしょうか？ 解決法はそういう問題点以前のところにあるかもしれないですね。どういうレイアウトにしたいのか、もう少し具体的に詳細を明らかにしていただけませんか？<h2>のテキストは"text-indent: -9999px;"で表示領域から外しているということは背景画像のみが表示されるのでしょうが、その背景画像は、ちゃんと「見出し」の意味をもった画像ですか？そうでなければ<h2>でマークアップする事自体が不適当になります。また、<p>の方は中のテキストデータをそのまま表示させるスタイルの様ですが、その内容は"height: 120px;"を余裕で超えない程度のボリュームですか？もしテキストデータの量が多かったり、ブラウザ側で文字サイズを大きくされたりした結果、そのボリュームが高さ120pxを相対的に超えてしまったらその分は「はみ出して」表示されてしましますが、その場合、後に続くブロックとのレイアウトに支障はないのでしょうか？ > <div>を入れ子にするのはよくないと教えていただいたのですが、どれくらいまでが許容範囲でしょうか？ ケースバイケースですね。デザイン優先で超入り組んだレイアウトを実現しなければならない時は不承不承入れ子も多くなる事もありますが、デザインが論理的意味づけのしやすいものであれば、<div>以外のタグでのマークアップが容易になる事もありますので、その場合は少なくできますし。デザインとの兼ね合いで、一概には決められないですよ。ただ、そのデザインに応じて最良と思えるマークアップを心がければ自ずと入れ子は減って行くでしょう。
お礼
いつも本当にありがとうございます。 おっしゃる通りの、ぴったり描画のレイアウトを期待していました。 背景などは一応見出し部分になっています。 また、<p>の部分は文章量としてはかなり少ないのではみ出すことはないと思います。 本当だったら画像を作る前にちゃんと考えて作っていけばよかったんですが・・・ 本当に勉強になります。
- Nine-nine
- ベストアンサー率49% (25/51)
ははは、ハック以前に基本を学ぼうよ。 アップされたｃｓｓはアップされたｈｔｍｌには有効ではないです。 なぜなら ｈ2というクラスと、ｐというidに対する指定です。 が、 h2というクラスもpというidも現在のソースには存在しません。 人間には拡大解釈する能力がありますが、推測することは出来ますが、ブラウザにはそのような能力はありません。ブラウザにも伝わるように文法にのっとって記述してやらないと拡大解釈するブラウザとしないブラウザが出てきます。タグもクラス名もid名もごっちゃにしてしまっていますよ。 それと、paddingやieの話だと宣言もお願いできますか？
お礼
ありがとうございます。 すみません・・・消すの忘れてました。 これからはチェックして書き込みます。
関連するQ&A
- paddingを指定すると、marginが広がります。
はじめまして。 現在CSSでHPを作成しているのですが、タイトルにあるように、paddingを指定すると、marginが広がってしまいます。 topのpaddingを指定するとtop-marginが・・・ bottomを指定すると・・・ のような感じです。 原因と解決方法を教えていただけないでしょうか？ #news { width: 180px; height: 110px; background-image: url(img/news.gif); margin-top: 15px; padding-top: 30px; background-repeat: no-repeat; padding-bottom: 20px; padding-left: 20px; } レフトに配置しています。
- ベストアンサー
- HTML
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #b{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 144px; height : 240px; float : left; display : inline; } #c{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- 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
- 背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> > あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }
- 締切済み
- HTML
- DIV内の padding について
下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか？ よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }
- ベストアンサー
- HTML
- FireFoxで見るとdiv間に隙間が・・・
divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。
- ベストアンサー
- CSS
- 【css】floatを指定するとはみ出します
ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。 その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？ それとも、自分の記述がおかしいのでしょうか？ 例えば下記の例です。 こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aaa{ margin-bottom: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; clear: both; } .left{ float: left; height: 120px; width: 180px; } .right{ float: left; padding-left: 10px; width: 380px; } .title{ font-size: 90%; line-height: 120%; padding-right: 10px; padding-left: 10px; width: 360px; padding-top: 3px; padding-bottom: 1px; clear: both; } .comment{ font-size: 80%; line-height: 120%; padding: 5px; clear: both; }
- 締切済み
- HTML
- IE6に出る不具合
お世話になっております。 角に丸みを持たせたボーダー（罫線）を作っているのですが、IE7、IE8、FireFoxでは描いたとおりの表示となったのですが、IE6だけ、4pxほどの隙間が出来てしまいます。 CSS側 .main-border-top{ width:660px; height: 8px; float: right; background-image: url(http://localhost/public_html/type2/image/border-line-660-top.gif); /*この画像は、ボックスの蓋？になる左右が回り込んだ形状の画像です。660×8の大きさ*/ background-repeat: no-repeat; margin-bottom: 0px; padding-bottom: 0px; } .main-border{ margin-top: 0px; padding-top: 0px; width:658px; border-left: 1px solid #969696; border-right: 1px solid #969696; float: right; text-align:left; } .main-border-bottom{ width:660px; height: 8px; float: right; margin-bottom: 20px; background-image: url(http://localhost/public_html/type2/image/border-line-660-bottom.gif); /*この画像は、ボックスの底？になる受け皿状の画像です。660×8の大きさ*/ background-repeat: no-repeat; } html側 <div class="main-border-top"> </div> <div class="main-border"> <!--ボーダー内ここから--> <p><b>お知らせ</b></p> <p>ホームページリニューアル・ホームページリニューアル・ホームページリニューアル・ホームページ</p> <p>テスト・テスト・テスト・テスト・テスト・テスト・テスト</p> <!--ボーダー内ここまで--> </div> <div class="main-border-bottom"> </div> 言葉だけでうまく説明できないので、画像も添付しますが、画像の通り、上の蓋の下に隙間が出来てしまい、高さは8pxと指定しているにもかかわらず14pxの幅（高さ）を占領しており、画像との差、6pxの幅の隙間が出来てる状況です。 お忙しい中恐縮ですが、アドバイスのほど宜しくお願いいたします。
- ベストアンサー
- HTML
- divの入れ子が上手くいきません。
.line { background-image: url(../img/line.gif); background-repeat: no-repeat; background-position: left bottom; display: block; padding: 0px; clear: both; width: 600px; height:auto; margin: 0px; } .left{ width:210px; height:90px; float:left; text-align:center; padding:10px 5px 10px 0px;} .right{ width:360px; height:90px; float:left; padding:10px;} <div class="line"> <div class="left">あああ</div> <div class="right">いいい</div> </div> 上記のようにlineでleftとrightを内包したいのですが、IEでは表示されるのですが、fox・safariで確認すると画像が消えてしまいます。 どうもdivで括っているせいかline内に文字が入っていないと認識されているようで、ためしに適当な数字を入れてやると認識されました。 また、lineのheightをpx指定してやると表示されるのですが、lineは使いまわしたいクラスなので、縦を固定することができません。 どうしたら解決しますか？
- ベストアンサー
- HTML
お礼
ありがとうございます。 実は親要素、子要素、孫要素についても最近やっと覚えたばかりでして・・ なんとなくでfloatについて理解していたつもりでいましたが、まだ全然のようです。positionについては意識したこともありませんでした。。。まだまだ、初心者の壁をやぶれそうにないです・・・ さっそくいただいたものを試してみます。 いつも本当にありがとうございます。