copain blogs

Outlook2007でHTMLメールが崩れる症状があり困っていました。

Vistaパソコンに添付されているOfficeスイートOutlook2007ですが、このメーラ
で受信されたHTML（文字を装飾しているメール）本文はかなり体裁が崩れ、見る
も哀れな状態になります。
これは、Outlook2007から、IEのHTML表示の体裁を整えるエンジンを使用せず、
Office内のWordの表示を利用しているからです。 WordはHTML形式の文書をむ
ちゃくちゃにすることで有名です。これはOutlook2007の根本的な設計にかかる
ため、今後パッチが当てられたり修正されることはなさそうです。どうしても
HTMLメールをきれいに表示させたい場合、Outlook2007を使わないほうが無難で
しょう。

http://www.terra-system.jp/win/2007/05/vistaoutlook2007html.html

いろいろ調べたところ条件付コメントでいけるみたいです。
全部画像のHTMLメールなら

＜!–[if gte mso 10]>
＜style>
body{ font-size:1px;}
＜/style>
＜![endif]–>

でOK。

各エレメントにスタイルを指定したいなら
こちらのエントリが参考になります。
メールクライアントごとのCSSサポート状況の解説とチートシート | コリス

なお使えるHTMLタグも制限されるようなので普段業務でDreamweaverを使っていれば
Download details: 2007 Office System Tool: Outlook HTML and CSS Validator
からWordMailSupportMacromedia.msiをイントールするとターゲットブラウザチェックでWord2007が選べるようになります。

ページングというのは以下のようなものです。

1　2　3　4　5　6　7　8　9　10　»

アマゾンやグーグルなどでおなじみではないでしょうか。ページがたくさんある場合などでよく使われます。
ただ、数字番号同士が近すぎると間違って選んでしまったりして、ちょっとイライラするので改良して見ました。

こんな感じ

(more…)

サンプルはこちら

■構造

・tab
一番外のボックス。絶対レイアウトの基準。タブの下線をボーター下で描画。

・ul
ボックスの左端でタブのボーダーを描画。
絶対位置で下に1pxずらしてtabボックスに重ねている。

・li
タブの上と左のラインをボーダーで描画。

・a
IEでli要素のhoverが効かないのでliボックスと同じ面積にした。a:hoverで背景色を変えている。

・menu_op
タブの開いたときを表現。tabボックスの下線を打ち消すため白いボーダーで下ラインを描画。

以下のようなメニューがあるとする

HTML
<ul><li><a href=”menu1.html” class=”menu1″>メニュー1</a></li><li><a href=”menu2.html” class=”menu2″>メニュー2</a></li><li><a href=”menu3″ class=”menu3″>メニュー3</a></li><li><a href=”menu4.html” class=”menu4″>メニュー4</a></li></ul>

スタイルシートはこうする（数字は画像サイズに応じて変更）

CSS
.menu1{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0; height:0px; width:80px; overflow:hidden; float:left;}
.menu2{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0 ; height:0px; width:80px; overflow:hidden; float:left;}
.menu3{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0 ; height:0px; width:80px; overflow:hidden; float:left;}
.menu4{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0; height:0px; width:80px; overflow:hidden; float:left;}

ポイント
・表示エリア　高さを0pxにしてパディングで高さの表示エリアを広げる
・文字を隠す　ライン高をあげて表示エリアの下側に隠すようにする
・印刷　背景を印刷しない設定にしてあると文字が消えてしまうのでCSSの設定を media=”screen”にする

以上

忘れそうなので備忘録です。

での標準モードでレンダリングを前提。

サンプルはこちら

基本は絶対配置で行う。
全体のレイアウトが左寄せでは問題ないが、
中央寄せの場合
親ボックス　position: relative;
子ボックス　position: absolute;
のようにしていると、IE6でリサイズしたときにずれてしまう。

ココでIE6用ハックを使い
* html　親ボックス　position: relative;
* html　子ボックス　position: static;
にするとずれない。

あとはピクセル単位の細かい調整が必要。