PDA

View Full Version : Check Box Problem in IE 8, and Fire Fox



prijithkr
5 Jul 2012, 1:22 AM
Hai,

I have a problem with the checkbox group....

when I open it in Quirks Mode of IE it appears properly and also allows multiselect
but if i open in IE8 Standards mode...it doest appear in properly and also doesnt allow Multiselect, it act as a radio button instead... have anyone encountered this problem?

whats the solution?

3685036851

scottmartin
5 Jul 2012, 1:15 PM
Please provide a small working example to demonstrate your problem.

Scott.

prijithkr
12 Jul 2012, 10:41 PM
Sorry The problem was due to a CSS Conflict.... My App has its header and footer applied from a portel, where it has its own CSS file, which conflicting with EXT JS CSS... hence its causing the Check box to appear in a different way, as you can see in the image above,

is there any way to override this in our app by some inline css or a css file??

i have also added the snippets of the Portel's CSS affecting the Checkbox, [its not possible to edit the portel's css, as it has many other app and all of them will be affected, so have to find a way to override it]




INPUT[type='button'] {
BACKGROUND-IMAGE: url(../images/forms/input_shadow.png); BORDER-BOTTOM: #dedede 1px solid; BORDER-LEFT: #bfbfbf 1px solid; PADDING-BOTTOM: 5px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; BACKGROUND-REPEAT: no-repeat; FONT: 1em Arial, Helvetica, Verdana, sans-serif; BORDER-TOP: #bfbfbf 1px solid; BORDER-RIGHT: #dedede 1px solid; PADDING-TOP: 5px
}
INPUT[type='button'] {
BORDER-BOTTOM-COLOR: #bfbfbf; PADDING-BOTTOM: 5px; BORDER-TOP-COLOR: #dedede; PADDING-LEFT: 5px; WIDTH: auto; PADDING-RIGHT: 5px; BACKGROUND: url(../images/forms/button.png) #f5f5f5 repeat-x 0px 0px; COLOR: #34404f; BORDER-RIGHT-COLOR: #bfbfbf; OVERFLOW: visible; BORDER-LEFT-COLOR: #dedede; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
INPUT[type='button'] {
BORDER-BOTTOM: #9e9e9e 1px solid; BORDER-LEFT: #c8c9ca 1px solid; BACKGROUND: url(../images/portlet/header_bg.png) #d4d4d4 repeat-x 0px 0px; COLOR: #34404f; BORDER-TOP: #c8c9ca 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: #9e9e9e 1px solid; text-shadow: 1px 1px #FFF
}
INPUT[type='button'] {
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px
}

scottmartin
13 Jul 2012, 6:42 AM
How are you using the CSS now? Are you assigning it to a custom rule before it is invoked?

Scott.