Google Adsense is hard, but if you keep focus and learning how it works, making money is no more just like flapping your hand. Imagine how beautiful your life is by seeing those earning digits jumping everyday...

Here I want to share the fastest and the easiest way to make money with Google Adsense. But before that, you might want to see how much I have earned today. See the screenshot below:

Click here for the sake of your better life!

Here the screenshots:

Safari 3.1.2

Chrome 1.0.154.48
 

No problem found in Safari 3.1.2 Nightly, Firefox 3.0.6, Opera 9.63 and IE7.

Test the slickspeed here: http://xing.web.id/slickspeed/

Selectors I used:

• p:nth-child(even)
• p:nth-child(n)[class] > a
• p:nth-child(even)
• p:nth-child(n)[class] > a
• p:nth-child(even)
• p:nth-child(n)[class] > a
• p:nth-child(even)
• p:nth-child(n)[class] > a
• p:nth-child(even)
• p:nth-child(n)[class] > a

JavaScript Frameworks I used:

• jQuery 1.2.6
• jQuery 1.3.2
• Dojo 1.2.3
• MooTools 1.2.1

New features on 1.3 are:

• Replaced old CSS selector engine with Sizzle, a standalone framework which is developed by John Resig and donated to the Dojo Foundation.
• A new event API, Live Events, that can binds event to the future DOM elements.

Rewritten features are:

• Standardized jQuery Event according to W3C standards and makes it work smoothly across all browsers.
• Rewritten HTML Injection, and it's 6x faster than before.
• Rewritten .offset() from scratch, and it's 3x faster than before.
• Deprecated browser sniffing API, replaced by a new technique called 'feature detection' that simulate a particular browser feature or bug to verify its existence. This feature detection is encapsulated into a new object, jQuery.support.

The release note of this version can be read at here.

Trivia:

Version file size comparison:
jQuery v1.3.0 (115KB), minified (53.7KB) and gzipped (17.8KB)
jQuery v1.2.6 (97.8KB), minified (54.5KB) and gzipped (15.6KB)

or...

Should I use tables for layout?

• Denies the existance of Rocky V ?
• Rocks out to the dance noise sound of Chinese Forehead ?
• JavaScript by Dreamweaver ?

These questions weird enough, right? In fact, these 3 questions are part of rule to become Web 2.0. Try to validate your website with this Web 2.0 Validator, and you will get an interesting (somewhat funny) Web 2.0 score of your website. Here is my blog's score:

This validator still in "beta" version, and the possibility of getting undesirable result will probably happen. Like mine,  I got this:

"Appears to use RSS ?  No"

... but surely I am using now.

Safari 3.1.2

Google Chrome

Opera 9.52

Mozilla Firefox 2.0.0.18

Mozilla Firefox 3.0.4

IE 6

IE 7

The layouts above were constructed by the following HTML and CSS:

HTML:

<div id="globalnav">
  <ul id="menu">
    <li class="page_item home-link current_page_item">
      <a href="http://xing.web.id/blog/">Blog</a>
    </li>
    <li class="page_item">
      <a href="http://xing.web.id/blog/about/">About</a>
    </li>
    <li class="page_item">
      <a href="http://xing.web.id/blog/useronline/">Who’s online?</a>
    </li>
    <li class="page_item">
      <a href="http://xing.web.id/blog/lifestream/">LifeStream</a>
    </li>
  </ul>
</div>

CSS:

div#globalnav {

  border-bottom: 1px solid #005599;

  height: 22px;

  margin: -20px auto 15px;

  text-align: right;

}

ul#menu {

  list-style-image: none;

  list-style-position: outside;

  list-style-type: none;

}

ul#menu li.page_item {

  display: inline;

  padding: 0 10px;

  text-align: center;

}

ul#menu li.current_page_item {

  background: white;

  border-color: #005599 #005599 white #005599;

  border-style: solid;

  border-width: 1px;

  padding-bottom: 5px;

}

ul#menu li a {

  position: relative;

  text-decoration: none;

  top: 2px;

}

I tried to figure out where the problems were. Then I found:

• <ul> has its default top and bottom margin and this is critical, so I fix it by adding margin:0px; to ul#menu
• The bottom border of div#globalnav supposed to be covered by current selected page style of <li> (.current_page_item), but I made a mistake, I put these styles:

  position: relative;

  top: 2px;

  in ul#menu li a that didn't achieve my purpose. So I move them to ul#menu li.page_item

• There's 1px difference of <li> position (height? or padding?) between Gecko and WebKit. WebKit somehow more 1px than Gecko. Sigh, I have no idea if by using CSS could solve my problem (of course I had tried several ways, but didn't working). So I used a small hacking, I put a <div> (id="hack") right under the <div id="globalnav"> with the following style:

  background: white;

  height: 15px;

  Since the ul#menu li.page_item had been styled position: relative;, it will stays on the top of every element. In this case, element stacking order rule is definitely needed here to be applied well. So, I simply give position: relative; in div#hack.

Voila!

div#globalnav {

  border-bottom: 1px solid #005599;

  height: 20px;

  text-align: right;

}

ul#menu {

  list-style-image: none;

  list-style-position: outside;

  list-style-type: none;

  margin:0px;

}

ul#menu li.page_item {

  display: inline;

  padding: 3px 10px;

  position: relative;

  top: 2px;

}

ul#menu li.current_page_item {

  background: white;

  border-color: #005599 #005599 white #005599;

  border-style: solid;

  border-width: 1px;

}

ul#menu li a {

  text-decoration: none;

}

div#hack {

  background: white;

  height: 15px;

  position: relative;

}

Screenshots:

Safari 3.1.2

Google Chrome

Opera 9.52

Mozilla Firefox 2.0.0.18

Mozilla Firefox 3.0.4

IE 6

IE 7

Well, while I was testing on WebKit browser, I found something very odd (or rather I call it a 'bug'?) and this really took me whole day finding out the problem. This bug only occur on WebKit browser. I'll write this WebKit layout bug at another post. ]]> http://xing.web.id/blog/2008/11/tab-css-fixing/feed/ 0