IE7-JS

看來似乎是個針對 IE 瀏覽器種種問題一勞永逸的方案。IE7-JS 是個 JavaScript library，主要功能是修正 IE (主要針對IE5+) 行為，讓 IE 看起來就像個支援網頁標準的瀏覽器，其中幾個重點是讓 IE6 支援 PNG、支援 max-(width、height), min-(width、height)、支援:hover..等等，詳細列表可參考官方文件。

使用方法只需將js載入即可

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

或是針對IE5-7

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->


當然也可以下載至本地使用。

比較美中不足的地方，是要使用 PNG 效果的話，圖檔名稱後方必須加 *-trans.png，另外在頁面載入時仍會出現短暫的"原始面貌"。

設計兩三事

看到先前為某建設公司設計的BOT宿舍網站上線了，只能用慘不忍睹來形容。

這個專案流程是這樣的，建設公司企劃出網站內容，找上我合作的程式開發公司，然後程式開發找我進行視覺設計，我設計出符合企劃的網站視覺，同時經過建設公司確認後切成樣板給程式開發套程式，整個流程聽起來應該沒問題才是，但偏偏上線後完全走樣。

這個案例跟視覺或程式都無關，問題癥結出在企劃。企劃當初無法確認掌握該網站實際結構內容，草草丟出來就要視覺開始設計切版，結果完成品出來後東改西改，一再推翻原有的企劃與設計。我很想做一個負責任的 designer，但畢竟容忍度有限，加上程式心地善良也不好意思再找我改東西，因此網站上線，爛成一團。

很為負責的那位程式抱屈，但更不爽的是該建設公司以及底下那位不負責的專案企劃，為什麼可以企劃出最後完全被推翻的網站企劃？

Javascript in Modern Web Design

Web Designer Wall一次介紹多款目前最流行的Javascript的相關應用，Dojo、jQuery、MooTools、Prototype..等，實際應用範圍從照片展示、Tooltips到Switcher等應有盡有，可以好一段時間都不用再Google半天還找不到心目中想要的效果了。

Javascript in Modern Web Design

Vodafone Mayfly Screensaver

當然，三年前逛到Vodafone : Live 24 Hours時就非常喜歡它的風格，桌布也用了好一段時間。今天心血來潮重溫舊夢，發現網站還提供了螢幕保護(screensaver)。猶記得上一次裝螢幕保護是駭客任務那個著名的日文與字母混合的母體解碼畫面，再來就是一些效果很糟或經驗很差的，不過這次的姑且一次卻讓我愛上了這個螢幕保護，也讓我擺脫了晃來晃去的Windows XP Logo。

和多繽紛樂

服務公司和多參加了Yahoo 2008 Open Hack Day，昨天在台北市青少年育樂中心順利結束。敝舍的和多繽紛樂在一優勝、二佳作三個總獎項之中取得佳作，算不算好成績搞視覺的實在難以進入狀況，不過就第一次參加這類活動的我來說，雖然沒能全程在現場參與過程，不過第一天在現場的感覺是不錯的，飲料、啤酒、零食、無名美少女(沒看到Orz)，那種氣氛還挺特別的。

關於和多繽紛樂的介紹請參考同事 Xdite 所寫的 這裡，與 Boss hlb 所寫的 這裡，畫面展示在 這裡，完成品在 這裡，有興趣找敝舍接案子、談合作的請點 這裡。

在視覺設計方面，這次比較特別的經驗是因為完全不用考慮ie6，所以圖檔幾乎全使用PNG，PNG圖檔的透明特性輕易的實現了許多視覺效果，套句hlb的話

寫 CSS 完全不考慮 IE，真是一件愉快無比的事情

。

CSS技巧 欄位自動互相適應高度

網頁設計版面中的欄位當有運用到背景圖時，為了整體視覺效果，常會遇到需要能夠互相適應高度（視覺上）的問題，而這對於 CSS 的確是個麻煩，當然這可以利用 JavaScript 去處理，但若不想靠程式時，只好利用一些小技巧去達到這個目的。

不同的需求通常有不同的解決方案，在這筆者以最近設計的 Opmsg 為例子（參考畫面），在這三欄的設計中，需求是中間欄位能夠自動適應左欄的高度，當中間欄位內容高度少於左欄時，其背景仍能高於左欄（參考畫面）。

首先把中、左兩欄合併定義成為一個欄位取名 #column-1 並 "float: left"，最右欄取名 #column-2 並 "float: right"，右欄由於打算讓它完全依內容決定高度，因此接下來依一般方式處理即可。

回過頭來，剛剛的 #column-1 先放置中間欄位的背景圖上半部，並將圖片靠上靠右，#column-1 底下再放置一個 div 取名 #bd，然後將中間欄位下半部的背景圖切大張（高度）一點，放置在 #column-1 #bd 靠下靠右，這時中間欄位雖然還沒切，但背景已經出來。

#column-1 #bd 底下再切出兩個欄位分別為 #left（float: left） 與 #right（float: right），而這裡的 #right 其實就等於擁有背景圖的中間欄位了。#left 左欄依前面 #column-1 的方式將背景圖放上基本上就大功告成。

在這個案例中，中間欄位的背景圖片放在最外層，因此在裡頭的左欄可以實際控制著中間欄位在視覺上的最小高度，雖然並非真的讓欄位互相適應高度，但還是可以滿足實際的視覺需求，有點像是在變把戲（trick）XD。

當然 opmsg 的 CSS 實際上要複雜一些，不過基本上就是這個原理。