Sixsick

だらだら雑記とテンプレ配布

2009.06.01 Monday

スポンサーサイト

一定期間更新がないため広告を表示しています

2009.03.31 Tuesday

IE6と印刷と

「IE6で印刷すると横が切れちゃうんだけど!なんとかして!」とクライアントから。
社外のデザイナーさんが噛んでる案件で、デザインにOKが出てからコーディング作業に回ってきてるし、もうTopページに置くFlashとか色々固定幅の物作っちゃってるし、ページ数3桁くらいあるサイトが半分くらい出来上がった所で「IE6でA4サイズに印刷しても収まるサイズにデザインしなおしてね☆」とか言うとデザイナーさん死んじゃうよなぁ、コーディングしなおす私も死ぬなぁ、というわけで応急処置。

print用のCSSを1個作って、

* html body{
zoom:70%;
}

zoomの値は任意で。スターハックを使わないとIE7まで勝手に縮小されちゃう点だけ注意する。
印刷時にもzoomが効いてよかったです。今までhasLayout対策にしか使って無かったよzoom。

A4サイズの紙で余白はIE6のデフォルト値だと横幅650pxがギリギリみたいです。
なんで余白のデフォルト値が19.05mmなんていう中途半端な値なんだろうと思ったら、丁度3/4インチなんですね。(分数使っておきながら丁度と言っていいのかはおいておく)

2008.11.20 Thursday

IEでもボタンをスマートに表示する

input type="button" はIEだと長いvalue値の左右にある余白が不必要に増える問題。
度々悩んでは個々に幅を設定して無理やり短くしていました。

でも overflow: visible; で解決するそうです。

サンプル
<input type="button" value="IEでもボタンをスマートに表示する">


<input type="button" value="IEでもボタンをスマートに表示する" style="overflow: visible;">


後はpaddingで適度に余白作ってやれば見栄えよくなるんじゃないでしょうか。
input[type=button]に対応しているブラウザが増えれば一括で指定出来て楽なんですけど、現状は個々にクラスつけていくしかないですね。

2007.12.03 Monday

boxとbackground-repeat

背景をブラウザの下端までリピートされているように見せるためにboxではなくbodyに背景を指定していたけど、boxに指定してもなんとかなる方法が見つかったのでメモ。
html,body{
margin:0;
padding:0;
height:100%;
}
#box{
min-height:100%;
_height:100%;
background-image:url(*****.jpg);
background-repeat:repeat-y;
}

これでFirefox、IE6、Operaあたりは問題なかった。IE7はまだ未確認。
bodyの背景なんかと組み合わせると色々出来そう。

(2007.12.10)追記body,htmlの100%を追記。