Announcement

**Isomorphic** · 5 May 2011, 08:14

The fact that it's going to the app dir indicates the reference to this media is either in your application code or in customizations you've made to the skin. Search for "ToolStrip/button/button" to find it.

**broadsoft** · 11 May 2011, 04:53

Thanks for the reply. I only found one reference of such an image in the whole application and that is inside the "skin_style.css".

However, we are overriding this CSS for all three types of Skins but we are currently using the image @ only one place.

File -> "skin_style.css"
Part of this file for one the skin dir contains:-

.sectionHeaderopened {
background: url(./images/ToolStrip/button/button_start.png) repeat-x scroll;
}
.sectionHeaderclosed {
background: url(./images/ToolStrip/button/button_start.png) repeat-x scroll;
}

When I try to dig more into this issue I found that this issue is caused when ListGrid:-
- is grouped upon some field.
- it uses a row to show an icon and group title text for grouping. (which is
actually a group tree parent node).
- backgroud of that row is using this image ("./images/ToolStrip/button/button_start.png")

Now the behavior for using this image is different in both IE & Firefox:-

Usage in Firefox:-
=============
Firefox uses the CSS class name i.e., class="sectionHeaderopened" inside the "Table > TR > TD".
This CSS class name is pointing to the above mentioned class in CSS "skin_style.css" file. Which is returning the correct result i.e. image is found @ the SKIN Dir.

<table width="361" cellspacing="0" cellpadding="2" border="0" style="table-layout: fixed; overflow: hidden; padding-left: 0px; padding-right: 0px;" class="listTable" id="isc_9Stable"><tbody></tbody><col width="361"><tbody>
<tr><td height="28" align="left" class="sectionHeaderopened" style="padding-top: 0px; padding-bottom: 0px; width: 361px; overflow: hidden;" colspan="1"><div style="overflow: hidden;" cellclipdiv="true"><nobr><img width="1" height="1" border="0" align="TEXTTOP" suppress="TRUE" src="http://172.16.25.83/callcenter/callcenter/sc//skins/Enterprise/images/blank.gif">
<img width="16" height="16" border="0" align="TEXTTOP" suppress="TRUE" src="http://172.16.25.83/callcenter/callcenter/sc//skins/Enterprise/images/ListGrid/group_opened.png">
<img width="3" height="1" border="0" align="TEXTTOP" suppress="TRUE" src="http://172.16.25.83/callcenter/callcenter/sc//skins/Enterprise/images/blank.gif">
Priority 3 (1)
</nobr></div></td></tr>
<tr><td height="28" align="left" class="tallCellSelectedDark" style="padding-top: 0px; padding-bottom: 0px; width: 361px; overflow: hidden;">
.......
.......
.......
</table>

Usage in Internet Explorer 8.0:-
=======================

Unlike firefox; See how IE behaves in the same scenario.
Inside the "TABLE > TR > TD".
It uses the whole image path as mentioned in the "skin_style.css" file into the style tag instead of the CSS class name which firefox is used.

<TABLE style="TABLE-LAYOUT: fixed; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; wrap: false" id=isc_7Btable class=listTable border=0 cellSpacing=0 cellPadding=2>
<COLGROUP>
<COL width=359>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; FONT-FAMILY: Arial,Verdana,sans-serif; BACKGROUND: url(./images/ToolStrip/button/button_start.png) repeat-x; HEIGHT: 23px; COLOR: #333333; FONT-SIZE: 11px; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid; PADDING-TOP: 3px" height=28 align=left><NOBR><SPAN style="WIDTH: 1px; HEIGHT: 1px; OVERFLOW: hidden"> </SPAN><IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://127.0.0.1:8888/callcenter/sc//skins/Graphite/images/ListGrid/group_opened.png',sizingMethod='scale')" border=0 align=textTop src="http://127.0.0.1:8888/callcenter/sc//skins/Graphite/images/blank.gif" width=16 height=16 suppress="TRUE"><SPAN style="WIDTH: 3px; HEIGHT: 1px; OVERFLOW: hidden"> </SPAN>Priority 3 (1)</NOBR></TD></TR>
<TR>
<TD style="BORDER-BOTTOM: white 1px solid; PADDING-BOTTOM: 0px; TEXT-OVERFLOW: ellipsis; FONT-FAMILY: Arial,Verdana,sans-serif; BACKGROUND: #fceeaf; COLOR: #333333; FONT-SIZE: 11px; BORDER-TOP: #9fb7e9 1px dotted; PADDING-TOP: 0px" height=28 width=359 align=left><NOBR>
.......
.......
.......
</TABLE>

Conclusion:-
-------------
So, now what happens in IE that, it tries to get that image from the current app context which is wrong and end up found nothing and HTTP 404 status is returned.

15:50:05.496 0.000 s 1426 GET 127.0.0.1 404 text/html; charset=iso-8859-1 http://127.0.0.1:8888/images/ToolStrip/button/button_start.png

=========================================================

So, can anyone tell me that why IE messes this up.
Is this an IE bug or SmartGWT issue ???

Also, if there is any woraround other than directly copying this image to the app dir @ the place where this image path is requested.

Note:-
-----
This is not the only image which has this behvior for IE. I've noticed one more image "./images/ListGrid/row_Over.png" having such a behavior.

15:49:57.105 0.016 s 1414 GET 127.0.0.1 404 text/html; charset=iso-8859-1 http://127.0.0.1:8888/images/ListGrid/row_Over.png

Please suggest.

**Isomorphic** · 11 May 2011, 10:07

This is, ironically, a consequence of something we need to do to make IE adequately fast - see fastCellUpdates. Possible workarounds are given there. Note, unless you're using skins from an older version, you should have seen the "tallBaseStyle" used automatically, which does not include an image background.

Announcement

Performnace issue in IE; Grouped grid is constantly requesting for an image in IE.

Comment

Comment

Comment