Vertical align text in floating div using css

Do you know how to vertically align a text in a floating div? When a content is dynamically generated and you want to align it automatically according to it?

Today i was experimenting about this for a long time and finally i have got a solution which will work in all the browsers including ie6. There are many ways of doing it, but i would like to work the code in all the majore browsers inculding ie6.

So here is the code...

HTML:

It works! Vertically Center Align!

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

Hack for ie7:
*+ html .contentdiv{}

Hack for ie6:
* html .contentdiv{}

According to the height you increase, the content will get vertically aligned center. My only worry is iam using expression. We must try to avoid using more expression. But it looks very simple. Fine, any other method of handle this will be a great help! Please feel free to post.

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera.

Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.

For Example:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}

IE6 browser inline Hack
_ (underscore) can be using only for ie6

For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

Firefox inline style
content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style
Use * html for ie6 and *+html hack for ie7

For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.

For Example:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.

Hope this information will be useful for you. Please use the browser hacks in a proper manner. For example, you might know double margin bug in ie6. In such case you can use display inline which will render correctly by all the browsers instead of you using ie6 hack seperately.

How firefox3.5 will be useful for web developers?

Firefox3.5 is 10 times faster than firefox2 versions. A good news from mozilla, that firefox3.5 have many new features for web site and application developers.

HTML 5
Using audio and video in Firefox. In the older version of firefox, you need to download a plugin for flash to view the videos in Youtube. But using firfox3.5 and HTML5 you can view the videos without any plugins installed. And also they are very faster than ever.

Offline resources in Firefox
Firefox 3.5 now fully supports the HTML 5 offline resource specification.


Drag and drop
The HTML 5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.

Newly-supported CSS features
The :before and :after pseudo-elements have been updated to full CSS 2.1 support, adding support for the position, float, list-style-*, and some display properties.

opacity
The -moz-opacity Mozilla extension to CSS has been removed in favor of the standard opacity property.

text-shadow
The text-shadow property, which allows web content to specify shadow effects to apply to text and text decorations, is now supported. Also..
-moz-box-shadow, -moz-border-image, -moz-column-rule, -moz-column-rule-width, -moz-column-rule-style, -moz-column-rule-color added newly.

Shadow effects in a canvas
Canvas shadow effects are now supported.

Applying SVG effects to HTML content
You can now apply SVG effects to HTML and XHTML content; this article describes how.

And many more....

But the hope is that ie8 should support HTML5 and css3 with out any bugs. Coz a report says that majority of the people are using ie6 still. for more information on HTML5, please read HTML5