‹table›的隱藏/顯示效果在Firefox上的問題

這段期間製作的Prototype發現，我們習慣透過javascript撰寫網頁內容動態顯示/隱藏(display為none或block)效果。

然而若將此效果設定在‹table›上，在變換效果之後，FireFox會以table欄位裡資料(圖或文)實際多寡來呈現table的大小，也就是說若table裡資料很少，在一次切換效果之後，table會突然變小造成跑版。然而這問題在IE上卻不是問題!!

解決的方式為可在‹table›外包一層‹div›，將動態顯示/隱藏的效果從table身上改到div上，如此一來Firefox的跑版問題就解決摟!!

UI Prototype csshover.htc實作心得

目前網站的頻道選單，除了主選單之外還有第二層子選單動態展現，你可以用Flash來表現，但有維護上的issue，而目前主流的做法，可以使用CSS來表現。

然而，若客戶要求跨瀏覽器支援IE6的話， ‹li›tag在CSS hover的設定上卻不被支援。這個時候可以使用html component檔 -- csshover.htc來補強。(詳細資料google就可了解)。

這次專案的製作需求，客戶要求選單+子選單要動態呈現，因此有機會實作這個效果。然而在webserver的解譯執行上，IIS及TOMCAT都能順利呈現所需效果，然而在WEBLOGICAL上卻無反應，雖然有正確設定htc檔連結路徑卻仍無反應。

這是因為WEBLOGICAL需要在web.xml增加下列宣告:
‹mime-mapping›
‹extension›
htc
‹/extension›
‹mime-type›
text/x-component
‹/mime-type›
‹/mime-mapping›

如此即可順利在IE6上正常顯示!!
參考網頁:
http://www.xs4all.nl/~peterned/csshover.html
http://www.hoeben.net/node/33

簡潔有效的jQuery "ThickBox" effect

最近一直在尋找popwindow的新花樣，之前也知道jQuery "thickbox"特效。特別利用這個週末來個實作，享受jQuery的小巧強悍特性。

想一想要分享的都在下面兩網站裡，內容潛顯易懂，請自行參考。第二個網站在範例code裡有把原創網站所沒有點出的重點寫出來，還不錯!!

參考網站:
http://jquery.com/demo/thickbox/
http://www.hsiu28.net/html/jss.php?id=19

Dreamweaver的Spry framework效能使用心得

最近專案客戶的新需求是在網站Header裡增加收合式Menu Bar的功能，第一個想到的是Adobe Dreamweaver所提供方便快速的Spry Framework。輕鬆幾個步驟自動產生基本功能的陽春Layout，接著在視覺美化上則透過熟悉的CSS語法配合新設計的圖檔加以重新定義成所需要的UI。在這一切都實作完成並進入測試時，卻發現美中不足的是----效能問題。

因為客戶網站為一電子商務網站，功能齊全。在複雜的企業規則與商業邏輯的程式運作上，再加上背後介接了數個系統，網站整體效能已經有點令人擔心。在此次Spry Framework的應用上，視覺效果的呈現明顯Lag。探究其原因主要在於客戶網站所套用的CSS檔案過多所造成。Spry Menu Bar是透過Spry Framework 的一支javascript檔去動態呼叫特定的CSS檔案產生效果並做支援跨browser的判斷處理，若實務應用在過於複雜、需要套用多支CSS檔案的網站，建議在實作前先進行簡單測試，評估是否在達成所需的視覺效果的同時有明顯的效能問題。

效能問題發生後，請教了幾位PG共同商議解決之道。最後是為求不更動現狀的考量下，放棄Spry Framework，而重新寫了一支純CSS的Menu Bar功能，並且符合客戶在支援跨4種Browser版本的要求。背後套用了Peter Nederlof所發表的一支behavior file，主要在解決IE6不支援清單 ‹li›‹/li›hover效果。而對於Absolute Position的 ‹div›碰上‹select›‹/select›element及Flash檔案所造成Layer被覆蓋的問題又另一解決方案issue。 有關Absolute Position的碰上‹select›‹/select›element及Flash檔案所造成Layer被覆蓋的問題，可以技巧性地透過‹iframe›‹/iframe›克服。Absolute Position的 ‹div›可覆蓋‹iframe›‹/iframe›，而‹iframe›‹/iframe›可覆蓋(或包覆住‹select›‹/select›element及Flash檔案，提供大家參考。

讓PNG去背效果也能在IE6正常顯示

網頁上所插入產品之類的圖片，若是沒有去背的話，則會有"貼膏藥"的塊狀感。單純的去背處理最好是在同頁面背景色的情況下處理，才能降低鋸齒邊的明顯度。

在IE7問世後，網頁設計人員紛感欣慰的是對PNG透明背景的支援。然而IE6市佔率存在的事實與客戶IE6相容的要求下，仍可能要準備GIF圖檔給IE6使用。

要解決PNG去背效果在IE6正常顯示，要使用微軟IE專用的濾鏡語法:

‹style type="text/css"›
.bgPhoto { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='system_stop_ok.png', sizingMethod='image');width:365px;height:157px;}
‹/style›

‹body›‹div class="bgPhoto"›‹/div›‹/body›


在‹div class="bgPhoto"›‹/div›容器裡會呈現一張寬365px、高157px的PNG圖，而且在IE6、IE7上均能正常顯示已有的去背效果(要PNG圖本身已做好去背才行)，FireFox則是以正常的CSS語法即可!!

語法說明如下:

1. sizingMethod有crop、image、scale三種。image是預設值，也就是頁面PNG圖片會依照原本Size顯示。如果使用scale的話，圖片則會依照div容器的尺寸縮放；如果用crop且圖片尺寸比DIV還大的話，圖片超出DIV的部分則會被切掉，局部顯示。
2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sample.png', sizingMethod='scale',enabled=FALSE);
   enabled則為效果的開關，如果值是false或1，就等於整個濾鏡效果都停用。
3. 使用AlphaImageLoader的做法，無論是寫在CSS還是HTML中，其圖片路徑一律皆採用HMTL檔案位置與圖片的相對路徑來寫(非CSS檔案與圖檔的相對路徑關係哦!!)，否則會找不到圖片。

非關CSS的IE8問題

客戶對於網站的瀏覽器支援要求含蓋IE6、IE7、IE8及FireFox最新版(目前是3.5.2)，近日在緊鑼密鼓的測試階段中，針對四個瀏覽器在CSS解讀差異所造成的跑版進行調整修改。然而在順暢的調整完畫面中卻發現我的IE8所呈現的完美畫面卻在同事的電腦裡"跑版"。在求證第三者後，發現唯獨只有一人的IE8所呈現的畫面有問題。時值農曆7月不會是卡到陰吧?!

在檢視每個安裝IE8同事的OS版本後發現，相同作業環境、相同IE8版本，卻有不同瀏覽結果。最初懷疑是否為IE8測試版UPDATE成IE8正式版所造成的問題。因此GOOGLE後注意到IE8"相容性檢視"功能，有些網站無法在 IE8 中正確顯示或正常運作，則啟用"相容性檢視"功能，果然恢復正常。

安裝IE8後，在iecompat.dll檔案裡會有一份Domain列表，表示在列表中的網站預設啟動"相容性檢視"，也因此在工具列上該功能無法做開/關設定，icon自動消失。而IE8的"相容性檢視"，就是採取IE7標準模式來讀取網頁，因為網頁符合IE7標準模式，此時在IE8自然會顯示正常。

參考文章:
1. 微軟技術支援服務(http://support.microsoft.com/kb/956197/TW/)
2. 小鎮遊跡點點村 (http://www.dotblogs.com.tw/littlebtc/archive/2009/04/11/ie8-modes-2.aspx)

頁面含有Anchor tag在Firefox瀏覽時會有問題

當網頁內容豐富而讓頁面拉得很長時，為求use friendly，設計人員會以Anchor tag來加速回到所指定的內容處，然而最近在實作時碰到下列問題:
若在FireFox瀏覽器上點選link到Anchor處，在頁面移動時，會讓頁面區塊部分被遮蓋住形成跑版。
這是因為Anchor所處外部容器在CSS定義上有overflow:hidden的宣告，因此在執行link連結到Anchor時，該容器會上移到上一層容器之外，造成上方部分區塊超出範圍而形成遮蓋的缺陷。因此，在CSS定義上要針對Firefox修改overflow宣告以解決此一問題!!