ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：noname#64096 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;
}
質問投稿日時：08/04/08 20:26
質問番号：3933090
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：abril レスを拝見した上で、以下の様なレイアウトを希望されていると判断しました。

・元々の一枚の”画像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（別スレッドではこちらの理解にも不安要素が見受けられました）はちゃんと理解しないで当てずっぽうに使用すると、致命的なレイアウト崩れに直結しますから、要注意です。
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/04/09 12:51
回答番号：No.3
この回答へのお礼ありがとうございます。
実は親要素、子要素、孫要素についても最近やっと覚えたばかりでして・・

なんとなくでfloatについて理解していたつもりでいましたが、まだ全然のようです。positionについては意識したこともありませんでした。。。まだまだ、初心者の壁をやぶれそうにないです・・・

さっそくいただいたものを試してみます。
いつも本当にありがとうございます。

回答

 
回答者：abril そもそも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>以外のタグでのマークアップが容易になる事もありますので、その場合は少なくできますし。デザインとの兼ね合いで、一概には決められないですよ。ただ、そのデザインに応じて最良と思えるマークアップを心がければ自ずと入れ子は減って行くでしょう。
種類：補足要求
どんな人：専門家
自信：参考意見
回答日時：08/04/08 21:53
回答番号：No.2
この回答へのお礼いつも本当にありがとうございます。

おっしゃる通りの、ぴったり描画のレイアウトを期待していました。
背景などは一応見出し部分になっています。
また、<p>の部分は文章量としてはかなり少ないのではみ出すことはないと思います。

本当だったら画像を作る前にちゃんと考えて作っていけばよかったんですが・・・

本当に勉強になります。

回答

 
回答者：Nine-nine ははは、ハック以前に基本を学ぼうよ。

アップされたｃｓｓはアップされたｈｔｍｌには有効ではないです。
なぜなら
ｈ2というクラスと、ｐというidに対する指定です。
が、
h2というクラスもpというidも現在のソースには存在しません。
人間には拡大解釈する能力がありますが、推測することは出来ますが、ブラウザにはそのような能力はありません。ブラウザにも伝わるように文法にのっとって記述してやらないと拡大解釈するブラウザとしないブラウザが出てきます。タグもクラス名もid名もごっちゃにしてしまっていますよ。

それと、paddingやieの話だと宣言もお願いできますか？
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/08 21:44
回答番号：No.1
この回答へのお礼ありがとうございます。

すみません・・・消すの忘れてました。
これからはチェックして書き込みます。
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ