[k]id » css 

2009年3月5日

CSSでプリント時に背景を表示させたい

印刷用のCSSを作る場合にbackground設定している画像は通常では印刷されません
その際は下記のコードを印刷用CSSに

display: list-item;
list-style-image: url(bg.jpg);
list-style-position: inside;

Filed under: CSS
タグ: , , ,

2008年11月26日

サイズの最小値(min-width:min-height)をIE6でも利用できるようにするJavaScript

サイズ固定をしないページを制作したのですが、

windowサイズを小さくすると要素がカブってレイアウト崩れを起こしてしまう。。。。



そこでmin-widthを設定しようとしたが、

「そうだ、IE6がきかないんだ。。」



のでこのJS のライブラリをお借りしました。

minmax.js module




設定方法はheaderに

<script type="text/javascript" src="minmax.js"></script>


のみ。。



覚え書き。覚え書き。。。

Filed under: JavaScript
タグ: , , ,

2008年6月19日

ShadedBorderでheightの繰り返しがうまくいかない時のTips

角丸コーナーや影付きドロップシャドウをJavaScriptとCSSだけで作成できるShadedBorderですが、
何故か縦長のページの時に、背景が途切れてしまうという現象が起こりました。

 

そこで使用させていただいているshadedborder.jsの中身を2カ所、修正してあげる事で、
繰り返しが正常に動作する事が解ったので、メモしておきます。

 

155段目
ds.push('<div style="position:relative; top:' + (th+bh) + 'px; height:2048px; ' +
                 ↓
ds.push('<div style="position:relative; top:' + (th+bh) + 'px; height:10240px; ' +
  と
162段目
' top:' + (th+bh) + 'px; height:2048px; padding:0; margin:0;';
                 ↓
' top:' + (th+bh) + 'px; height:10240px; padding:0; margin:0;';
で大丈夫だと思います。

2008年5月28日

IEのCSSブラウザハック覚え書き

IEのCSSブラウザハック覚え書き

IE7のみCSS適用
*:first-child+html {} 
IE6以下のみCSS適用
* html {} /**/

Filed under: CSS
タグ: , , , ,

2008年5月22日

CSSでmarginの幅がIE6だけ倍になる

CSSの覚え書き

 

CSSを記述する時の悪いクセでfloatを多用してしまいます。

 

しかしこのfloat、IE6以下で

左カラムのdivに対して「float:left;」をかけた後に

右カラムにfloat:rightをかけてmargin調整をしようとすると

marginの幅がIE6だけ倍の値を取ってしまうようです。

 

そこで下記のように_(アンダースコア)を使用して

IE6のみに適用する一時的にCSSを記述しました。

↓左カラム
#div1{
float:left
}
↓右カラム
#div2{
float:right;
margin-left:10px;→IE6以外
_margin-left:5px;→IE6専用
}
正しい記述方法では無いと思いますが…

Filed under: CSS
タグ: , , ,

Page 3 of 41234