I was looking for a nice and simple CSS tabs implementation and came across:
http://htmldog.com/articles/tabs/

While this was a nice solution, it didn’t support padding the tabs and when you did it didn’t look right in all the browsers so I had to modify it to this:

HTML side:

<div id="tab-nav"> 
   <ul>
      <li id="selected"><a href="#">1st tab</a></li>
      <li><a href="#">2nd tab</a></li>
      <li><a href="#">3rd tab</a></li>
   </ul>
</div>
<div id="page-content">
   Some content
</div>

CSS side:

#tab-nav {
	border:1px solid #FFFFFF; /* Stupid IE7 */
}
#tab-nav ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
}
#tab-nav li {
	float:left;
	border: solid;
	border-width:1px 1px 0px 1px;
	border-color:#666666;
	margin:0px 0px 0px 10px;
	background-color:#c9cde2;
}
#tab-nav a {
	text-decoration:none;
	padding:7px 10px 7px 10px;
	color:#333333;
	display:block;
}
#page-content {
	border:1px solid;
	border-color:#666666 #CCCCCC #CCCCCC #CCCCCC;
	border-width:1px 2px 2px 1px;
	clear:both;
	padding:10px;
}
#tab-nav #selected {
	position:relative;
	top:1px;
	background-color:#FFFFFF;
}

And here is how this looks like:

You might know already that there are some issues with transparent GIFs but PNGs don’t have those issues.
The problem with transparent PNGs is that Internet Explorer doesn’t like them so much and gives them a funny background.

So here is the solution that works great:
http://homepage.ntlworld.com/bobosola/index.htm

Acid test is a test to identify problems web browsers have when rendering web pages.
There are 3 versions Acid Test 1, 2 and 3.

Acid2 should look like this:

But here is how Acid Test 2 works on my different browsers:

Google Chrome:

Firefox:

Opera:

Safari:

Retarded Internet Explorer 7:

!!!

Now, none of my browsers passed Acid Test 3!!!
It should look like this:

Google Chrome:

Firefox:

Opera:

Safari:

Retarded Internet Explorer 7:

Of all the browsers, all perform almost the same but only Internet Explorer is way off, I don’t know what the developer team who is in charge of Internet Explorer does at Microsoft every day. I’d say all of them deserve to be fired!!!

Of all the other browsers, I think Apple Webkit rendering engine is the best (Google Chrome and Apple Safari) which I think is another reason for Google to use it in their browser Chrome.

Apple Webkit is a state of the art and open source HTML rendering engine developed and released by Apple.

Here are the links to these tests:
Acid2
Acid3

1 - It was extremely easy to install.
2 - It looks like a solid product.
3 - It doesn’t crash like IE 8.
4 - It’s fast.
5 - It’s very smooth.
6 - Has spell checking built in. (Just right click on the words that are underlined…)
7 - It’s very simple and elegant looking.
8 - Has nice new JavaScript engine V8.
9 - Has a nice JavaScript console and debugger.
10 - It doesn’t take 3 seconds (15 million instruction) to open a new tab.
11 - When you right click on a link it says “Copy link address” not “Copy shortcut”

I’m using Google Chrome to write this and it might be the end of IE horror for me (and yes I don’t like Firefox…)

I also noticed that Cnet news wrote this funny article:
http://news.cnet.com/8301-17939_109-10030522-2.html

In case the author doesn’t know (which I think they should, before they write for Cnet) that is Google’s general terms of services and applies to all of their products including Gmail:
https://www.google.com/accounts/TOS?loc=US&hl=en

Now you can download a beta version here:

http://www.google.com/chrome/

I make web pages so I have to have all the possible browsers installed so I can check the pages I code in all of them and make sure they look the same.
So far I have Internet Explorer 7, Internet Explorer 6, Firefox, Opera, Safari and now Google Chrome!

It was a really easy and smooth installation and it even automatically imported my favourites from Internet Explorer.

Here is how to do it:

1 - Open your image
2 - On the top menu, go to Commands > Creative -> Fade Image
3 - A dialog box will open, choose the kind of fading effect that you want
4 - Click OK
5 - If you select your image, you will see a line with a dot and a rectangle on each side, hold the dot and move it around and experiment. Use the rectangle to move the whole effect around and the dot to resize it and change it’s direction.

Enjoy

In Firefox 2, you couldn’t have a fixed font size, as soon as a user zoomed on your page, where ever you had a fixed font, it would get bigger and ugly.
So I used to use images for menus in form of CSS sprites.

But in Firefox 3, they fixed this issue.

Now, I find those arguments about how it was OK to blow the web pages and how it made sense, blah blah, pathetic!

Take a look at this funny series of Photoshop tutorials called “You Suck At Photoshop“.

Like he says in one of the videos, he made me realize that I only use like $5o worth of Photoshop what a waste!