With HTML 5’s emphasis on web application development, there’s plenty of new features for developers to use, some of which we can use today:

• A 2D drawing API for scripting graphics using the new canvas element, which is supported in all the major browsers except for Internet Explorer.
• registerProtocolHandler and registerContentHandler, which allow web applications to register for certain protocols or MIME types. Both are available in Firefox.
• A manifest caching mechanism to support offline web applications, available in Firefox and Safari.
• Video and audio APIs. The majority of the API works in Firefox, Opera (experimental build), and Safari—although Safari only uses Apple’s proprietary .mov format, rather than the open-source Ogg formats supported by Firefox and Opera.
• window.postMessage: cross-document messaging implemented in all major browsers.
• history.pushState to enable better back-button support in Ajax apps. (No implementations yet, but window.onhashchange is supported in IE8.)
• A drag and drop API with a draggable attribute, supported in Firefox 3.5.
• An editing API that hooks into the contenteditable attribute allowed on any element, already in all major browsers.
• Client-side persistent storage using key/value pairs and support for embedded SQL databases: key/value pairs are in Firefox, Safari, and IE8, while SQL is supported only in Safari at this point.

For more read the full SitePoint article

[SitePoint Article]

Problem: when you provide a background images (through HTML or CSS) on a table row:

<table>

<tr background="bg.gif">

<td>some stuff</td>

<td>more stuff</td>

<tr>

</table>

On Firefox everything would go out as planned. However in older browsers like IE 6, each of the 2 table columns will inherit the background image and you will get a nasty effect.

Solution: You will need to use background-image:none on every table cell while the row needs a position:relative.

<table>

<tr style="background-image: url(bg.gif);  position: relative;">

<td style="background-image:none;">some stuff </td>

<td style="background-image:none;"> more stuff </td>

</tr>

</table>

In order to simulate de the bullet we use the css property “background”.
For positioning the bullet on the right  side, we use “background-position” and we specify the left offset in pixels.

We also need to specify the exact width in pixels and the property “display: block;”

<style type=”text/css”>

a.link
{

text-align:left;
display:block;
width: 140px;
background-image: url(’Bullet.gif’);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: 124px 0px;
text-decoration: none;

}

a.link:hover
{

text-align:left;
display:block;
width: 140px;
background-image: url(’BulletOver.gif’);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: 124px 0px;

}

</style>

<a href=”http://www.thecssbug.com/” class=”link”>
Mouseover menu
</a>