CSSが適用されない不整合
movabletypeで作っているサイトで、ナビゲーター部分に色を付けようと思い、
今あるCSSにオーバーライドするようなものをコピペ。
そしたら全く効きません。デベロッパーツールで見ても、出てこない。
なんでだろうか、と思っていて条件をよく確認したら、不整合を起こしていました。
@media (min-width: 930px) {
movabletypeで作っているサイトで、ナビゲーター部分に色を付けようと思い、
今あるCSSにオーバーライドするようなものをコピペ。
そしたら全く効きません。デベロッパーツールで見ても、出てこない。
なんでだろうか、と思っていて条件をよく確認したら、不整合を起こしていました。
@media (min-width: 930px) {
[role="navigation"] ul {
background: #666;
width: 936px;
padding-left: 24px;
}}
}}
「width: 936px;」これ消したら動きました。
もとのものをあまり考えず、そのままコピペしたのが良くなかった。
また、どうももう1つ出ない原因があるなーと調査していたら、
ulの下にあるliに「 float: left;」が悪さをしているということが判明。
これもいったん外して対応してみました。
クロームのデベロッパーツール万歳。これほんと調査しやすいわ。
もとのものをあまり考えず、そのままコピペしたのが良くなかった。
また、どうももう1つ出ない原因があるなーと調査していたら、
ulの下にあるliに「 float: left;」が悪さをしているということが判明。
これもいったん外して対応してみました。
クロームのデベロッパーツール万歳。これほんと調査しやすいわ。
コメント