Firefox, Images and Myterious Gaps

Scenario:

• You are using tables


• You are using firefox


• You are using <img> element to inside table


• And firefox is setting extra white space below the image in table cell

Example:

This happens when you have Strict doc type declaration.

Quick Fix:
Apply style to that image. display: block
Ex: td img {
display: block;
}
or
.image {
display: block;
}

Reference: mozilla developer center

Chart of Support for CSS Filters/Hacks

http://www.dynamicsitesolutions.com/css/filters/support-chart/

Hack for IE 7 under strict mode

If you have given doctype declaration as STRICT mode and you want to apply hack specifically for IE 7:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

You can use *:first-child+html CSS Hack that works only with IE 7.

Example:
#test {
background-color: #FFFFFF;
}

*:first-child+html #test {
background-color: #000000;
}

SOURCE:
http://www.dynamicsitesolutions.com/css/filters/first-child-plus-html/

Tired of cross browser css problems???

Are you looking for CSS hacks to solve cross browser issues?
This site contains very good documentation for css hacks.


http://www.webdevout.net/css-hacks



In nutshell use following tags for separate styles for different browsers.

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

Verify your blogspot site to google webmaster tools

Hi everyone,

Please follow this great link which has a tutorial for adding your blog in google webmaster tools and verify it.

Title fof the following blog is "Google webmaster Tools and HOWTO verify your Blogger/blogspot.com site"

http://linuxlore.blogspot.com/2006/10/google-webmaster-tools-and-howto.html

Nice tool for converting html code to text format so that you can disply HTML code inside HTML document

http://centricle.com/tools/html-entities/

Onclick( ) event inside anchor element changes the mouse pointer

While using show/hide div tag I came across one problem where I was using onclick() event inside anchor tag.
Though it was working fine, it changes the mouse shape (Shows cursor symbol instead of hand).

Solution:
Add href="#" inside anchor tab. This will also allow you to use onClick() event.
You can also try style="cursor: hand;".
Example:
<a onclick="Effect.toggle('player','BLIND'); return false;" href="#">