jQuery Actual Plugin Demo - with css3pie

css3pie makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features. If you haven't heard of it, you should give it a try now.

How ever css3pie breaks your layout in some cases. For example if you have a navigation bar with float elements apply css3 border-radius property. Your layout will break in ie6. Because what css3pie does is it renders a image with rounded corners and append it 'inside' the element and has width set to 100%.

In ie6 if you have a image width set to 100% inside float elements with no specific width. Those float elements will have 100% of their parent width instead of the content width

In this case we have to give every css3pie applied elements a fix width. Please see the source code to tell the difference.


This is going to break with ie6.

With jQuery width

This is going to break with ie6 as well.

          $( '#with-jquery-width' ).find( 'a' ).each( function(){
            var $this = $( this );
            $this.width( $this.width());

With jQuery Actual Plugin

This works in all browsers.

          $( '#with-jquery-actual' ).find( 'a' ).each( function(){
            var $this = $( this );
            $this.width( $this.actual( 'width', { clone : true }));

Demo provides by DreamersLab