Styling issues with custom Skin with Version 2009.2.701.20 (2009 Q2)

[Duy]

I am having some styling issues. The window's Title bar and the left and right footers don't seem to be lined up correctly. They appear broken. We used to use version 2008.2.1001.20 but now we are using version 2009.2.701.20 (2009 Q2). It was working fine in 2008.2.1001.20 but I can't get it to look correctly for this version.

I am trying to modify the Vista theme with a new button control image called "MyControlButtons.gif." This has the same exact dimensions as the original Vista Theme. I just changed the colors (the original image also caused the same issue). I am running this from a Windows XP machine with IE8.

I am attaching the CSS files and a screenshot of the issue.

Can someone help? I've been at this for hours.

Here is my CSS.

/* RADWINDOW PROMETHEUS "Vista" SKIN */

div.RadWindow_Vista table td.rwCorner
{
    width: 4px;
}

div.RadWindow_Vista table td.rwTopLeft
{
    background: transparent url('Window/CornerLeft.gif') no-repeat left bottom;
    height: 6px;
}

div.RadWindow_Vista table td.rwTopRight
{
    background: transparent url('Window/CornerRight.gif') no-repeat right bottom;
    height: 6px;
}

div.RadWindow_Vista table td.rwBodyLeft
{
    background: transparent url('Window/BodyLeft.gif') repeat-y left top;
}

div.RadWindow_Vista .rwWindowContent
{
    height: 100%;
    border: solid 1px black;
    border-bottom: 0;
    background: white;
}

div.RadWindow_Vista table td.rwBodyRight
{
    background: transparent url('Window/BodyRight.gif') repeat-y right top;
}

div.RadWindow_Vista table td.rwFooterLeft
{
    background: transparent url('Window/FooterLeft.gif') no-repeat left top;
    height: 8px;
}

div.RadWindow_Vista table td.rwFooterRight
{
    background: transparent url('Window/FooterRight.gif') no-repeat right top;
    height: 8px;
}

div.RadWindow_Vista table td.rwFooterCenter
{
    background: transparent url('Window/FooterCenter.gif') repeat-x;
    height: 8px;
}

div.RadWindow_Vista table td.rwTitlebar
{
    background: transparent url('Window/TitleBar.gif') repeat-x right top;
}

div.RadWindow_Vista td.rwStatusbar
{
    height: 19px; line-height: 19px;
    background: #f7f3e9;
    border-top: solid 1px black;
}

/* Support for displayng the loading image in the iframe's parent TD */
div.RadWindow_Vista td.rwLoading
{   /*background of content area before page is loaded */
    background: white url('Window/Loading.gif') no-repeat center;
}

/* Support for displaying loading image in the status bar  */
div.RadWindow_Vista td.rwStatusbar .rwLoading
{
    background-image: url('Window/Loading.gif');
    background-repeat: no-repeat;
}

div.RadWindow_Vista td.rwStatusbar span.statustext
{
    font: normal 11px Verdana, Arial, Sans-serif;
    color: black;
}

div.RadWindow_Vista td.rwStatusbar div
{
    background: transparent url('Window/WindowResizeHandle.gif') !important;
}

div.RadWindow_Vista td.rwStatusbar input
{
    background-color: #f7f3e9;
    background-repeat: no-repeat;
}

div.RadWindow_Vista table.rwTitlebarControls ul.rwControlButtons li a
{
    width: 28px;
    height: 15px;
    line-height: 15px;
    font-size: 1px;
    cursor: default;
    margin: 4px 0 4px 2px;
}

/* reload button */
div.RadWindow_Vista a.rwReloadButton
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat -112px top;
}

div.RadWindow_Vista a.rwReloadButton:hover
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat -112px -15px;
}

/* unpin button */
div.RadWindow_Vista a.rwPinButton
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat;
}

div.RadWindow_Vista a.rwPinButton.on
{
    background-position: -140px top !important;
}

/* pin button */
div.RadWindow_Vista a.rwPinButton
{
    background-position: -168px top;
}

div.RadWindow_Vista a.rwPinButton:hover
{
    background-position: -168px -15px;
}

/* minimize button */
div.RadWindow_Vista a.rwMinimizeButton
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat left top;
}

div.RadWindow_Vista a.rwMinimizeButton:hover
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat 0 -15px;
}

/* maximize button */
div.RadWindow_Vista table.rwTitlebarControls ul.rwControlButtons li a.rwMaximizeButton
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat -56px top;
}

div.RadWindow_Vista a.rwMaximizeButton:hover
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat -56px -15px !important;
}

/* close button */
div.RadWindow_Vista a.rwCloseButton
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat -84px top;
}

div.RadWindow_Vista a.rwCloseButton:hover
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat -84px -15px;
}

/* restore button */
div.RadWindow_Vista a.rwMaximizeButton,
div.RadWindow_Vista a.rwMinimizeButton
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat -28px top !important;
}

div.RadWindow_Vista a.rwMaximizeButton:hover,
div.RadWindow_Vista a.rwMinimizeButton:hover
{
    background: transparent url('Window/MyControlbuttons.gif') no-repeat -28px -15px !important;
}

div.RadWindow_Vista table.rwTitlebarControls a.rwIcon
{
    background: transparent url('Window/Icon.gif') no-repeat left top;
    width: 16px; height: 15px;
    cursor: default;
    margin: 3px 0 3px 2px;
}

div.RadWindow_Vista table.rwTitlebarControls em
{
    font-style: normal;
    font: normal 12px Verdana, Arial, sans-serif;
    color: black;
    padding: 4px 0 0 4px;
}

div.RadWindow_Vista.rwMinimizedWindow,
div.RadWindow_Vista.rwMinimizedWindow .rwCorner
{
    background: url('Window/MinimizedParts.gif') !important;
    height: 30px !important;
}

div.RadWindow_Vista.rwMinimizedWindow
{
    background-position: 0 -30px !important;
    background-repeat: repeat-x;
}

div.RadWindow_Vista.rwMinimizedWindow:hover
{
    background-position: 0 -90px !important;
    background-repeat: repeat-x;
}

div.RadWindow_Vista.rwMinimizedWindow
{
    width: 180px !important;
}

div.RadWindow_Vista.rwMinimizedWindow .rwCorner.rwTopLeft
{
    background-position: 0 0 !important;
}

div.RadWindow_Vista.rwMinimizedWindow .rwCorner.rwTopRight
{
    background-position: -10px 0 !important;
}

div.RadWindow_Vista.rwMinimizedWindow:hover .rwCorner.rwTopLeft
{
    background-position: 0 -60px !important;
}

div.RadWindow_Vista.rwMinimizedWindow:hover .rwCorner.rwTopRight
{
    background-position: -10px -60px !important;
}

.RadWindow_Vista.rwMinimizedWindow .rwIcon
{
    margin: 10px 0 0 0 !important;
}

.RadWindow_Vista.rwMinimizedWindow .rwControlButtons
{
    margin: 8px 0 0 0 !important;
}

/* overlay element should be minimized when the window is minimized */
iframe.rwMinimizedWindowOverlay_Vista
{
    /* take into account the borders of the main DIV of the window when setting width/height */
    width: 152px !important;
    height: 28px !important;
}

div.RadWindow.radwindow_Vista.rwMinimizedWindow table.rwTitlebarControls
{
    width: 150px !important;
    position: relative;
    top: -4px;
}

div.RadWindow_Vista.rwMinimizedWindow em
{
    color: white !important;
    width: 55px !important;
}

div.RadWindow_Vista.rwMinimizedWindow td.rwCorner
{
    cursor: default;
}

div.RadWindow_Vista.rwMinimizedWindow td.rwCorner.rwTopLeft,
div.RadWindow_Vista.rwMinimizedWindow td.rwCorner.rwTopRight
{
    background: none;
    width: 10px !important;
}

div.RadWindow_Vista.rwMinimizedWindow td.rwTitlebar,
div.RadWindow_Vista.rwMinimizedWindow:hover td.rwTitlebar
{
    background: none;
    cursor: default !important;
}

div.RadWindow_Vista .rwWindowContent .rwDialogPopup
{
    margin:16px;
    font:normal 11px Arial;
    color:black;
    padding:0px 0px 16px 50px;
}

div.RadWindow_Vista .rwWindowContent .rwDialogPopup.radalert
{
    background: transparent url('Window/ModalDialogAlert.gif') no-repeat 8px center;
}

div.RadWindow_Vista .rwWindowContent .rwDialogPopup.radprompt
{
    padding: 0;

}

div.RadWindow_Vista .rwWindowContent .rwDialogPopup.radconfirm
{
    background: transparent url('Window/ModalDialogConfirm.gif') no-repeat 8px center;
}


div.RadWindow_Vista .rwWindowContent  input.rwDialogInput
{
    border: solid 1px #666;
    padding: 3px 4px 0 4px;
    height: 17px;
    background: transparent url('Window/ModalDialogButtonSprites.gif') repeat-x 0 -44px;
    width: 100%;
    font: normal 11px Verdana, Arial, Sans-serif;
}

div.RadWindow_Vista .rwWindowContent   a,
div.RadWindow_Vista .rwWindowContent   a span
{
    text-decoration: none;
    color: black;
    line-height: 22px;
    cursor: default;
}

div.RadWindow_Vista .rwWindowContent a.rwPopupButton
{
    background: transparent url('Window/ModalDialogButtonSprites.gif') no-repeat 0 0;
    padding: 0 0 0 3px;
    margin: 8px 8px 8px 0;
}

div.RadWindow_Vista .rwWindowContent a.rwPopupButton span.rwOuterSpan
{
    background: transparent url('Window/ModalDialogButtonSprites.gif') no-repeat right 0;
    padding: 0 3px 0 0;
}

div.RadWindow_Vista .rwWindowContent a.rwPopupButton span.rwInnerSpan
{
    background: white url('Window/ModalDialogButtonSprites.gif') repeat-x 0 -22px;
    padding: 0 12px;
}

div.RadWindow_Vista .rwWindowContent a.rwPopupButton:hover
{
    background: transparent url('Window/ModalDialogButtonSprites.gif') no-repeat 0 -64px;
    padding: 0 0 0 3px;
    margin: 8px 8px 8px 0;
}

div.RadWindow_Vista .rwWindowContent a.rwPopupButton:hover span.rwOuterSpan
{
    background: transparent url('Window/ModalDialogButtonSprites.gif') no-repeat right -64px;
    padding: 0 3px 0 0;
}

div.RadWindow_Vista .rwWindowContent a.rwPopupButton:hover span.rwInnerSpan
{
    background: white url('Window/ModalDialogButtonSprites.gif') repeat-x 0 -86px;
    padding: 0 12px;
}

div.modaldialogbacgkround
{
    background: black;
}

/* set window transparency */
div.RadWindow.radwindow_Vista.rwNormalWindow.rwTransparentWindow td.rwCorner,
div.RadWindow.radwindow_Vista.rwNormalWindow.rwTransparentWindow td.rwTitlebar,
div.RadWindow.radwindow_Vista.rwTransparentWindow td.rwFooterCenter
{
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    opacity: .8; -moz-opacity: .8;
}

div.RadWindow_Vista .rwTopResize
{
    background: transparent url('Window/TitleBar.gif') repeat-x;
}

div.RadWindow_Vista.rwMinimizedWindow .rwControlButtons
{
    width: 60px !important;
    float: left !important;
    position: relative;
    left: 20px;
}

div.RadWindow_Vista.rwMinimizedWindow em
{
    margin: 6px 0 0 0 !important;
}

[Duy]

Here is a screen shot of the issue.

[Duy]

I had to fix this by applying my own css styling to override the embedded css.