CSSのposition指定で親要素の背景色が欠ける

質問

ＣＳＳのposition指定しています。
相対指定の上に絶対指定のボツクスが乗るようにしました。
相対指定のボックスには<ul>があり、<li>ひとつずつにクラス指定で背景色をつけています。

Dreamweaver8のレンダリングではきれいに表示されていますが、ＩＥ６プレビューすると<li>の背景色が消えているものがあります。
ＣＳＳには様々なルールがありますが、してはいけないことをしてるでしょうか？

下にhtmlとCSSを記述しますので、よろしくお願いします。

HTML****************
<div id="schedule">
<p class="nendo">* 2007年度 *</p>
<ul class="sche_date">
<li class="date_back1">02月18日(日)<strong class="finished">終了</strong></li>
<li class="date_back2">03月18日(日)<strong class="finished">終了</strong></li>
<li class="date_back1">04月15日(日)<strong class="finished">終了</strong></li>
<li class="date_back2">05月20日(日)<strong class="finished">終了</strong></li>
<li class="date_back1">06月17日(日)<strong class="finished">終了</strong></li>
<li class="date_back2">07月15日(日)<strong class="uketuke">受付中</strong>　</li>
<li class="date_back1">08月19日(日)<strong class="uketuke">受付中</strong>　</li>
<li class="date_back2">09月16日(日)<strong class="notyet">－－－</strong></li>
<li class="date_back1">10月21日(日)<strong class="notyet">－－－</strong></li>
<li class="date_back2">11月18日(日)<strong class="notyet">－－－</strong></li>
<li class="date_back1">12月16日(日)<strong class="notyet">－－－</strong></li>
</ul>
<p class="nendo">* 2008年度 * </p>
<ul class="sche_date">
<li class="date_back1">01月20日(日)<strong class="notyet">－－－</strong></li>
<li class="date_back2">02月17日(日)<strong class="notyet">－－－</strong></li>
<li class="date_back1">03月16日(日)<strong class="notyet">－－－</strong></li>
</ul>

<div id="procedure">
<p class="jyuken">受験手続</p>
<p>★07月15日(日)受験★</p>
<div class="kigen">
<p>お申込み期限　～6月27日(水)</p>
<p>受験料払込期限　～6月27日(水)</p>
</div>
<p>&nbsp;</p>
<p>★08月19日(日)受験★</p>
<div class="kigen">
<p>お申込み期限　～7月27日(金)</p>
<p>受験料払込期限　～7月27日(金)</p>
</div>
</div>
</div>

CSS****************
#second #schedule {
position: relative;
width: 500px;
margin-right: 50px;
margin-left: 50px;
}
.sche_date li {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 40px;
border-bottom: 1px dotted #666666;
}
.date_back1 {
background: #DBDBDB;
}
.date_back2 {
background: #F0F0F0;
}
#procedure {
position: absolute;
left: 298px;
top: 40px;
width: 250px;
background: #FFFFFF;
border: 1px solid #666666;
padding-bottom: 10px;
}
#procedure p {
padding-right: 10px;
padding-left: 10px;
}
#procedure .jyuken {
background: #FF6600;
color: #FFFFFF;
text-align: center;
margin-bottom: 10px;
}
#procedure .kigen {
padding-left: 30px;
}
.finished {
color: #0000FF;
padding-left: 25px;
letter-spacing: 0.3em;
}
.uketuke {
color: #FFFFFF;
background: #FF0000;
line-height: 100%;
padding: 2px 5px;
margin-left: 15px;
}
.notyet {
margin-left: 20px;
}
以上****************

回答No.6

Joka · ベストアンサー

こんばんは。
↓犯人はコイツな気がします。
<strong class="finished">終了</strong>

<strong>タグは表示を司るもので、ＣＳＳでコントロールすべきですよね。
<strong>～</strong>でくくられている部分を全部<span>～</span>としてみてください。
で、CSSの方に
span { font-weight: bold; }
を入れておけば、strongタグの代わりになって全部太文字になります。
他の表示に影響は無いはず・・・です。

補足

おぉっ！
解き放たれたようにシマシマがでてきました！

すみません、さらに質問を・・・　<span>タグは使用してもいいのですか？
使用を推奨されない部類ではなかったかと思い、使うのを控えていたのですが・・・私の思い違いですか？

回答No.8

Joka

spanはdivと対になっているようなタグだと思います。
ある部分だけにスタイルを適用させたいときに使います。
なので、非推奨ではないと思います。
詳しくはこちらなどで。
http://www.tohoho-web.com/html/span.htm

strongは、b等と同じで、見映え指定だけのタグですから、できればＣＳＳを使ってね、ということで、廃止の方向ということです。http://www.htmq.com/html/strong.shtml

お礼

う～ん、ナルホド・・・
私は思い違いをしていたようです(^_^;)
<b>と<i>が廃止となり、<strong>と<em>が取って代わったと。
そして、<span>は非推奨と思っていたので必死で<strong>と<em>にクラスをつけていました(>_<)

この勘違いがとけて良かった！
けど、今からやり直しだ～(＠_＠;)
とにかく、ありがとうざいました！

回答No.7

Joka

たびたびごめんなさい。
下の答間違ってました。申し訳ないです。
strongは犯人じゃなかったです・・・
その上の
<p class="nendo">* 2007年度 *</p>
ここが影響していました。
この"nendo"というクラス指定は質問記載ＣＳＳには無いですよね。
たとえば、.nendo { background: #ffffff; }
と入れてみると、なぜか、下欄のしましまが出ます。
.nendo　としなくても、pタグだけに背景色指定をするだけでもシマシマ（つまり次のliに対する設定）が反映されました。
要素の継承の関係だと思うんですが、ごめんなさい、何が継承して、何がしないのか、良くわかってません。

何度も余計なこと言ってスミマセンでした。
うまくいけばいいのですが・・・

回答No.5

Joka

すみません。追記です。
#secondと言うより#scheduleの方があやしいです。
htmlの方の<div id="schedule">を<div>だけにして試してみてください。
なんかうまく表示されてるんですけど。
CSSの書き方そのものとしては間違ってはいないんじゃないか、と思うんですが、やはりそれ以外のタグの干渉があるんじゃないかな、と言うのが正直な印象です。

ＰＳ一度書いた回答を編集できないので、回答数が増えちゃってすみません・・・

補足

いえ回答数は気になさらないでください。
私もよくあることですので(^_^;)
それより、返事おそくなりすみません。

＞htmlの方の<div id="schedule">を<div>だけにして試してみてください。

シマシマは出ましたが、幅指定ができないのでちょっとマズイです・・・
現在は質問に記述したHTMLとCSSのみで検証しているので、他のタグは干渉してません。
相対値・絶対値指定ではこうなるものなのでしょうか？？

回答No.4

Joka

こんばんは。
#second コレを消すとおっしゃるような不具合が出ました。
こうなりますと、ＨＴＭＬファイル全体のタグを検証しないと無理そうですよ・・・

回答No.3

Joka

ごめんなさい、もう一つ。
私はあくまで質問に書かれたタグのみに<head> とか<body>を加えてhtmlファイルとして完結させて、ｃｓｓと関連付けをしてみた結果です
。
前の補足に書かれているような不具合は出てません。
一行おきに背景色が付きます。
画面サイズを変えてもそれなりにきれいに見えています。
たぶん書かれているタグ以外にもタグがあるんでしょうから、もしかしたら、その辺が干渉していたりしませんか。

補足

ありがとうございます。するどいかも・・・
上にも下にもタグはたくさんついてます(ーー;)
ですが、余分なタグとＣＳＳをどんどん削除してもシマシマはでてきませんでした。
それでは、と記述した部分のみでしてみると・・・#scheduleのwidthを狭めるとシマシマが消えます。
ちなみに、#secondはこのhtmlには存在しないので削除して試してみてください。
なぜでしょう？
これってルール違反ですか？

回答No.2

Joka

こんばんは。
そうですか。黒が出ませんか・・・
不思議ですね。
あ、書き忘れましたが、こちらもＩＥ6.0　XPです。
編集はezhtmlというエディタ使用。
やはり#dcdcdcや#f0f0f0ですと薄くて判別できない。
少しずつ濃くしていったら出ました。
さて・・・・弄ったのはカラーコードだけなんですけど。
なんでだろう？

回答No.1

Joka

指定した色が薄すぎて、白と判別できないだけではないかと。
ためしに
.date_back1 {background: #DBDBDB;}の色を黒（#000000)に変えたら黒く表示されたので、そう思いました。
書き方は間違ってないと思いますけど。

補足

お返事ありがとうございます。
教えていただいたように黒にしましたが、私のＩＥ６では完全には表示されません。
8/19から12/16までは常にきちんと表示されますが、それ以外の７月と８月も背景色がでません。
しかも、ＩＥを最大化、最小化を切り替えると表示状態が変わります。「以外」の部分の表示されるところが増えたり、減ったり、です。
なぜだろう・・・？
不思議です。どうしたらいいのでしょう？