2011.08.10 | 

こんにちわ
Devjamのコータローです。

さて今回はIE6での印刷対応についてです。
IE6以外のブラウザーはデフォで印刷時、縮小されるので
横幅がオーバーしていてもあまり問題はないのですが
IE6にはその機能がありません。

そこで自分は、あまりよい方法ではありませんが
IE6だけzoomで対応しています。


* html body{ zoom : 70% ; }

しかし、htmlの組み方によっては
naviなど、floatで横並びにしている要素で
最後のボタンだけ落ちてしまう場合があります。
そんな時は、全体の幅を指定している箇所の幅をちょっとだけ
広げてあげると治ります。

■通常時のCSS


#page {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    text-align: left;
    width: 907px;
}

■print.css


* html #page {
	width: 910px;
}

以上、コータローでした。

2011.08.04 | 

こんにちわ
Devjamのコータローです。

先日、IEでどうしてもheightが100%にならず
ハマっていたのですが、ただ要素に100%にしただけでは
100%にならないことをすっかり忘れていたのでメモしておきます。

IEでは親要素の高さの100%という解釈なので
親要素にも100%を入れなければなりません。
ですのでページ分の高さをとるならば
htmlタグとbodyタグにheight100%を当てなければなりません。


html, body{height:100%;}

p {
    height:100%;
}

また、上記の事を調べているときに
IEでのfloat時のmargin2倍問題の解決方法も
見つけたのでメモしておきます。

IE6では float:left;とmargin-leftを同時に
指定するとmarginが、2倍になってしまいます。
逆にfloat:right;とmargin-rightを指定しても
同じく2倍になります。
今まではmarginの代わりにpaddingを指定したり
floatとは反対側のmarginで対処していたのですが
float時にはwidthも指定するので、paddingだと幅の計算が面倒だったり
デザインによっては、反対側のmarginでは対応できない場合もあります。

理由はよくわかりませんが、floatとmarginを
指定している要素にdisplay:inline;を入れると
2倍問題も解決し、モダンブラウザでは、floatしている要素の
displayの指定を無視するので問題ないようです。


p{
    float:left;
    width:80px;
    margin-left:20px;
    display:inline;
}

以上、コータローでした。

2011.06.08 | 

こんにちわ
DevJamのコータローです。

コーディング時、よく使うのに
毎回ネットで検索しているので、まとめておくメモ

■ポップアップウィンドウの閉じるボタン


<a href="#" onClick="window.close(); return false;">サブウィンドウを閉じる</a>

■フォームボタンの画像化とロールオーバー


<input type="image" src="/images/btn_hoge_off.gif" alt="送信"
onmouseover="this.src='/images/btn_hoge_on.gif'"
onmouseout="this.src='/images/btn_hoge_off.gif'">

■戻るボタン


<a href="#" onClick="history.back(); return false;">back</a>

コータローでした。

2011.06.03 | 

こんばんわ
DevJamのコータローです。

今回はHTMLコーディングでよく設定し忘れるのでメモです。

HTMLコーディングで背景が横幅100%で
背景を繰り返す場合よくありますよね?

この場合、幅100%にしている親要素に子要素の幅と同じ値の
minwidthを入れておかないとウィンドウサイズを小さくして横スクロールが
でた際に、背景が途中で途切れてしまいます。

背景が横方向で途切れてしまったら、これ疑ってみてください。

以上
コータローでした。

2011.05.20 | 

こんちわ
DevJamのコータローです。

HTMLのタグとかCSSとかって読み方が分かりにくいもの多いですよね。
ネイティブな人間なら問題ないのかもしれませんが、
省略されているのものも多いので・・・

先日、DevJam内でそんな話で盛り上がったもので
ちょっと調べてみました。

DOCTYPE:ドクタイプ/ドキュメントタイプ
DTD:ディーティーディー(ドキュメントタイプ・ディフィニション)
img src:イメージソース
alt:オルト
embed:インベッド
href:エイチレフ or ハイパーリファレンス
rel:レル
span:スパン
width:ウィズ
height:ハイト
align:アライン

みなさん読み方あっていましたか?
人前で違った読み方してしまって恥ずかしい思いをしたりしないよう
覚えておくとよいかもです。

(間違ってたらごめんなさい)

では皆様、よい週末を・・・
コータローでした。