CSSでbodyに設定した背景画像がIEでずれる怪

またしてもIE。おのれIE。
バグ多すぎだよ、アナタ( ̄▽ ̄;
CSSでbodyに背景画像を中央揃えで設定すると、IEでは左に1pxずれます。
safariやFirefoxではずれないので、またしてもIEお得意の「バグ」です。
IEを優先して調整したりすると、正しく描画しているsafari&Firefoxがずれます・・ダメすぎるよIE。
1pxぐらいのずれだと、そんなに気づかないことが多いんですが、たとえば

  1. W800pxの背景の左右に1pxのボーダーを引く。
    上から下までボーダーを伸ばしたいので、CSSでbodyの背景画像として敷き詰めて、位置は中央揃えにする(背景画像はボーダーを入れるのでW802px)。
  2. その上にW800pxのコンテンツを配置する。そうすると、コンテンツの左右には1pxづつボーダーが見える。

・・ハズなんですよ。正しく描写してれば。
でも、IEは正しく描写しない。
左右にあるはずのボーダーのどちらかが消えてしまう。つまり、他のブラウザに比べて「中央揃え」が1pxずれてるのだ。

“CSSでbodyに設定した背景画像がIEでずれる怪” の続きを読む

Multiple IEのIE6と正規版IE6には表示の差があるのか?

実は昨日起こった、できたてホヤホヤの謎。
Multiple IEのIE6と正規版IE6では表示が微妙に違うらしい・・。
なぜ、分かったかと言いますと。
とあるコーディングをした時に、いつものようにMultiple IEで確認後、提出したわけですが、先方から一部分崩れている所があると連絡。
結局、オールCSSでのコーディングではなかったので、Tableに切り替えたのですが・・。
今までなかった現象なので首をかしげています。
また、検索してみたのですが同じような事例は今のところ見つかってない。
うーん。
IE7への自動更新(任意)が始まったとはいえ、当分IE6とIE7は共存させなくてはなりません。これは検証しなければダメですね。
手っ取り早い方法としては、WindowsのHDをわけてるので、IE6用にもう一つWindowsXPを入れることでしょうか。

スタイルシートを切り替えるJavascript-styleswitcher.js-。

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsで紹介されているスクリプトは、ユーザー側でスタイルシートを切り替えることのできるサイトを構築する際に便利なスクリプトです、
アクセシビリティを考慮したサイトを構築する時は、ぜひとも導入したいところ。
詳しい設置方法などはstyleswitcher.js-スタイルシート切り替えjavascript – WEBデザイン BLOGにお任せするとして、実際設置してみて不具合が発生。ページを移動すると、選択していたはずのCSSが無効になる。
このスクリプトはクッキーを利用して、ページを移動しても選択されたCSSを記憶する設定になっている。が、それが動かない。ページを移動するとデフォルトCSSに戻ってしまう。
そのため、解消するために小一時間考える羽目に。( ̄▽ ̄;

“スタイルシートを切り替えるJavascript-styleswitcher.js-。” の続きを読む

Vista環境でIEの複数バージョンを共存させる

以前紹介したMultiple IE 。けれど、このMultiple IE は、Windowsw Vistaで利用できないことが発覚。
そりゃ、なんども不具合起きて、Parallels Desktopも落ちるよね。(大汗)
しかし、どうしてもIE6が欲しかったためにネットの海を検索し、結果、Vistaでも使用できるものを発見。

“Vista環境でIEの複数バージョンを共存させる” の続きを読む

WEBデザイン制作には必須です。

それはIE。特に6と7。
IE6は透過PNGが使えないわ、まだまだいろいろとバグ一杯のIE7。
しかしユーザーだけは多い!
・・というわけで、これらのブラウザでの検証が中心になるわけですが、複数のバージョンが共存できないという致命的な作り・・つまり複数のバージョンで検証するには、複数台Windowsが必要になると言う事。
なんて不経済な。
そんなSOHOな皆様に福音です。

“WEBデザイン制作には必須です。” の続きを読む

すごく便利なのだけど・・。

かなり自由度のきく、フリーのメールフォームを探していたら、すごい使い勝手の良いスクリプトを発見。
ThemeResMail
が。
07年2月末で、バージョンアップを終了している。
うーん。
仕事でも使えるかな、とか思ってたんですが、今後のことを考えると、個人的使用に留めた方が良さそうです。残念。

透過PNGのIE6対策にはこのJava Script

です。
透過PNGはIE7で正式対応したものの、まだまだユーザーの多いIE6。
そんなIE6ですが、2/13以降にはWindows XPの自動アップデイトでIE7へのアップグレードをするようになるらしいですがそれでも当分はIE6も考えなくてはなりません。だって、強制アップグレードじゃないし。
その証拠に、久々にサブのWindowノートを開いたら、「アップグレードしますよね?しますよね?こっちのほうがいいですよー」という画面が表れてた・・・アップグレードしてないけど。
アップグレードしなかった理由はただ一つ。
IE6との共存ができないからだ。
Macだったら、前バージョンと共存できたのに、Windowsは出来ないのだ。正確には「できる」らしいが、かなりムチャなやり方みたいなので、オススメはできませんが・・。
そんなIE6がターゲットブラウザにもなってるにもかかわらず、透過PNGを使いたい、というアナタに朗報です。

“透過PNGのIE6対策にはこのJava Script” の続きを読む

かゆいところに手が届く

リニューアル作業を進めようと思ったら仕事が忙しくなり、デザインがデフォルトのままという、なんとも情けない状態になってます。
最近、色々なブログプログラムがあり、書籍も増えてきました。
そんなわけで、WordPressかNucleus CMS にしようかと思ってます。
・・と言うことはデーターも移植しないとなりません。なんとも道は遠いようです。とほほほほ。

“かゆいところに手が届く” の続きを読む

エラスティック・レイアウト

リキッドレイアウトは嫌いです。
可変レイアウトは動かした時のレイアウトが不細工になりがちなので、あまり使いたくありません。
が。
最近出たエラスティック・レイアウトはそれを見事に解消してくれそうな気配です。
HTML側で画像のサイズを指定せず、CSSで「em」設定することによって画像の可変を可能にし、文字サイズを大きくしたときなどのレイアウト崩れを防げるらしい。(私が注目したのはその部分だけなので、他はごにょごにょ・・・)
勿論、リキッドレイアウド事態は悪くないです。けれど、すべてのサイトに使える訳じゃなくて、文章量などによっては、固定レイアウトの方がいいときもあります。
Webの世界は本当に日進月歩ですな。(と、遠い目)

知らぬ間に双子サイトができていた・・。

先日。
とあるシリーズのサイト制作があり、今までこんなの作ってました、というのをデザイナーに提示するために検索しておりました。
そうしたら。
私が作ったサイト、別の同シリーズの案件で見事にパクられてました。
画像もhtmlもそのまま使って・・・別名なんで、そこだけ直してある。
つまり別のドメイン+サーバーに、データーそのまま上げたようなもんです。
・・ああ。(T_T)
勿論、抗議させていただきました。
色々と裏事情はあったみたいですが、ひとこと言って欲しかった。
ズブの素人ならまだしも、そのあたりをよく知っている代理店の所業とは思えません。
本来なら契約違反、罰金モノです。
こう言う事件があると、「デザインって、つくづく金額があってないようなもの」なんて思ってしまいます。