Re: DecoratorPanel - issue with the CSS inheritance.

[Memo Sanchez]

Thank you very much for your help Zak.

Here is the code:

**********************************************************************************************
****************CSS for the Main (Panel)
DecoratorPanel******************************
**********************************************************************************************

.parentDecorator  {
        background-color: #b3b3b3;
        margin:12px;
        padding:0px;
}

.parentDecorator .topRight {
        background: url(../images/MainTopRight.png) no-repeat 0px 0px;
        width: 6px;
        height: 5px;
        zoom: 1;
}

.parentDecorator .topRightInner {
        width: 5px;
        height: 5px;
        overflow: hidden;
        filter: progid :
                        DXImageTransform.Microsoft.AlphaImageLoader (


                             src =

                               'images/MainTopRight.png', sizingMethod =

                         'crop' );
}

.parentDecorator .bottomLeft {
        background: url(../images/MainBottomLeft.png) no-repeat;
        width: 6px;
        height: 5px;
        zoom: 1;
}

.parentDecorator .bottomLeftInner {
        width: 6px;
        height: 5px;
        overflow: hidden;
        filter: progid :
                        DXImageTransform.Microsoft.AlphaImageLoader (


                             src =

                               'images/MainBottomLeft.png', sizingMethod =

                        'crop' );
}

.parentDecorator .bottomRight {
        background: url(../images/MainBottomRight.png) no-repeat;
        width: 6px;
        height: 5px;
        zoom: 1;
}

.parentDecorator .bottomRightInner {
        width: 6px;
        height: 5px;
        overflow: hidden;
        filter: progid :
                        DXImageTransform.Microsoft.AlphaImageLoader (


                             src =

                               'images/MainBottomRight.png', sizingMethod =

                         'crop' );
}

.parentDecorator .topLeft {
        background: url(../images/MainTopLeft.png) no-repeat 0px 0px;
        width: 5px;
        height: 4px;
        zoom: 1;
}

.parentDecorator .topLeftInner {
        width: 6px;
        height: 5px;
        overflow: hidden;
        filter: progid :
                        DXImageTransform.Microsoft.AlphaImageLoader (


                             src =

                               'images/MainTopLeft.png', sizingMethod =

                        'crop' );
}


**********************************************************************************************
**************************CSS for the Child
DecoratorPanel******************************
**********************************************************************************************

.childDecorator {
        background-color: #FFFFFF;
        margin:6px;
        padding:0px;
}

.childDecorator .topRight {
        background: url(../images/tabTopRight.png) no-repeat 0px 0px;
        width: 3px;
        height: 3px;
        zoom: 1;
}

.childDecorator .topRightInner {
        width: 3px;
        height: 3px;
        overflow: hidden;
        filter: progid :
                        DXImageTransform.Microsoft.AlphaImageLoader (


                             src =

                               'images/tabTopRight.png', sizingMethod =

                         'crop' );
}

.childDecorator .bottomLeft {
        background: url(../images/tabBottomLeft.png) no-repeat;
        width:3px;
        height: 3px;
        zoom: 1;
}

.childDecorator .bottomLeftInner {
        width:3px;
        height: 3px;
        overflow: hidden;
        filter: progid :
                        DXImageTransform.Microsoft.AlphaImageLoader (


                             src =

                               'images/tabBottomLeft.png', sizingMethod =

                        'crop' );
}

.childDecorator .bottomRight {
        background: url(../images/tabBottomRight.png) no-repeat;
        width: 3px;
        height: 3px;
        zoom: 1;
}

.childDecorator .bottomRightInner {
        width:3px;
        height: 3px;
        overflow: hidden;
        filter: progid :
                        DXImageTransform.Microsoft.AlphaImageLoader (


                             src =

                               'images/tabBottomRight.png', sizingMethod =

                         'crop' );
}

.childDecorator .topLeft {
        background: url(../images/tabTopLeft.png) no-repeat 0px 0px;
        width: 3px;
        height: 3px;
        zoom: 1;
}

.childDecorator .topLeftInner {
        width: 3px;
        height: 3px;
        overflow: hidden;
        filter: progid :
                        DXImageTransform.Microsoft.AlphaImageLoader (


                             src =

                               'images/tabTopLeft.png', sizingMethod =

                        'crop' );
}

***************************************************************************************
....
tabDecoratorPanel1.setStyleName("childDecorator");
tabDecoratorPanel2.setStyleName("childDecorator");
tabDecoratorPanel3.setStyleName("childDecorator");

mainDecoratorPanel.setStyleName("parentDecorator");

mainVerticalPanel.add(tabDecoratorPanel3)
mainVerticalPanel.add(tabDecoratorPanel2)
mainVerticalPanel.add(tabDecoratorPanel1);

mainDecoratorPanel.add(mainVerticalPanel);
.....

If you need more information please let me know. :)





--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---