PDA

View Full Version : Problem setting background color in IE6



pachaudhary
30 Apr 2009, 5:21 AM
Hi,

I am trying to change the background color of the a grid row. I am using the following code snippet to do so. It works fine in Safari, IE 7 and Fire Fox, but fails in IE6.

Note:

1. I have to change the background color and the image at runtime so I cannot use a static class that is defined in some css file

2. I have tried using the '!important' attribute but this did not work.

getRowClass: function(record) {
arguments[2].tstyle += "background:#FF000 url('../../RM-ui/images
/severity_GRAY.png');";
return grid.getView().getRowClass.apply(this, arguments);
}

Can some one let me know what is wrong in this.

Regards,
Pankaj.

Condor
1 May 2009, 6:58 AM
You can't add !important to inline styles.

Did you try it with 2 separate styles:

getRowClass: function(r, rowIndex, rp, ds){
rp.tstyle += 'background-color:#F00;background-image:url(../../RM-ui/images/severity_GRAY.png);';
}

pachaudhary
3 May 2009, 2:32 AM
Yes, I have tried adding 2 diffferent styles background-color:#00FFF and background-image: url('../../RM-ui/images/severity_GRAY.png);'; but this did not work.

Can you suggest me what is wrong why is it not working in IE6?

Condor
3 May 2009, 3:34 AM
Are you doing anything special, because this example works correctly:

Ext.onReady(function(){
new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'grid',
store: new Ext.data.SimpleStore({
fields: ['a', 'b', 'c'],
data: [
[1, 2, 3],
[2, 3, 4],
[3, 4, 5]
]
}),
columns: [
{dataIndex: 'a', header: 'Column A'},
{dataIndex: 'b', header: 'Column B'},
{dataIndex: 'c', header: 'Column C'}
],
viewConfig: {
getRowClass: function(r, rowIndex, rp, ds){
rp.tstyle += 'background:#F00 url(resources/images/default/window/icon-warning.gif);';
return '';
}
}
}
});
});

syscobra
3 May 2009, 8:41 PM
Hi,

I am trying to change the background color of the a grid row. I am using the following code snippet to do so. It works fine in Safari, IE 7 and Fire Fox, but fails in IE6.

Note:

1. I have to change the background color and the image at runtime so I cannot use a static class that is defined in some css file

2. I have tried using the '!important' attribute but this did not work.

getRowClass: function(record) {
arguments[2].tstyle += "background:#FF000 url('../../RM-ui/images
/severity_GRAY.png');";
return grid.getView().getRowClass.apply(this, arguments);
}

Can some one let me know what is wrong in this.

Regards,
Pankaj.


Yes, I have tried adding 2 diffferent styles background-color:#00FFF and background-image: url('../../RM-ui/images/severity_GRAY.png);'; but this did not work.

Can you suggest me what is wrong why is it not working in IE6?

I have seen your too codes here (please use code tags to get this looking better) and i only could say that you have an incorrect color code. "#FF000" is not a color code "#FF0000" is a color code, you must have 6 chars after "#" for color codes or use only 3 of them (in your case would be #F00).

Maybe thats the problem...

pachaudhary
3 May 2009, 8:57 PM
That was a typo error. I have the color set to #FF0000, but still facing the same error. And this happens only on IE6 works fine in IE7, Safari and Firefox

pachaudhary
3 May 2009, 9:08 PM
I have check the style that is getting applied on the row, its is

BACKGROUND: url('../../RM-ui/images/severity_GRAY.png') #ff99cc; WIDTH: 1586px

This is not working on IE6.

Condor
3 May 2009, 9:40 PM
And does my example above work on your IE6? If yes, then what are you doing differently?

syscobra
4 May 2009, 7:18 AM
I have check the style that is getting applied on the row, its is

BACKGROUND: url('../../RM-ui/images/severity_GRAY.png') #ff99cc; WIDTH: 1586px

This is not working on IE6.
This is not the way:

BACKGROUND: url('../../RM-ui/images/severity_GRAY.png') #ff99cc; WIDTH: 1586px
You must put the color code first then the url...
try not to use Capital LETTERS too... is not good

background: #ff99cc url('../../RM-ui/images/severity_GRAY.png');width: 1586px
Also if you use an image on the background it will replace the background color if its bigger than the container you are applying it.
if this way is not working try using the full css code that would be in this case:

background-color: #ff99cc;background-image:url('../../RM-ui/images/severity_GRAY.png');width:1586px;

edit:
Also check the Image you are using i see its an PNG if its a 32Bits PNG file with transparency that doesn't work on IE6... you must use a normal image 8Bit or 16Bit. You can try to change the image to a GIF, is better for IE6 compatibility. (This if you use a transparency in the image)