2012-02-05
【メモ】GoogleChromeで見た時背景画像が表示されない時の対処法
仕事の開発環境でデフォルトブラウザをGoogleChromeにしているけど、顧客の環境が殆どIE6なので必然的にIE6の対応もしないといけない今日この頃…。
なので現在の動作確認はIE6とChromeを使っているんだけど、「あれ？IE6ではちゃんと設定した背景が表示されるのにChromeだと何か変だ？？」という現象が。
以前知人に相談したら、それはIEの挙動の方が多分おかしいと言わた(笑)。
Chromeで表示がおかしかったら恐らくFirefoxなど他のブラウザでもおかしいんだろうなーと。
そこで調べたところ自分は以下の方法で解決出来たのでやり方をメモっとく。
＜作成例＞
＊ＨＴＭＬ
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="set.css">
<title>CSSデモ</title>
</head>
<body>
<！-- ヘッダー -->
<ｄｉｖ id="header">ヘッダー</ｄｉｖ>
<！-- ヘッダー --><ｄｉｖ id="waku">
<！-- 左メニュー --><ｄｉｖ id="menu">メニュー<ｂｒ>
メニュー<ｂｒ>
メニュー</ｄｉｖ>
<！-- コンテンツ表示 -->
<ｄｉｖ id="main">
<ｈ1>タイトル入れる</ｈ1>
<ｐ>本文入れる<ｂｒ>
<ｂｒ>
※ＣＳＳテスト</ｐ>
</ｄｉｖ>
</ｄｉｖ>
<！-- 回り込み解除 --><ｄｉｖ class="clear_both"></ｄｉｖ>
<！-- フッター -->
<ｄｉｖ id="footer">フッター</ｄｉｖ>
</body>
</html>
＊ＣＳＳ
#header {
width: 500px;
height: 35px;
background:url(img/back_top.gif) top left no-repeat;
}
#waku {
width: 500px;
background:url(img/back_menu.gif) top left repeat-y;
}
#menu {
width: 150px;
float:left;
}
#main {
width: 350px;
float:right;
}
#footer {
width: 500px;
height: 35px;
background:url(img/back_under.gif) top left no-repeat;
}
/* 回り込み解除 */
.clear_both {
clear: both;
font-size: 0;
line-height: 0;
height: 0;
}
IE6で動作確認すると予定どおり背景がセット出来た。
これをChromeで確認すると…
こうなる。
あれ？背景無いじゃん。となる。
＜div＞の中にあるfloat要素を設定するとなるらしい。
（決してバグではないと何処かで拝見）
この現象を解決するには、背景画像をセットしている＜div＞に対して以下の記述を加える。
overflow:auto!important;
overflow /**/: hidden;
今回のデモだとＣＳＳに
#waku {
width: 500px;
background:url(img/back_menu.gif) top left repeat-y;
overflow:auto!important;
overflow /**/: hidden;
}
と記述。
そしてまたChromeで動作確認すると…
背景が表示された！！
2011-12-04
2011-11-27
長崎のバイオパークに行ってきた
日常 |
カピバラを見に家族とバイオパークまで行ってきた。
入場券が既にカピバラ仕様
ただただぼぉーっとしているカピバラ
近付いたら餌をくれると思っているのか、全く警戒心が無いカピバラ…
露天風呂に入る姿が何とも気持ち良さそうな
他にも撮影した写真はFlickrにアップ。
ちなみにレッサーパンダが敷地内をひたすら回り続けていた姿が可愛かった…
2011-11-24
2011-11-19
給与計算を学ぶ時に読むと良いかもしれないサイトまとめ
給与計算の知識があると、会社で明細書を受け取らなくても支給される給与を大方計算出来て役に立つ（と思う。）
そこで、自分が給与計算を学習する時に見ているページをまとめてみました。
＊一件楽着
カテゴリー分けがすっきりしていて辞書感覚で調べられるサイトです。
給与支払報告書(個人別明細書・源泉徴収票)をPDFで出力可能な無料サービスもあります。
給与計算のやり方の手順を１から学べる感じのサイト。
保険や税の事も易しく書いてあり助かります。
かなやま労務管理社労士法人が提供する給与計算マニュアル。
＊スキルアップメモ from 奉行EXPRESS：OBCNetサービス
会計ソフト（基幹業務システム）の大手OBCのネットサービスの一つ。専門的な話が沢山掲載されています。
また「スキルアップメモ」以外のコラムも、会員登録しなくても読めるのです。
ネット上だけでこれだけ学べるサイトがあるのは嬉しい。
若干法律の事などにも触れられて勉強になります…。
