utf-8 cannot display chinese charactor? Solution steps :

1) On your html editor (Adobe Dreamweaver), click "Modify" on top menu.

2) Click "Page Properties".

3) Click "Title/Encoding".

4) Encoding choose "Unicode (UTF-8)".

There is 3 ways to implement multiple languages website.

1)put english, malay, chinese hyperlink on each pages profile-malay.php, profile-english.php, profile-chinese.php. Goodness is simple coding. Two weakness : Weakness 1 is the url is long and ugly. Weakness 2 is hard to maintaince, let say there is the word "age" in 100 pages files, and u want change the "age" to "how old", u need to open 100 pages to change it, very wasting time.

2)profile.php page body content can be changed by using jquery call profile-malay.php, profile-english.php, profile-chinese.php. Goodness is url is short and beautiful. Two weakness : Weakness 1 is lot of jquery coding in begining, for example, if profile-malay.php has the link of edit-malay.php, u need to modify the edit-malay.php to edit.php, then in edit.php jquery call edit-malay.php. What if edit-malay.php have another link save-malay.php? Lot of modifications. Weakness 2 is hard to maintaince, let say there is the label"age" in 100 pages files, and u want change the "age" to "how old", u need to open 100 pages to change it, very wasting time.

3)change all html label into php variable, save all different languages labels into database. Examples, php variable $age for malay language table in database is "umur". Goodness is easy to maintance, when need to change "age" to "how old", no need open all pages, just need to edit the record in database. Goodness 2 don't need to use jquery call another page. No weakness.

Why password textbox is not empty but still show error message "密码不能为空"? because google chrome messing with the form. Google chrome autofill the username and password textbox. My javascript code CANNOT detect the textbox is not empty if the textbox is filled by chrome autofill feature. All chrome autofill is yellow background. There is no way to disable autofill in chrome new version, cannot use autocomplete="false", cannot use autocomplete="off" too, even in HTML5 also cannot. So decide to hack it by css and jquery :

input:-webkit-autofill { -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */ -webkit-text-fill-color: white; } input:-webkit-autofill:focus { -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset; -webkit-text-fill-color: white; } $("#username").click(function () { $("#username").val(''); }); $(".password").click(function () { $(".password").val(''); }); But above method got 2 weakness : 1) Eg : username textbox autofill "zac1987" but the user want the username textbox to be empty, css change autofill words into white color, so the user cannot see the words, so the user thought the textbox is empty, so when click submit button "zac1987" value will be inserted into database.

2) Since ccs change autofill words into white color, when browser show autocomplete / autofill choices of selection drop down list, eg : "zac1987", "Michelle", "Peter". when the user select any choice from the autocomplete drop down list, Eg, if the user select "Peter", the user cannot see the word "Peter" in the textbox because css change autofill word into white color. The worse is jquery and javascript cannot detect the textbox value is autifill word or keyboard type in word.

Since this method has 2 weakness, so I am not going to use this method. Try very hard to figure out other method on how to prevent browser autofill / autocomplete. There is no way, so use other hack. Chrome only autocompletes the first <input type="password"> and the previous <input>. So I added:

<input style="display:none"> <input type="password" style="display:none">
To the top of the <form> and the case was resolved.

How to use html and css to arrange / sort / position 3 divs like the picture below?
We can't do that with <table><tr><td> without css margin-top:-50px. Any other way to do it without using css margin-top:-50px? The solution is I just need css position:relative on wrapper div (green color). Then css position:relative on 1st div. Then Css position:absolute, top:10px; left:220px; on 2nd div. Then Css position:absolute, top:220px; left:210px; on 3rd div. Example of codes :
<style type="text/css"> #div1 { position:relative; background-color:green; width:500px; height:500px; } #div2 { position:relative; background-color:#0FF; width:200px; height:400px; top:10px; left:10px; } #div3 { position:absolute; background-color:yellow; width:200px; height:200px; top:10px; left:220px; } #div4 { position:absolute; background-color:pink; width:200px; height:200px; top:220px; left:220px; } </style> <div id="div1"> <div id="div2">A</div> <div id="div3">B</div> <div id="div4">C</div> </div> If u want to move the wrapper to center of page, u can use margin: 0 auto;

If u want to move the divs inside the wrapper to left, u can use float:left; But float:left; makes the wrapper cannot apply height:auto which depend on height of div inside the wrapper. Solution is remove float:left

html checkbox display different on IE and Firefox as default just the same as picture above. You can make them become the same by writing the following css codes :

input[type=checkbox]{ /** if you put input without [type=checkbox], this css will effect on your buttons and textboxes too. **/
width: 14px;
height: 14px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
}

how to have fixed height of div? I have 300px height of div, but it show 0px height when there is no content in the div.

Reason
Div doesn't have height attribute, so you cannot write <div height="400px">.

Solution
You must use css to assign the height of div. For example, <div style="height:400px;">

You don't need to correct the codes of Adsense if you add the codes onto the side-bar on your blog since the side-bar is using HTML/Javascript which is not allow xml.

But if you go to Dashboard > Design > Edit HTML (This HTML editor allows xml), you need to modify the codes of Adsense :
1) Change & into &amp;
2) Change < into &lt;
3) Change > into &gt;
4) Change " into &quot;
5) Change ' into &apos;
For example, the blue codes below is original codes of Adsense, and the yellow codes below is what I have after changed all the symbols :
<script type="text/javascript"><!--
google_ad_client = "pub-0690220431785051";
/* 728x90, created 8/7/10 */
google_ad_slot = "8652075993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

&lt;script type="text/javascript"&gt;&lt;!--
google_ad_client = &quot;pub-0690220431785051";
/* 728x90, created 8/7/10 */
google_ad_slot = &quot;8652075993&quot;;
google_ad_width = 728;
google_ad_height = 90;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;

Please double check to make sure you have changed all the symbols on the codes already, if you are lazy to change the codes by yourself, you can always use the tool on this page to help you change the code : http://blogcrowds.com/resources/parse_html.php.

You might also like this : http://ye5.blogspot.com/2010/12/how-to-use-google-adsense.html

Html
<!-- comment here -->

---

Css
/*comment here*/

---

Javascript
<!-- comment 1 here
javascript code here
// comment 2 here -->
Without the <!-- and -->, the browser will display "comment here 1" as normal text. So if it is html document, you need to put <!-- and -->, if it is js document, you don't need to put <!-- and -->.

The two slash // tell the browser's JavaScript interpreter that the rest of the line is not valid JavaScript code.

---

Ajax
// comment here

---

Php
1) // comment here
2) # comment here
3) /* comment here */

---

Mysql
/* comment here */

---

Asp
'comment here

Problem :
Website layout display correctly on all other browsers except Internet Explorer.
Solution :
You can make your website displayed correctly on IE and all other browsers by using the css code below :
* { margin: 0; padding: 0;}
p { word-wrap: break-word; }
.clear { clear: both; }
.clear:after { content: ""; display: block; height: 0; width: 100%; }
a:active { -moz-outline-style: none; outline: none; }
:focus { -moz-outline-style: none; }

for
<li>, please use the css code below :
vertical-align: bottom;
display: inline;

---

Problem :
<div name="Apple" style="float:left;">
<span name="Banana" style="float:right;"></span>
</div>
If you write code above, the Banana will appear below Apple for IE. Banana will appear at the same line for all other browsers.
Solution :
<div>
<span name="Apple" style="float:left;"></span>
<span name="Banana" style="float:right;"></span>
</div>

---

Problem :
IE cannot display the picture but all other browsers can.
There are two possible solutions :
1 - It is because the picture is CYMK color mode, not RGB color mode. IE cannot display CYMK color mode picture. You can use picture editor to change the CYMK color mode of the picture to RGB color mode. If you are using Photoshop, you can open the picture by Photoshop, then click "Image" from top menu, then click "Mode", then click "RGB Color", then save the picture. More info at : http://ye5.blogspot.com/2010/12/ie-cannot-display-picture.html

2 - It is because the css code has syntax error. IE is case sensitive, but all other browsers are not sensitive. For example,
.mypic{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruyNgZBe9p-PePoaNcHivm-wXr13CCpTQCKgyi2eugKU_-kBn7mMR-Q9mpjLQLHrGM4E_UTT1MgJfMKxisHVLx6DuEH3Y1VVvC2-xU14pmbDS5znQioSksaxEx5faIwgACsuJjqdg5J0/s1600/comm.jpg)left no-repeat; }
From the code above, we must put a spacing before the word "left".

---

line-height:18pt; is inconsistent on IE, Firefox and Chrome. How to make it consistent on all browsers?
Answer : Change pt to px or em.

---

html checkbox display different on IE and Firefox as default just the same as picture above. You can make them become the same by writing the following css codes :

input[type=checkbox]{ /** if you put input without [type=checkbox], this css will effect on your buttons and textboxes too. **/
width: 14px;
height: 14px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
}

---

Please write a comment below if you have any other case about IE display the website layout wrongly.

You must have 3 different pictures :
1 - display the picture when the mouse is out from the picture.
2 - display the picture when the mouse is pointing on the picture.
3 - display the picture when the mouse is clicking on the picture.
Please use your mouse to point on the picture below, and click it to see the different pictures.
Code :
HTML :
<div id="header1" width="259px"><a href="http://your-website-link"></a><img src='http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3b.jpg' style='margin-left:259px; margin-top:-128px;'/></div>

CSS :
#header1 a {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:link {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:hover {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a2.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:active {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a3.jpg);
height:128px;
width:259px;
display: block;
}

Note : Browser will not load the other two pictures when the mouse is out of the 1st picture. The user cannot see the 2nd picture immediately when the mouse is pointing on the 1st picture, the user must wait for few seconds then only can see then 2nd picture because the browser need few seconds to finish load the 2nd picture. So you need to preload the 2nd and 3rd pictures even when the mouse is not pointing / clicking them. You can use css code display:none to do the picture preloading because browsers will still loading the picture which is display:none. For example, you can simply copy the code below :
<img src="http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a2.jpg" style="display:none;"/>

<img src="http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a3.jpg" style="display:none;"/>
and paste it anywhere at your html code.

You can download the picture PSD file from : http://ye5.blogspot.com/2010/12/photoshop-pressed-button-and-glassy-top.html

All other browsers like Mozilla Firefox, Maxthon, Opera, Safari, Google Chrome can display the picture but only Internet Explorer cannot display the picture, why? It is because the picture is CYMK color mode, not RGB color mode. IE cannot display CYMK color mode picture.

If you are using other browsers like Mozilla Firefox or Google Chrome to open this page, sure you can see the two pictures below, but if you are using Internet Explorer to open this page, sure you cannot see 1 of the picture below :

RGB color mode picture

CYMK color mode picture

The following chart shows the different browsers support RGB and CMYK Picture :

Browser	RGB	CMYK
IE 6	Yes	No
IE 7	Yes	No
IE 8	Yes	No
IE 9	Yes	Yes
Firefox 2.x	Yes	No
Firefox 3.x	Yes	Yes
Google Chrome 5	Yes	Yes
Safari 4	Yes	Yes
Safari 5	Yes	Yes
Opera	Yes	Yes

Solution
You can use picture editor to change the CYMK color mode of the picture to RGB color mode. If you are using Photoshop, you can open the picture by Photoshop, then click "Image" from top menu, then click "Mode", then click "RGB Color", then save the picture.

After you apply wmode="transparent" to make the background of both menus become transparent, you just use the following css code for both menus :
z-index:auto;
position:absolute;
width:auto;
height:auto;