PDA

View Full Version : CSS issue w/ comboBox tpl, IE 6 only



karieanis
21 Jan 2009, 1:35 PM
Hi guys,

I've got a comboBox using the following tpl:



var comboTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="search-item" style="font-family:arial; font-size:12px; padding:10px 10px 10px 10px;">',
'<tpl if="this.isset(icon)">',
'<div class="ux-icon-combo-item {icon}">',
'</tpl>',
'<tpl if="!this.isset(icon)">',
'<div>',
'</tpl>',
'<b>{name}</b><br />',
'<span style="color:gray;">{desc}</span>',
'</div>',
'</div>',
'</tpl>',
{
isset: function(variable)
{
return variable!="";
}
});
The problem is as follows - when the combobox is expanded, the icon for the first element of the list is not visible. However all the rest are fine, and stay visible when the 'over' class is applied to their respective elements. As indicated in the title, this is an IE 6 problem only - and i've been unable to see anything out of the ordinary with the styles for the elements when using a dodgy IE DOM inspector tool.

Here's the relevant CSS rules:



.ux-icon-combo-item{background-repeat:no-repeat!important;background-position: 3px 7% ! important;padding-left: 24px ! important;} // css from Saki's iconcombo plugin tutorial
.x-icon-manager{background-image:url(../images/icons/user_suit.png)!important;}
Any ideas as to what may be going on?