firefoxでCSSデザインが崩れます。IE７であれば、問題なし。

質問

対応してくださる方へ

このページまでお越しいただきまして、誠にありがとうございます。

こちらのページですが、
http://pandeiro.jp/suda/freeplus_sample1/shoes/index.html

それぞれの靴の名前を設けているのですが、firefoxでは、題名が靴の裏に隠れてしまいます。
floatしているわけではないのに、・・・なぜかまったくわかりません。

どなたかご教授くださいませ。

回答No.2

grumpy_the_dwarf · ベストアンサー

崩れてるのはIE7の方です。

<div id="shoes">
　<div id="shoes_title_t">
　　<div id="s_t_t1"><h3>SPRING</h3></div>
　</div>
　<ul>
　　<li style="float:left"><a href="shoes/spring/index.html">
　　<img src="../images/s/spring_b.jpg" alt="AKIZUMI　紳士靴　SPRING" border="0"></a></li>

ね、この調子でli要素が全部floatしてます。これじゃぁ高さ0にな
るのが正しい。IE7はまだバグが治ってないんですね。Ulの後でクリ
アしましょうか。ま、全体的にDIV厨の様相を呈しているので、もう
少し論理構造を考えた方がいいと思いますが。

ついでにいうと、同じidが何度も出てくるのは不正です。idっての
は1つのページの中では唯一無二でなくてはいけません。classとid
の使い分けを学んで下さい。HTML4.01を名乗ってるのにmeta要素の
末尾が/>になってるのも間違い。

補足

すばやいご回答ありがとうございます。

なるほど！
たしかにそこでfloatしてました。

検索してclassの意味が理解できました。
ところで、本当に簡単な質問かもしれないのですが、
なぜid と　cless を使い分ける必要があるのでしょうか？

回答No.3

qualheart

ANo.1です。
直ってますね。

でも個人的にはANo.2さんが言うように、IEの方がおかしいのだと思います。
でもまあ不正って訳ではないですから、今のままでも良いと思いますよ。
floatした後のオブジェクトをfloatしているオブジェクトに重ねたくない場合は、floatをclearすること。
これば守られていればよいと思います。

ClassはCSSだけで使用するものですが、IDはJavaScriptなどでも使用しますよね。本来、JavaScriptなどのために一つのファイル内でユニークなIDとして付けるものとして出来たものだと思いますが、それをCSSでも使用できるように指定できるようになっているだけのように思います。
単なる推測ですが＾＾；

回答No.1

qualheart

とりあえず、以下に変えればタイトルはちゃんと表示されます。

#shoes {
width: 570px;
height: auto;
margin-top: 2px;
clear: both;
}
※clear: both;を追加です。

ただ、これでもタイトルの上のスペースがないので、ちょっと考えなければいけないかも知れませんね。

お礼

ありがとうございます！
http://pandeiro.jp/suda/freeplus_sample1/shoes/index.html
直りました！

タイトルの上スペースは　.shoes を　float:right;　にしてみました。

これが不正でなければいいのですが・・・