You Are Here Home > HTML

HTML

CSS Tabs

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:

Some content
CSS Tabs
Comments (2)   Filed under: CSS, HTML, Web Design, Web Development   Posted by: Codehead

Acid Test and different web browsers

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

Acid Test and different web browsers
Comments (1)   Filed under: CSS, HTML, Web Browsers, Web Design, Web Development   Posted by: Codehead

Fixed font sizes on Firefox 3

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!

Fixed font sizes on Firefox 3
Comments (0)   Filed under: CSS, HTML, Web Design   Posted by: Codehead