前幾天學弟問我一個問題，說他 CSS 排版的網頁在大部分瀏覽器都正常，唯獨 IE 怪怪的，網頁中的 DIV 元素怎麼樣都無法置中，困擾了他許久，他的原始碼內容大致長這樣：
<!-- Head area -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
<!--
#content {
margin: 0 auto;
width: 500px;
}
-->
</style>
</head>
<body>
<!-- Content Begin -->
<div id="content">Content</div>
<!-- Content End -->
</body>
</html>
嗯，看起來不應該會有什麼問題的，那是什麼原因讓 IE 無法將區塊置中勒？
我突然注意到他網頁開頭的那一行註解，因為自己寫網頁到現在從未在開頭使用過註解…
果然，拿掉以後就一切正常了。IE，還真是搞不懂你啊！
(註：全系列 IE 都有此現象)
網頁設計
css, 排版, 網頁設計
Drag & Drop(拖放) 效果若是應用得當可以讓 UI 操作更直覺簡單，目前最常見的大概就是對項目作排序，或是像購物車將物體從某區塊移到另一區塊。
網路上雖然有很多 Drag & Drop 的範例，但有些過於複雜或是不夠完整，前陣子為了交作業嘗試用 jQuery+jQuery UI 做了一個簡單的 Demo，果然快速、簡潔、流暢，不得不再次向大家推薦 jQuery 啊！
Demo 網址：http://blog.linym.net/demo/jquery/jquery_DragDrop.html
Ajax, 程式筆記, 網頁設計
Drag and Drop, JavaScript, jQuery, UI
相片如果搭配了合適的邊框，可以讓相片看起來更有味道及特色，而一般相片加框都是使用軟體來達成的，所以電腦裡可能會有這些檔案：
- 原始相片檔
- 裁切、後製的檔案
- 縮圖無加框的檔案
- 縮圖有加框的檔案
但是為了應付各種需求，總不可能所有檔案都上傳到相簿吧？所以我只作前兩項，然後將想要保留的相片上傳到 Flickr，因為 Flickr 支援原始檔下載(升級Pro) 可以當作多一份備份，又會自動產生五種大小的縮圖，而且品質都不錯，所以要在 Blog 或別的地方展示時，只需選擇想要的大小再搭配 CSS 加框即可。
CSS 加框的部份找了很久，最後找到 CSS Decorative Gallery 這篇，他所 Demo 的是簡單也最多樣化的，給大家參考看看。
好書好站, 網頁設計
css, Flickr, 加框, 相片, 網頁設計, 邊框
本站顯示程式碼是用「SyntaxHighlighter」，有人將它寫成 WP plugin，使用上非常方便，不過 SyntaxHighlighter 預設的呼叫語法是用
<pre name="code" class="html">......</pre>
由於 W3C 規範中 pre tag 是沒有 name 屬性的，所以鐵定要跟驗證貼紙說 bye bye，如果真的很在意的話可以這樣修改：
1. 修改 syntaxhighlighter.php
找到
<pre name="code"
改成
<pre title="code"
2. 修改 files/shCore.js
找到
tags[i].getAttribute('name')
改成
tags[i].getAttribute('title')
以 title 替換 name 屬性，這樣就能通過驗證了。
參考文章：Google SyntaxHighlighter - workaround for XHTML validation issue
PHP, 程式筆記, 網頁設計
SyntaxHighlighter, W3C, wordpress
老實說這個標題不知道要怎麼下比較好理解。我想要滑鼠移過表格某一列時會變色，而且不只超連結的文字可以點，而是整列都有連結效果....囧...先直接看 Demo 吧！
要達到這種效果，很多教學都是使用 JavaScript 裡的 onmouseover、onmouseout 及 onclick 事件來達成，不過現在有純 CSS 的解法，並且通用多數瀏覽器，這個技巧其實在很多國外網站看過，不過昨天向艾德請教之後才真正學起來^^
#tb td a {
display: block;
height: 35px;
line-height: 35px;
background: #FFF9E0;
}
#tb td a:hover {
background: #E2D9B2;
}
關鍵就是使用 display: block 將 a 顯示為區塊元素，然後依照需求設個高度或寬度給它即可，line-height 給予相同高度可以確保文字垂直置中，這樣比使用 JavaScript 方便多囉。
網頁設計
css, Web 2.0, 標準, 網頁, 網頁設計
近期迴響