CSS

目から鱗とCSS覚え書き(zoom)

仕事で使ってるサーバーがCSSハックが効かない云々と何度も愚痴ってますが、同僚が「このサーバーはIEのバージョン別CSSハックが全部IE全体に適用されている気がする」と。

(゚Д゚)ァ・・・・
なぜ気づかなかったし 自分(;´д`)

Firefox、Opera、Safari、GoogleChrome、IE6〜8まで問題なく表示されたページにIE5.5用のCSSハックを追記したらIE6〜8までの表示が崩れたのを見ての同僚の一言でしたが、自分から迷路に突進してた私は言われなきゃ気づかなかった・・・・

ありがとう、同僚。

続きを読む

CSS覚え書き

◆テーブルにボーダーを指定した時にIEと他のブラウザで1pxずれる
原因:border-collapse:collapse;

CSSでborder-collapse:collapse;を指定するとIEでは内側(線上?)に、Firefox、Opera、safariなどでは外側にボーダーが引かれるので誤差が出る。

解決策
CSS側でborder-collapse:separate;を
HTML側で<table cellspacing="0" >を両方指定すれば回避出来る。

普段極力widthやheightは指定しないように組んでいるんですが、今回は指定せざるを得ない状況だったのでやむなくwidthを指定。案の定IE5.5でがっつり崩れました(;´д`)
以前はアンダースコアハックで逃げたんですが、今回のサーバーは効いてくれない・・・
いろいろ試してBox Model Hackに決定。
しかしなぜか逆で成功w

サーバーがスタイルとかJavascriptとかうじゃうじゃ持ってて、切りたくても切れない。ネームかぶりしたりウザかったー
最初にサーバーのスタイル解析した時にはなかったネームで効かないとか結構あった。

/*Box Model Hack IE5.5対策*/
div#selector table td{
    width:220px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:223px;
}

/*Box Model Hack opera回避(日本語サイトでは不要)*/
html>body div#selector table td{
    width:223px;
}

参考:http://www6.plala.or.jp/go_west/nextcss/tip/trans/boxmodelhack_jp.htm

その他のCSSハック一覧:http://www.webbibo.com/stylesheet/hack/selector.html

がちゃぴんが倒せない

昨日のTwitterネタの続きです。

Twitterの登録時にデフォでフォローになる人(?)が何人かいて、その中にちゃぴんもいたわけです。

全く興味ない感じの人とか団体とかはチェックボックスのチェックを外してフォローしなかったのですが、がちゃぴんはチェック入れたままで登録。続きを読む

制作会社のサイトなのに

WEB制作会社のサイトでいろいろうんちく語ってたり、デザインに自信ありとか言ってたり、Tip載せてたりするのになんで自社サイトのレイアウトが崩れてるのかと。

今日もそんな制作会社のサイトを見つけました。
自分は完璧かって聞かれたらそりゃちょこちょこやらかしますよ。でも、自分で気づいたり、人に指摘してもらったりしたら進行形の仕事差し置いてでも超即行で直しますよ。


気にしたら負けなんだけど、気にしないようにしてるんだけど、どうしても気になるんだ(;´д`)続きを読む

WEBデザインに役立つ便利なフリーツール

自分が使ってるものとか使ってたものとか晒します。
続きを読む
記事検索
twitter
アクセスカウンター

     
    支援リンク
    • ライブドアブログ