本日の勉強。
進度
これまでに残った課題
- #6:
min-height:100%;と`height:100%;の両方を指定する理由。 - #8:submenuがsidebarの中央に配置されてしまう。
- #8:レッスンでは表示されないビュレットが表示される。
メモ
-
min-height:100%;と`height:100%;の両方を指定する理由。
色々調べてみましたが、どうやらIE6などのmin-heightがうまく機能しないブラウザへの対策ではないかと思われます。
IE6ではこれを指定しても中身が少ないと100%に満たない表示になってしまうそうです。
そのため、
#container {
min-height: 100%; /*他のブラウザ用*/
height: 100%; /*IE6用*/
}
と記述する必要があるようです。
でもレッスン内では結構ブラウザ毎の表示への配慮については一先ずとばして来ているように思えるので、
本当にこれだけが理由かは定かではありません。
なので今後も色々調べるときに気にかけてみようと思います。
- #8
この二つは敢えて一緒に書きますが、どうやら原因はCSSのリセットにありそうです。
まずsubmenuが中央配置になる理由ですが、これはリスト要素にデフォルトで付いている左の余白と、
list-style:none;で消したビュレット用の領域のようです。
そこでliの親要素であるulにmargin:0; padding:0;を付けてリスト要素のスタイルをリセットしたところ、
見事余白がなくなりました。
次にビュレットが表示される件ですが、こちらは前述した余白と同じでデフォルトでついているものです。
そしてレッスンでは一番最初にHTMLにCSSのリセットとしてYahoo!CSS Resetを使っています。
私も同じようにしたつもりだったのですが、なんとコピーするアドレスを間違っていました…
つまり、リセットされていなかったわけですね。
しかしそこも一応疑って、試しに以前のレッスンでダウンロードしたnormalize.cssも使ってみたのですが、
結果が変わらなかったのでそこではないと判断しました。
つまり…normalize.cssもキチンとダウンロードできていなかった模様。
いつかこんな事もあったと懐かしく思えるようになる日が来ることを願います・・・
全くためにならない内容を投下して申し訳ありません。