CSS not getting implemented on the jQuery dialog within IE8
-
Hi, I am new to jQuery. We are using jQuery ui.1.0 in our project. We are using jQuery to show the dialog box. It has CSS implmented for the dialog title and the content. The CSS works well within the dialog box when seen in IE6 but the CSS does not get implemented when the same dialog box is opened/diaplayed in IE8. Within the IIS I have added below header for the page where the dialogbox is been implemented. Header name => X-UA-Compatible Header value => ID=6 What other changes do I need to make in order to make this work in IE8 as well? Below is the .css code
/* This file skins dialog */
.flora .ui-dialog,
.flora.ui-dialog {
background-color: #e6f7d4;
}.flora .ui-dialog .ui-dialog-titlebar,
.flora.ui-dialog .ui-dialog-titlebar {
border-bottom: 1px solid #d8d2aa;
background: #ff9900 url(i/dialog-title.gif) repeat-x;
padding: 0px;
cursor: move;
height: 28px;
_height: 29px;
}.flora .ui-dialog .ui-dialog-titlebar-close,
.flora.ui-dialog .ui-dialog-titlebar-close {
width: 16px;
height: 16px;
background: url(i/dialog-titlebar-close.png) no-repeat;
position:absolute;
top: 6px;
right: 7px;
cursor: default;
}.flora .ui-dialog .ui-dialog-titlebar-close-hover,
.flora.ui-dialog .ui-dialog-titlebar-close-hover {
background: url(i/dialog-titlebar-close-hover.png) no-repeat;
}.flora .ui-dialog .ui-dialog-title,
.flora.ui-dialog .ui-dialog-title {
margin-left: 5px;
color: white;
font-weight: bold;
position: relative;
top: 7px;
left: 4px;
}.flora .ui-dialog .ui-dialog-content,
.flora.ui-dialog .ui-dialog-content {
margin: 1.2em;
}.flora .ui-dialog .ui-dialog-buttonpane,
.flora.ui-dialog .ui-dialog-buttonpane {
position: absolute;
bottom: 8px;
right: 12px;
width: 100%;
text-align: right;
}.flora .ui-dialog .ui-dialog-buttonpane button,
.flora.ui-dialog .ui-dialog-buttonpane button {
margin: 6px;
}/* Dialog handle styles */
.flora .ui-dialog .ui-resizable-n,
.flora.ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: transparent url(i/dialog-n.gif) repeat scroll center top; }.flora .ui-dialog .ui-resizable-s,
.flora.ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%; bottom: 0px; left: 0px; background: transparent url(i/dialog-s.gif) repeat scroll center top; }.flora .ui-dialog .ui-resizable-e,
.flora.ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px; top: 0px; height: 100%; backgroun