Positioning / Sorting DIV by using HTML and CSS Position instead of Table

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

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;
}

Fixed Height of Div

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;">

Adsense Is Not Working On Blogspot - Fixed

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

Comment Tags For Every Coding

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

CSS website layout display different/wrongly in IE

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/AVvXsEg1QecXy6gMg5jM9zMeupJhhDqvofwn1WIlufRg2MVgsZpexPlgdbyvTuSy7O2zAi3lPS4jVKQb23Z6M66dpso7v4KvFhR0jLGbEFnTRHNnjT0BKKTixfZy8F8E-GJSf6AOo5RET4T-p0M/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.

CSS Mouse Click Change Picture

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

Internet Explorer Cannot Display Picture

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.

Make top flash menu stay on top of the bottom flash menu

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;