プロが教えるわが家の防犯対策術！

IE6だとpaddingで指定したぶんだけ消えてしまう。。。

解決済

  • 質問者：innova
  • 質問日時：
  • 回答数：3件

いま、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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： 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（別スレッドではこちらの理解にも不安要素が見受けられました）はちゃんと理解しないで当てずっぽうに使用すると、致命的なレイアウト崩れに直結しますから、要注意です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
実は親要素、子要素、孫要素についても最近やっと覚えたばかりでして・・

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

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

通報する
お礼日時：2008/04/09 23:08

No.2

  • 回答者： 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>以外のタグでのマークアップが容易になる事もありますので、その場合は少なくできますし。デザインとの兼ね合いで、一概には決められないですよ。ただ、そのデザインに応じて最良と思えるマークアップを心がければ自ずと入れ子は減って行くでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

いつも本当にありがとうございます。

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

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

本当に勉強になります。

通報する
お礼日時：2008/04/09 03:57

No.1

  • 回答者： Nine-nine
  • 回答日時：

ははは、ハック以前に基本を学ぼうよ。



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

それと、paddingやieの話だと宣言もお願いできますか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

すみません・・・消すの忘れてました。
これからはチェックして書き込みます。

通報する
お礼日時：2008/04/09 03:51

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報