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.

Origin

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