This is year 2009 and not 1999, it is now time to move a step forward and shun internet explorer 6. Instead of trying to make your site work in internet explorer 6 and waste your precious time you should now consider to politely ask your ie6 visitor to upgrade. There are many ways to do so, but the simplest one i could come up with was using a css hack to display a particular div in ie6 and hide it in other browsers. The trick is to use ie6’s interpretation of _display as display .

Here is the code :

Thats all! quite simple, isnt it? much simpler than using javascript or php to detect the browser and take action accordingly.

However you should position the div at such a place and in such a way that it is clearly visible.

You must also be polite in your notice and here is one example :

Dear visitor!

You are using an outdated browser that is not compatible with web standards,

You must consider upgrading to a different browser or a newer version of Internet Explorer to improve your web experience and enhance your online security and privacy
ThankYou

Further, you may consider becoming a supporter of NET magazine’s anti-ie6 campaign at http://www.bringdownie6.com

Yesterday i had submitted this wordpress theme of mine to the official wordpress theme directory. I got a feedback from the guys there stating that my theme wasnt valid as it had some issues and they asked me to fix them and upload again. I was able to fix all the issues but one, ant that was : the gallery, when inserted in the post, streches out the gallery container div to around 600px! I looked at the source code of the gallery and found that the gallery was created using the dt and dl tags, and the dt containing the images was set to float to left using css and each row of dt containing images was separated out by a br styled to clear:both. This was the part of document which was causing trouble, the br tag, after clearing both side was pushing down the next row of images to at least around 600px, trying to fix this issue only had me panicking after hours of debugging,re-writing some styles and googling the solution out, but in vain . It was when i was almost exhausted and felt like my brain was going to give up and shutdown that i told myself to give it a last try , i just gave my content div (which was set to float to left and was the parent of the post div that was streching out) a fixed width of 740px, and hurray, to my amazement i found that the problem was solved!!! . I dont know what actually happened, what had the width of the parent element to do with the vertical stretchning of the gallery image rows. So if you have an explanation then please lemme know in the comments below.

The web portfolio of Mujtaba Ahmed

Today i’ve launched my new website and my first web portfolio.

You can check it out here: www.dynamicguru.com/mujtaba/ .

The site is one of my best works till date and is the first site of mine to use ajax and is powered by jQuery. The site uses awesome jQuery effects for page transitions. Also it has validated XHTML 1.0 Strict markup. Check it out and tell me in the comments what you think about it?

Usually when it comes to browser specific css we often mean IE specific code. You might be aware of the conditional comments tag you can use to target different versions of Internet Explorer. But 2day i’ll be showing you a much simpler way to tame IE 6 and 7 to your needs . Lets suppose for some reasons you want a div to have a height of 10px in all browsers, but a height of 12px in IE 7 and 15px in IE 6, here is how it can be done without the use of conditional comments:

isnt it much simpler than writing conditional comments?
The same technique can be applied to other properties as well. You can even use this hack to request your IE 6 users to upgrade to a modern browser,how? Just make a div and write your message in it and set its “display” to “none” while set “_display” to “block”.This will simply tell all browsers not to display the div while IE 6 will. Hope you enjoyed the post.

The “cursor” property of css allows you to change the mouse cursor either for the complete page or for specific elements

The following example illustrates the use of the “cursor” property of css:

//This changes the cursor for the complete page
body {
cursor:url(cursor.cur);
}

//This changes the cursor only for the element of class fancy
.fancy{
cursor:url(fancy_cursor.ani);
}

Cursors are files with extension .cur or .ani (for animated cursor ),there are many sites which give you free animated and non animated cursors for download, even there are freewares which let you create your own custom cursors.
Furthermore, instead of specifying the url of the cursor file you can specify the type/style of cursor which comes inbuilt on most systems.

For example, cursor:pointer will cause the cursor to change to a pointer (as on hyperlinks) and cursor:help will give you a small question mark.

Below is a complete list of the cursor types you can use, move the cursor over a word to see it change

Auto

Crosshair

Default

Pointer

Text

Wait

Help

Move

E-resize

N-resize

NW-resize

SE-resize

SW-resize

S-resize

W-resize