2011年09月22日

IE6 CSS 上下左右中央寄せ

上下左右中央寄せ


基本的に最近のブラウザだとcssで
text-align: center;
display: table-cell;
vertical-align: middle;

これを書いておけば上下左右中央寄せになりますが、
IE6ではダメだったので苦労した結果を記載

他のサイト


他のサイトを色々見ると
display: inline;
zoom: 1;

でできるとか書いてあるところも何個かあったのですが
全然ダメでした。
他にも色々ありましたがややこしいので諦めました。
その時は他にもmin-widthやmax-widthのIE6版でも調べていたのですが、
横幅最大180pxでにしたい場合
width: expression(this.clientWidth > 180? "180px" : "auto");

とすればできるようになります。(180pxにしたいとき > 180だとダメなときもとか言う話も。。)
document.body.clientWidthも多くありましたが数値を正しく取れるところと取れない所がありました。
その場合thisだと取れます。(ただし、場所によってはCPU跳ね上がって動かなくなったりしました。)

最小は>を<に変えるだけ
heightはclientWidthでなくclientHeightにすれば良い。

これを使用する場合expressionが無駄にメモリを食うという話もあったのでご注意を

解決方法


* html #main img {
padding-top: expression(this.clientHeight > 150? "0" : ((150 - this.clientHeight) / 2) + "px");
}

* htmlはIE6だけの処理
#mainのimgの最大横幅は150
151以上ならばpadding-topは0
150以下ならば(150-画像の横幅)÷2のサイズの空白をセットするといった具合です。

とりあえずこれでうまくいきました。
posted by RicK at 19:05| Comment(0) | TrackBack(0) | 日記

2011年09月21日

jQueryでグラフ表示2 〜Google Charts〜


基本的に前回と変わりませんがまたちょっとやっったので記載しておきます。

ついでにこっちにもアップしたので暇なかたどうぞ
こっち
(あんまかわんないけど)

さて、大体は前回を参照してもらうとして今回はオプションについてちょっとだけ書きます。

グラフ




ソース


<script language="JavaScript"><!--
  jQuery(function(){
    var api = new jGCharts.Api();
    jQuery('<img>').attr('src', api.make({
    data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
    size : '100x100',
    legend : ["data1","data2","data3"],
    axis_labels : ["DATE1","DATE2","DATE3"],
    type : "bhs",
    colors : ["000000","800000","FF0000"]})).appendTo("#bar2");
  })
//--></script>


オプション


size : 画像のサイズを変更します最大300,000 pixelsとなります。
legend : ブロックの種類説明
axis_labels : y軸の説明
type : グラフの種類
colors : ブロックの色指定

といった感じです。
他にもまだまだある感じですがとりあえずこんなかんじで。
posted by RicK at 11:50| Comment(0) | TrackBack(0) | 日記