tonton様
コメントを寄せてくださった皆様

あけましておめでとうございます。
ご指摘ありがとうございました。
cssの勉強をもうちょっと頑張ります。

サイトとしては見られるものになりました。
皆様のご協力のおかげです。

ありがとうございました。

----------------
ホームページ作成は全てが始めてです。
プロの皆様のお力をお借りしたいです。
宜しくお願いします。

中途半端に放り出しすぎて心ぐるしいので、ヒントにイなりそうなリンクだけ追加で張っておきますね！

１）MACだけならこの5番目とか怪しかったり。
http://kennsu.jp/2007/01/css10.html

２）float関連で、これとか。
http://homutuku.com/beginner/250.html

３）似たようなところでこれとか。
http://adp.daa.jp/archives/000250.html

見たところ、paddingとかよりWIDTHやFLOATが怪しそうなので、上記はっときますね。

こんにちは。

そうですね。floatをleftにしたら、もちろん文字も画像も左寄せになりますので、修正後、関連するCSSは直していかないと思います。

全体的に値の矛盾や空タグなどいくつかありそうですし、相互に関連してるCSSも多くあるので見直しておくことも必要だと思います。

その上でですが、floatした2つの要素がずれたり見えなくなるのは、WIDTHかFLOATが間違っているのが多いですが、こういう消え方をするのは、要素の前でFLOATしたものをうまくclearできていないか（←意外とこれが多かったり。。。）、このずれている要素自体が、その後の要素でCLEARできていない場合に多く見られますよ（＾＾）

ちなみに、W3CのCSS解析で、PRODUCTS.CSSだけで下記のエラーが出ています。全体で15のエラーのようです。
------------------
150 .item-box-photo img 次のプロパティが正しくありません : vertical-align center は vertical-align で利用できる値ではありません : center
189 div.listarea 次のプロパティが正しくありません : background 文法解析エラーが発生しました [empty string]
379 div#spec_area 次のプロパティが正しくありません : height repeat-bottom は height で利用できる値ではありません : repeat-bottom
390 div#spec_text 次のプロパティが正しくありません : height repeat-bottom は height で利用できる値ではありません : repeat-bottom
427 div.subarea h3 次のプロパティが正しくありません : background 文法解析エラーが発生しました [empty string]
482 div#customervoicearea li 次のプロパティが正しくありません : background 文法解析エラーが発生しました [empty string]
---------------------

すみません、個別に全部見てはいないので、中途半端な回答になってしまって・・・お役に立てるといいのですけど。

tonton様
ありがとうございます。
確かに右カラムの訂正を忘れておりました。
670pxに設定しなおし、product.cssのspec_img及びspec_textのところもfloat: left;で統一しました。
でも、やっぱりダメみたいです。
互換表示、そしてIE6,7では商品詳細メインコメントの中のhttp:www〜は読まれないのでしょうか。
float: left;にしたので、textが左詰めで表示されてしまいました・・・

----------------
ホームページ作成は全てが始めてです。
プロの皆様のお力をお借りしたいです。
宜しくお願いします。

こんにちは。

ざざっとですが、見たところ、CSSの指定にいくつか矛盾した値がありますね。

例えば、商品詳細で、MAIN.CSSで右カラム全体をくくっているdiv#two_maincolumnは、widthが600pxになっていますが、その中に納まるはずの、products.cssのdiv#spec_areaは、650pxになっており、さらにその中の、div#spec_image、div#spec_textは、それぞれ、200px、420pxになっています。

さらに、div#spec_image、div#spec_textのfloatですが、こういうレイアウトの場合は、widthを指定した上で、どちらもfloat:left;にするほうがブラウザごとのレイアウト崩れが防げますよ。

ざっと見た、一部だけですが、参考になれば幸いです。


P.S.制作のチェックをするときは、sleipnirというブラウザがオススメです。フリーですが、チェック機能が多彩で、同じくフリーのプラグインを追加することで、cssを動的に編集しながらビジュアルを見てレイアウトのチェックができたり、HTMLやCSSの構造をチェックしたり出来ます。（ご存知かもしれませんが・・・）

http://www.fenrir.co.jp/sleipnir/

大変ですが、がんばってくださいね！（＾＾）//

IE7でも横並びの左側の画像が表示されていないようです。

ソースを見ているとあまり推奨できない組み方などをしているようなので、（たとえば<br />の濫用など・・）
正しいコーディングの方法を身につけないと
今後もこういったことは起き続けるのではないかと思います。

<div id="spec_image">と<div id="spec_text">を横並びにするのは、css側ではどのように設定していますか？

----------------
+++++++++++++++++++++++++++++++++++++++++++++++++++
EC構築　EC製作　ECコンサルティング
株式会社マッジ
+++++++++++++++++++++++++++++++++++++++++++++++++++

ありがとうございます。

IE6で確認したところ、大丈夫なようですが、やはり環境下の問題でしょうか。

それから、みなさまのご協力のおかげで、ページの大きい崩れを修正することができました。

当初、フレームサイズを780pixで作っていましたが、現在は900pixにしました。
どうやら幅が足りなかったようです。

仕様詳細というところは、管理画面の商品登録の中にある、詳細メインコメントのところに<img src="http://www.〜/>で画像を呼び込んでいます。
画像とspecを横並びにしたかったので、cssで<div id="spec_image">と<div id="spec_text">で構成させました。
ところが、div付けする前は見れていた画像がIE6下では見れなくなってしまいました。
IE8及びSafari4では見れるのですが・・・。
原因がわかりません。

ご存知の方がいらっしゃればご教授願いたいと思います。
よろしくお願いします。

----------------
ホームページ作成は全てが始めてです。
プロの皆様のお力をお借りしたいです。
宜しくお願いします。

引用：

同様の現象がIE7(WinXP)でも起きているようです。

念の為、ご報告致します。

参考までですが、ここ最近１ヶ月の大規模サイトの利用者動向を見ると
一般的なＥＣサイトで15〜25%
技術系サイトでも5〜10%
がIE6の利用者割合のようです。

大幅に減ってきている方向ですがまだまだシェアは高いです。

----------------
EC-CUBE公式エヴァンジェリスト
EC-CUBEインテグレートパートナー (株)スピリット・オブ
移転・拡張・高速化・問題解決
各種カスタマイズ・支援依頼承ります。
[url=h

統計値を見て考えることをお勧めいたします。

サイトにもよりますが、IE7 や IE8 や Safari の各割合よりも、IE6 が多い事も多いかと。

----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。