2008年9月13日土曜日

IE6の検証は必ずしないといかんな

今日もzen-cart で作ったパチンコ攻略本のサイトをいじっていました。

このデザインの元になったのは、ここの無料のテンプレートなんですが、無料でもらえるのにとても優秀で日本語が使えるしお勧めです。

初めてというのと、実際の商品はそんなに数がないというのもあり、CSSをいじりたおしているのですが、zen-cart ってdiv に細かく ID設定がされていて、h1でも id を使っていろいろ加工しやすいようになっています。

なかなかそれなりにできているなと思うし、アクセスもあるのに注文がないのよね=。
で、不思議に思いつつも、郵便番号入れたら自動で入力できるアジャックスとか、いろいろ入れてカスタマイズしまくっていたのですが、

ふっと見たら!IE6でショッピングカートの購入ボタンがないわけ!!

で、調べたら
<br class="clearBoth" />
になっていて、
clearBorth が CSSにないみたい。
で、これを
<div class="clearBoth"></div>

に変更した。

購入ボタンは、float:right になっていたのですが、
それもうまく表示できないので、

それを消したら 長い窓の中にボタンが登場。
で、これをmargin-left と margin-right で調整したという。

最初の理由はなんとなくわかるが、次の理由はまったくわからない。


まぁ。無料なんだし、勉強になるし、いろいろ検証できるからいいんだけど。


メモ。
zen-der cart さんのゲスト購入モジュールは無料でとっても便利。

でも、これは住所自動入力に対応していないことがわかり、まさぐっていたのですが、
\includes\templates\使用テンプレート\templates\tpl_modules_guest_purchase.php



<?php
// Modified for Ajax住所+国名非表示 by zen-dera project 2007 BOF
echo zen_draw_input_field('postcode', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_postcode', '40') . 'onKeyUp="AjaxZip2.zip2addr(this,'state','city',null,'addr','street_address');"' . ' id="postcode"') . (zen_not_null(ENTRY_POST_CODE_TEXT) ? '<span class="alert">' . ENTRY_POST_CODE_TEXT . '</span>': '');
// Modified for Ajax住所+国名非表示 by zen-dera project 2007 EOF
?>



操作性のよさは購入につながると思います。


とpostcode のあたりを書き換えると、簡単に導入することができた。

まだまだ情報少ないzen-cart いじるほどに味がある。

今はもうなぜか閉鎖しているみたいな テンプレートのサイトのような美しいのを作れるようになりたいな。

mix でひろってきた IEのバグ
・Floatをかけた同じ方向にあるmargin、paddingの幅が二倍になる
・floatするボックス同士の間にコメントがあるとコンテンツが複製されてしまう。
・g、j、pなどの文字が含まれているとコンテンツボックスからはみ出す場合がある
などでしょうか。
floatする2つのボックスをdivで囲み、overflow:hiddenおしくはclear:afterをかける、時分はいつもそのやり方で回避しています。

なるへそ。



*************************

IE6 でエラーになる場合

margin:0px auto;

の指定を忘れているとレイアウトが崩れる。
もちろんwidth height も忘れていたら崩れる。

h4 をちゃんと /h4 で閉じるの忘れていたら(バカすぎでも、他でキレイに見えるのでつい…) また崩れる。

けっこう、IE6では大きく崩れることが多いので必ずチェックすること

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索

View My Stats