Archive for September, 2007


Saturday, September 15th, 2007 By Nikhil

Simple speaking (for those who never heard about doctype before today)! DOCTYPE is the declaration in a HTML document that comes before the <HTML> tag, that looks something like this ( pasted from the source of this very page)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

Why use doctype?
It all began when browser standards were introduced by W3C. The earlier web developers implemented CSS according to the wishes of browsers, to have the pages rendered correctly in them and most websites had CSS that didn’t quite match these specifications/standards.

Therefore solution to this problem was to

  • allow web developers who knew their standards to choose which mode to use.
  • continue displaying old pages according to the old (quirks) rules.

And DOCTYPE was born.

So, based on whether you page is designed to standards or not , you choose the appropriate doctype.

Relation between Doctype & Browser modes
Doctype is the statement that tells your browser what mode it should render the HTML page in or rather to be more precise how should the browser interpret the CSS in; Quirks Mode or Strict mode.

Old pages written before these standards were introduced don’t have a doctype. Therefore when there is no DOCTYPE in your HTML then the browser is in QUIRKS mode.
But if the DOCTYPE is defined as one of the following , then the browser is said to be in STRICT Mode.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”>

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

IE 6 location.href Problems

Sunday, September 9th, 2007 By Nikhil

Have you noticed sometimes , how simple things just refuses to work in IE6 …location.href is just such a thing.

If you have added an onclick function to your anchor tag like below …

<a href=”javascript:void(0);” onclick=”onClickLink(‘xxx’);” > go to new location </a>

With some function like this…
function onclickLink(id){
var URI = “test2.html?id=”+id;
window.location.href = URI;

To your irony, you would notice that such a piece of simple script refuses to work in IE …  Well! I can discuss reasons here,  but not think it will be worthwhile … Though , I do seem to have a solution… ( I bet if you understand Javascript, you will understand , why we add this tweak for IE6)

The Solution

<a href=”javascript:void(0);” onclick=”onClickLink(‘xxx’);return false;” > go to new location </a>

If you any simple answers , please do write a comment. It will really be appretiated, I bet , by Many!

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

For your IEs Only

Saturday, September 8th, 2007 By Nikhil

If you have been writing CSS for  while, you would have experience those times when you literally pull your hair  when your CSS layouts looked fine in all the new browsers ( I mean browsers later than IE6) , but IE 6 throws a  tantrum. You struggle hard to adjust your CSS but it doesn’t work … Well! Try These  HACKs…

1. Underscore Hack :-
By definition, CSS 2.1 specification allows underscore (“_”) in CSS identifiers. But many browsers still seem to ignore any identifies proceeded with an underscore but IE. This IE’s bug/feature thus becomes a very clear way to set CSS properties for IEs only. so remember, A CSS property written with the underscore on the start is visible for Internet Explorer (all versions but IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */

View demonstration of this underscore hack

Also, The min-height hack for IE6 uses the underscore hack, check out

2. Hash(#) Hack :-
Like the underscore hack, this one is too is for IEs oly, with a good difference, property identifiers preceded with # on the start is visible for All IE versions , IE7 included and is invisible for any other standard browser.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */

This hack has been used nicely to demonstrate a cross browser vertical align solution, have a look at this article to find our more

3. CSS for IE6 only:-
#my_bad_behaving_div {
/*something for all browsers*/
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/

These hacks seems heaven sent, when  nothing else works… If any of these hacks saves your life  someday,  dont forget to treat me to a coffee:)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter