バグ報告 > 管理機能 > windowsとmacの表示の違いについて |
管理機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
tonton |
投稿日時: 2009/12/27 15:39
対応状況: −−−
|
仙人 登録日: 2008/8/14 居住地: 投稿: 437 |
Re: windowsとmacの表示の違いについて こんにちは。
ざざっとですが、見たところ、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/ 大変ですが、がんばってくださいね!(^^)// |
NADEMO |
投稿日時: 2009/12/28 13:31
対応状況: −−−
|
常連 登録日: 2009/10/5 居住地: 品川 投稿: 50 |
Re: windowsとmacの表示の違いについて tonton様
ありがとうございます。 確かに右カラムの訂正を忘れておりました。 670pxに設定しなおし、product.cssのspec_img及びspec_textのところもfloat: left;で統一しました。 でも、やっぱりダメみたいです。 互換表示、そしてIE6,7では商品詳細メインコメントの中のhttp:www〜は読まれないのでしょうか。 float: left;にしたので、textが左詰めで表示されてしまいました・・・
|
tonton |
投稿日時: 2009/12/29 0:01
対応状況: −−−
|
仙人 登録日: 2008/8/14 居住地: 投稿: 437 |
Re: windowsとmacの表示の違いについて こんにちは。
そうですね。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 |
投稿日時: 2009/12/29 0:14
対応状況: −−−
|
仙人 登録日: 2008/8/14 居住地: 投稿: 437 |
Re: windowsとmacの表示の違いについて 中途半端に放り出しすぎて心ぐるしいので、ヒントにイなりそうなリンクだけ追加で張っておきますね!
1)MACだけならこの5番目とか怪しかったり。 http://kennsu.jp/2007/01/css10.html 2)float関連で、これとか。 http://homutuku.com/beginner/250.html 3)似たようなところでこれとか。 http://adp.daa.jp/archives/000250.html 見たところ、paddingとかよりWIDTHやFLOATが怪しそうなので、上記はっときますね。 |
NADEMO |
投稿日時: 2010/1/12 10:00
対応状況: 保留
|
常連 登録日: 2009/10/5 居住地: 品川 投稿: 50 |
Re: windowsとmacの表示の違いについて tonton様
コメントを寄せてくださった皆様 あけましておめでとうございます。 ご指摘ありがとうございました。 cssの勉強をもうちょっと頑張ります。 サイトとしては見られるものになりました。 皆様のご協力のおかげです。 ありがとうございました。
|
« 1 2 (3) |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |