Kaie's Blog: css

Showing posts with label css. Show all posts

[+/-]

[IE8] IE=EmulateIE7 / 暫時解決IE8 layout問題

．Tags: all Browser css IE IE8

．Comment counts: 4 Comments

[+/-]

[CSS/htc] IE PNG Fix v2.0 Alpha 3

．Tags: all css htc IE

．Comment counts: 0 Comments

[+/-]

[XHTML] DOCTYPE (引用外部 DTD 規範)

　　Blog玩了這麼久，從來沒有手動從頭打造過一個網站，以致於一些細節的部份，都沒注意到，導致我浪費很多時間在Debug一個怪問題，還以為IE又Sucks了勒..囧。就是在弄和Browswer Compatibility(IE6、IE7、Firefox、Safari)有關的issue時，由於要打造一個"盡量"能夠在外觀上一致的Web User Interface，一直在搞CSS Hack這玩意兒，但卡在某個關卡，一直找不出為何css hack一直失敗，原本還想說，該死的M$又有新的patch導致IE6、IE7又可以識別某些特殊的selector了，害我一直找新的css hack，但沒想到是自己耍白痴，沒有基本常識，連 <!DOCTYPE> 這個最基本的東西都沒加到，當然css hack一直失效啦...OMFG，害我花了兩個多小時，結果玩了更多的CSS Hack，盡是一些「奇淫技巧」...Orz。
　　因此，我學到了，在寫XHTML的第一步就是記得聲明符合自己需要的DOCTYPE，但這些DOCTYPE又有許多Branch，要深入了解，得再花些時間，遵循"有名"大站的DOCTYPE來試試，不失為一個好方法。

※Blogger.com以及Facebook所使用的為，嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
※著名的設計大師Zeldman個人網站使用的是過渡的(Transitional):要求非常寬鬆的DTD，它允許你繼續使用html4.01的標識(但是要符合xhtml的寫法)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
引述自此站：
　　如果 HTML 缺少第一行的 DOCTYPE 設定，將會使得瀏覽器無法在「標準模式」下顯示 CSS 效果！
　　缺少第一行的 DOCTYPE 設定時，瀏覽器會變成 Quirks 模式， Quirks 模式有人翻譯為「舊版相容模式」、有人翻譯為「怪癖模式」...... 主要都是會讓網頁無法正確顯示 CSS 的正確效果，變成和 IE5 差不多的舊式效果！
　　因此以在 HTML 中的第一行一定要有 DOCTYPE 的宣告設定！XHTML 目前已發展到 XHTML 2.0 版本，但是在現今瀏覽器與 CSS 整合上的應用還是以 XHTML 1.0 版本的相容性最好， XHTML 1.1 以後語法的改變差異太大，有些常用的網頁語法都不能用了，因此目前最多人使用的還是 XHTML 1.0 版本。※參考資料來源： XHTML1.0 的文件架構

．Tags: all css XHTML

．Comment counts: 21 Comments

[+/-]

[CSS/htc] IE5.5+ PNG Fix

．Tags: all css htc IE

．Comment counts: 7 Comments

[+/-]

[CSS/htc] whatever:hove for IE

．Tags: all css htc IE

．Comment counts: 2 Comments

[+/-]

[Template] Semi-Transparent Layout in ThisbloG (半透明化模版)

．Tags: all blog css Design template theme

．Comment counts: 21 Comments

[+/-]

[CSS] Magazine Style Drop Cap

　　來分享一下，我們時常在雜誌常見的一個首字放大（drop cap, dropped capital letter），是很受歡迎的設計元件，用來做為商業通訊、雜誌文章、書籍章節或其它公開文件的開頭…之前看到某個教學，於是也跟著玩了起來囉...底下來看幾個範例吧!參考資料來源： Mandarin Design -> Magazine Style CSS Drop Caps

．Example1:
<span style="margin:5px 7px 0 0; float:left; background: #fff; border:2px dashed #aaa; line-height:55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;">旅</span>
旅美投手王建民6日對西雅圖水手隊差一點完全比賽，投了7.1局無安打、無人上壘的比賽，鈴木一朗形容王建民「有著冷靜的外表，但內心卻是火熱的。」他說：「我喜歡他。」原本鈴木一朗想在七局上成為打出第1支安打的打者，不過左外野深遠飛球遭到松井秀喜美技接殺。

．Example2:
<span style="border: 1px solid darkkhaki; padding: 3px; background: khaki; margin-right: 6px; margin-top: 5px; float: left; line-height: 55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;" >鈴</span>
鈴木一朗在6日的比賽中，直到七局上才意識到王建民有可能會締造完全比賽，在該局第一位上場打擊之前，他詢問隊友城島健司：「現在是完全比賽嗎？」城島回答說：「是的。」鈴木一朗便告訴城島，他要擔任打破完全比賽打出第1支安打的打者。

．Example3:
<span style="float: left; line-height: 70px; padding-top: 2px;">S</span>
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text. We used a font size of 56px for the first letter. If there is enough text an even bigger first-letter size looks good. The code can be adjusted for a slight overlap by adjusting the letter spacing. The color name chocolate tastes good today. There are more edible color names here.

．Example4:
<span style="border: 1px solid black; background: firebrick; margin-right: 6px; margin-top: 5px; float: left; line-height: 60px; padding-top: 2px; padding-right: 5px;">M</span>
Mike Golby might like the background color firebrick better than gold. Golby changes text colors for emphasis but if we don't specify the color for the text it will default to normal text color for that page. By the way, thanks for the Strunk and White Plumerias Mike. I noticed them when visiting your place to find an example of a color to use.

．Example5:
...
...
要如何有型，由你決定...

※以上Code中的CSS參數請自行客制化吧 >_^

．Tags: all blog computer css Design

．Comment counts: 7 Comments

[+/-]

[CSS] hideFocus Property

．Tags: all computer css Design firefox IE

．Comment counts: 5 Comments

[+/-]

[Browser] Browser Compatibility Notes

．Tags: all blog computer css firefox IE javascript

．Comment counts: 0 Comments

[+/-]

[CSS] A Cool blockquote for "Code style" and some blogging tips

資料來源：
良人的大秘寶 -> [筆記]在文章裡顯示優質的程式碼區

個人覺得蠻有質感的 ^_^ a nice css design!! 感謝「良人的大秘寶」的分享!! 樣式就如同下面的code block所示。

code  {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://chenkaie.googlepages.com/Code_BG.gif) left top     repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

個人依樣畫葫蘆地新增一個比較常用的參考資料來源(Reference Block，記得若要用code .ref{}這個語法的話，上面的code{...}也是不可或缺的...必需有這個code{..}存在的前提，code .ref{...}才會生效)，如下：

[Updated 2006-11-29]IE sucks again..囧rz! 最近發現用IE開的話，用我自訂的<reference> tag的話，在IE會失效，後來又換了<citation>這個字，沒想到還是sux...真無言，IE幹麼鎖死這麼多Keyword呀，真不知微軟在惡搞啥，給user的自由度這麼低!!
於是參考了synnwang的作法(感恩^^)，將原本底下這段

reference {
display: block; /* fixes a strange ie margin bug */
overflow:auto;
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 5px 0 15px;
}

換成下面這段，在IE才能work!!

code.ref{
display: block; /* fixes a strange ie margin bug */
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 0 0 15px;
font-size: 13px;
font: $bodyfont;
line-height: 1.6em;
}

因此若要使用<code.ref> tag，方法便如下：
<code class="ref"> 引用文字的部份 </code>

※因為常在Blog上post一些教學，把在Blog貼"html code"的一些tips記錄在底下：

將 < 以 < 取代
將 > 以 > 取代
將 & 以 & 取代

如此一來，所貼出來的html code便不會被Browser給解讀為掉，而造成貼出來的code都看不到..!!

[Updated 2006-12-26]若是自行一個一個取代的話，似乎也是有些麻煩，因此個人常用的方法是：透過Nopaste之類的站，像是：http://phpfi.com/ 使用的步驟如下：

將該填的欄位填完之後，(其實只要填source這個框框即可，其餘可以略過)
接下來，依照個人喜好(若選特定的某種語言，還會有美美的關鍵字highlighting唷!)，選擇位於右下角的"-auto detect"這個選單，選好後押save鈕!
然後便會產生你所貼的source coe於網頁上:
- 若此時你用的是Firefox的話，那恭喜你了，選對Browser，省事多了! 選取你要的source code部份，接著按右鍵->檢視選取範圍原始碼(View Selection Source)
- 若用IE的話(I am sorry...IE sucks)，無法觀看所選取的特定部份原始碼，只能直接檢示所有頁面中的原始碼，再自己找尋你剛剛貼的code!(或是是我對IE不熟，若有好的檢視原始碼方式，歡迎告知我，感謝!
接著再按右鍵->複製(Copy)，即可貼到你在Blogger中編緝文章的地方囉^^，很省事吧…這是我常用的方法! 請供大家參考....若有更棒的方式，懇求大家提供給我..XD

[Updated 2006-11-29]※有時Blogging時，因為後來有Update或是有寫錯筆誤之處，便會想要加上刪除線作為Highlight，而非直接在文章中刪除，同時也比較醒目，方便讀者閱覽..作法如下：<span style="text-decoration: line-through;"> deleted text part </span>

．Tags: all blog blogger hack computer css

．Comment counts: 25 Comments

[+/-]

[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box

為了使整個版面好看，但又不失支持Blogger的原則，還是要幫Blogger打個廣告，而且發現升級到Blogger beta之後，那個navbar裡頭的"Search Blog"這個功能，相當的不賴，他的Search Result會直接show在原本Blog中的#content-wrapper裡頭，也就是MainPage中，一整個就很像是WordPress所提供的「站內的全文搜尋」功能，個人相當滿意 :)。
※範例：像是搜尋Keyword "blog"的話，所呈現出來的結果就像這樣。

因此，我想要的呈現方式便是：將原本固定在版面上頭的navbar的行為設成：「隱藏在上頭看不到，一旦滑鼠移過去的時候，就會出現(還是有幫Blogger作個廣告吧 XD)」，然後將"Search Blog"的功能直接顯示在Sidebar中，方便搜尋 ^_^參考資料來源： Basang Panaginip -> Setup a Blog: hide or remove the navbar and add blog search box．動態顯示Navbar的方式如下，只要在template中加入此段css code即可(IE不適用..對於IE的愛用者感到萬分抱歉，請儘速轉移到Firefox...XD)：

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0);
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

．在Sidebar中加入Search Blog的功能，只要新增一個Page Element(HTML/JavaScript)，然後加入底下的code:

<form id="searchthis" action="http://YourID.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
<br/>By Google (Show result in this Blog)
</form>

至於一些個人化語法的修改，就請參考原著，不再詳述，基本上改上面的size:"Search Box的大小"，value:"所要顯示的文字"。

※由於上面那個Blog Search「目前」對於中文字的搜尋似乎還不太準確(給Google一些時間，相信他一定會改善的)，於是便需借助"Technorati"這個站的幫忙囉，可是透過他的網站所產生的javascript code，所呈現出來的樣式，並非我想的，於是便作了一些修改，拿掉些我不想要的東西 ^^，source code如下：

<script type="text/javascript">
<!--
drawTREmbed( '<div id="technorati">' +
'<form id="te_s" method="post" action="http://www.technorati.com/search.php">' +
'<input id="te_search" type="text" size="15" name="s" maxlength="255" /> <label for="te_search"> </label> ' +
'<input type=\"submit\" class=\"btn\" value=\"Search\" /> <input type=\"hidden\" name=\"sub\" value=\"searchlet\" /> <input type=\"hidden\" name=\"from\" value=\"http://chenkaie.blogspot.com\" /> <input type=\"hidden\" name=\"cc\" value=\"8hq5ubtxcg\" /> </form>' +
'Powered by <a href="http://www.technorati.com/?cc=8hq5ubtxcg"><img border="0" src="http://static.technorati.com/pix/tn-tiny.gif" alt="Powered by Technorati" /></a>'+
'<br/><a href="http://www.technorati.com/search/http://chenkaie.blogspot.com?cc=8hq5ubtxcg" id="te_lh" target="_blank" >» Blogs that link here</a>' +
'</div>'
);

function drawTREmbed(s){ document.write(s); }
// -->

</script>

．Tags: AJAX all blog blogger hack computer css google javascript search

．Comment counts: 9 Comments

[+/-]

[Blog] Expandable posts with Peekaboo view (blogger beta)

這個功能，個人覺得比起之前的「"...Read More"篇」的更為實用，因為不需要重新載入新的頁面，直接就打開來...反應速度更快，閱讀完畢時，又可馬上縮起來，不占版面空間，相當的方便 ^_^

．實作方法如下：

Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間，已經無法承受，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼，若你沒有加過以上那一行的，就略過，直接加以下這段code...
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

Step2:找到底下這段，加入紅色的部份

<b:includable id='post' var='post'>
<div class='post'  expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>

Step3:找到底下這段，同樣加入紅色的部份

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>[+/-] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>[+/-] Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats --></div>

※若要更改"顯示文字"，請自行更改上頭程式碼裡頭的"[+/-] Read More..."和"[+/-] Summary only..." 這兩個文字標籤...
Step4:基本上這樣就完成了! 最後，先登入Blogger，再到「Settings->Formatting」，將<span id="fullpost"> 想要隱藏的部分 </span>填入Formatting的框框裡即可，如此一來，每次編輯新文章時，即會自動填入所需的程式碼囉 ^_^ oh ya!!
※注意是span，並非如同之前這篇「"...Read More"篇」所提到的，是用div...請小心!!

※參考文獻：
．Hackosphere -> Expandable posts with Peekaboo view
．How can I make show/hide links for my posts?

．Tags: all blog blogger hack computer css WTF

．Comment counts: 108 Comments

[+/-]

[Blog] adding "...Read More" tag in Blogger beta

．參考資料來源：有關 Blogger in Beta-水瓶子 Hackosphere轉錄文章來源： Blogger Beta 繼續閱讀功能改良
一般在blogger上使用繼續閱讀功能的方式都是在想要隱藏的文章上放上tag，然後再利用css的display:none來隱藏該篇文章，由於display:none所隱藏的部份，不論是在IE或是Firefox下瀏覽，一樣都會把隱藏部份下載到cache，所以如果首頁的文章過長或是圖片過多，一樣會影響到首頁的瀏覽速度。

所以這篇利用Javascipt，把想要隱藏的文章直接remove掉，提高首頁的讀取效率，並且還具有Read More標籤適時才出現的功能。
首先進入編輯html，請記得把Expand Widget Templates打勾，然後在<head>間放入Javascript code
<script type="text/Javascript"> function hidePost(postUrl) { var label=document.getElementById("fullpost"); if(label!=null){ eA = document.createElement("a"); eA.setAttribute("href",postUrl); eA.setAttribute("title","Read More"); eA.appendChild(document.createTextNode("...Read More")); eB = document.createElement("p"); eB.setAttribute("id","read-more"); eB.appendChild(eA); label.parentNode.appendChild(eB); label.parentNode.removeChild(label);} } </script>

接下來找到
<p><data:post.body/></p>
用下面的code取代它
<p><data:post.body/></p> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.url'> <script type='text/javascript'>hidePost('<data:post.url/>');</script> </b:if> </b:if>
最後，把想要隱藏文章部份的tag中，加入id="fullpost"就完成了，即
<div id="fullpost"> //隱藏部分的文章 </div>
※註：Chagg says:「目前測試，在IE下確實有提升讀取效率，不過在Firefox下好像沒什麼用，照樣還是把隱藏部份下載到cache 囧rz，目前還在想有什麼方法可以對付Firefox」

．手動加id="fullpost"的動作如何自動化呢：

很簡單，只要利用Blogger提供的功能，先登入之後，到「Settings->Formatting」，將<div id="fullpost"> //隱藏部分的文章 </div>填入Formatting那邊即可，如此一來，每次編輯新文章時，即會自動填入所需的程式碼囉 ^_^ oh ya!!

．Tags: all blog blogger hack computer css

．Comment counts: 48 Comments

[+/-]

[Blog] only show "Post Title" at Lable and Archive Page

．Tags: all blog blogger hack computer css

．Comment counts: 3 Comments

[+/-]

[Blog] Overflow problems in IE (sidebar appears at bottom of blog)

．Tags: all blog blogger hack computer css

．Comment counts: 5 Comments

[+/-]

[CSS] Opacity in Mozilla and IE

最近在玩CSS語法中的opacity(不透明度)屬性，發現在Browser之間的相容性有很大的問題...囧rz，真是煩人的問題，W3C的標準似乎是以"opacity: 0~1"即可，但是在Internet Explorer 6/7 之中似乎要用 "filter: alpha(opacity=0~100)"才行，而Firefox雖有支援標準，但好像也有自家定義的"-moz-opacity: 0~1"...真是一大堆無意義的東東。

知道了以上三種CSS語法，但是真正在改我的Blog時，卻還是遇到「Firefox works, IE sucks」的問題...心頭浮現出無限多個...囧囧囧...真想揍人，偏偏IE的占有率還是比較高的，為了讓Blog展現出來的效果能夠一致，還是得想辦法弄好這個鳥問題：「在 :hover 的處理上， IE 要在滑鼠移到文字上面時，才會觸發 :hover 運作，而 mozilla firefox 只要移到設定 :hover 的 element 上面，還沒有碰到文字，就可以觸發 :hover 的 CSS 變化。」

於是就去問了一下孤狗大神，孤到了底下這篇好文，寫得很棒...解決了我的問題。

Mandarin Design: CSS Opacity and Transparency

解決方法大致上如下，作者有講到如此一來，IE、Fx、Opera都可以work囉 ^_^，主要就是利用onmouseover的屬性，解決IE中「:hover」的問題，只要在想要產生透明化效果的tag裡頭動些手腳即可 ^^，快往下看吧：

．text/css code：
.transOFF {width: 100%; opacity:1;filter: alpha( opacity=100 ); -moz-opacity: 1;}
.trans25 {width: 100%; opacity:.25;filter: alpha( opacity=25 ); -moz-opacity: 0.25;}
.transON {width: 100%; opacity:.50;filter: alpha( opacity=50 ); -moz-opacity: 0.5;}
.trans75 {width: 100%; opacity:.75;filter: alpha( opacity=75 ); -moz-opacity: 0.75;}

．html code：
<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'">
<p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.</p></div>

※注意上頭的「width: 100%;」，發現若這行沒加的話 ->「IE sucks again」...囧rz，透明效果便又無作用。

還有「html>body」這個"child selector"，原本的用意是在IE 6中隱藏CSS定義，也就是Non-IE的Browser都可以認得，IE 6自動 skip，But...在 IE 7好像已經支援了，所以...令人感覺非常 suck... Orz

．Tags: all computer css

．Comment counts: 0 Comments

[+/-]

[CSS] Good Articles & Sites about CSS

．Tags: all computer css

．Comment counts: 0 Comments

[+/-]

[CSS] How to remove Ads in Wretch

[Howto] 如何以CSS語法去掉無名中討人厭的廣告呢?

．For Album

#ad_banner a{
clip:rect(500px 0px 0px 500px);
position:absolute}

#ad_banner a{
clip:rect(0px 0px 0px 0px);
position:absolute;
left:100px;
top:150px;
}

#logo,
#ad_button{
display:none}

center a img{
display:none !important}

table tr #logo{
display:none !important;
height:0 !important;
width:0 !important}

table tr ad_banner a img,
table tr td object,
table tr td embed,
td center font a,
td .small-c tr td,
table tr td div,
td#ad_banner a img,
object{
display:none !important;
height:0 !important;
width:0 !important}

table tr td{
height:0 !important;
width:0 !important}

/* Updated2006-11-16 Wretch換廣告語法，That's ok…兵來將擋、水來土淹...*/
#ad_flash{
display:none !important;
}

．For Guestbook

#logo, #logo img{ left: -1000px; position:absolute}
.pass img{ display: block !important}
div table .small-c tr td{ display: none}
div table tr td, table tr td{ height: auto !important; width: auto !important}
img, #floatlayer, #ad_top, object, embed{ display: none !important}

不知這些語法可以用多久，反正Free的就暫時用一下吧!!但是好像只有IE才有用，在Firefox有時會失效，真是奇怪...囧rz，沒有仔細研究過這兩段語法，太閒時再來Research一下啦 ^_^

[Update 2006-10-31] 原先在奇摩知識上找到的上面那段「For Album」的，用在我的相本好像有點Bug，在IE上會有位移(shift)的情形產生，造成整個版面歪了一邊囧rz ....後來，研究了一下，把原本紅色的那段修改成綠色的那段之後就OK囉 ^^

但了之後，也不算是Perfect啦...像是相簿裡頭的Banner會消失不見，而帶來的影響便是Description無法顯示出來了，還有原本「進階功能」中的「空間王」和「搬圖王」也連帶著消失了，但這都不打緊，重要的是討人厭的廣告不見啦....Song la!!

※手動進階功能啟用方法：

在某一本相本的URL之後，自行append "&space=1"即可啟動空間王，同樣地，append "&move=1"即可啟動搬圖王 ^_^
例如：http://www.wretch.cc/album/album.php?id=SambaGhost&book=3 後面接上" &move=1"=> http://www.wretch.cc/album/album.php?id=SambaGhost&book=3&move=1 就可以可啟動搬圖王啦

Kaie's Blog

My Secret Notebook (我的火星文記事本)

My Flickr

[IE8] IE=EmulateIE7 / 暫時解決IE8 layout問題

[CSS/htc] IE PNG Fix v2.0 Alpha 3

[XHTML] DOCTYPE (引用外部 DTD 規範)

[CSS/htc] IE5.5+ PNG Fix

[CSS/htc] whatever:hove for IE

[Template] Semi-Transparent Layout in ThisbloG (半透明化模版)

[CSS] Magazine Style Drop Cap

[CSS] hideFocus Property

[Browser] Browser Compatibility Notes

[CSS] A Cool blockquote for "Code style" and some blogging tips

[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box

[Blog] Expandable posts with Peekaboo view (blogger beta)

[Blog] adding "...Read More" tag in Blogger beta

[Blog] only show "Post Title" at Lable and Archive Page

[Blog] Overflow problems in IE (sidebar appears at bottom of blog)

[CSS] Opacity in Mozilla and IE

[CSS] Good Articles & Sites about CSS

[CSS] How to remove Ads in Wretch

[Blog] Blog Design Trends

Themes & Fonts

Search

Author

Categories & Toc

Blog Archive

Recent Comments

Loading...

Hot Posts

Loading...

Followers

Meta & Statistics

Error! Javascript not supported here! Please enable Javascript! Kaie's Blog

Tags Cloud

My Secret Notebook (我的火星文記事本)

My Flickr

Loading...

Loading...

Followers

Kaie's Blog