I have followed the sample code and all works fine, just the image looks bad. Here is a sample:



And here is the code that produces it:

<eo:ProgressBar ID="ProgressBar1" runat="server" Width="25%"
onruntask="ProgressBar1_RunTask" StartTaskButton="ButtonStart" StopTaskButton="ButtonStop"
BackgroundImage="00060301" BackgroundImageLeft="00060302" BackgroundImageRight="00060303" IndicatorImage="00060304"
ControlSkinID="None" ShowPercentage="True"
ClientSideOnValueChanged="OnProgressBarUpdate">
</eo:ProgressBar>

The salient rendering options are:

BackgroundImage="00060301" BackgroundImageLeft="00060302" BackgroundImageRight="00060303" IndicatorImage="00060304"

and I have tried all of:

BackgroundImage="00060101" BackgroundImageLeft="00060102" BackgroundImageRight="00060103" IndicatorImage="00060104"
BackgroundImage="00060201" BackgroundImageLeft="00060202" BackgroundImageRight="00060203" IndicatorImage="00060204"
BackgroundImage="00060301" BackgroundImageLeft="00060302" BackgroundImageRight="00060303" IndicatorImage="00060304"
BackgroundImage="00060401" BackgroundImageLeft="00060402" BackgroundImageRight="00060403" IndicatorImage="00060404"

and I can get the four built in styles rendering but all with the same rendering glitch. Which for the record is:

1. The overlay does not start at left
2. The right image does not blend properly

Neither of which are apparent in the samples! But yet, if I copy the code I get this.

I can see with a decompiler that there are internal resources in EO.Web.dll that these numbers seem to map into and yet not quite. For example, set 3 looks to map to:

EO.Web.Images.ProgressBar.Vista.bg.gif
EO.Web.Images.ProgressBar.Vista.bg_left.gif
EO.Web.Images.ProgressBar.Vista.bg_right.gif
EO.Web.Images.ProgressBar.Vista.bg_indicator.gif

or not as these left and right embedded images look to be nice 1x13 pixel gifs. So something isn't mapping right.

It would rock if this were a little better documented I guess.

I have experimented also by exporting those images and using URLs. Same result. I have replaced the images with my own and same results. In fact the conclusion I draw is the the progressbar is inserting strips of BackroundImage after both left and right images!

In fact I confirm this by copying straight out of the demo:

<eo:ProgressBar runat="server" id="ProgressBar1" ShowPercentage="True" IndicatorImage="00060104"
BackgroundImageRight="00060103" ControlSkinID="None" BackgroundImage="00060101" IndicatorIncrement="7"
BackgroundImageLeft="00060102" Width="300px" StartTaskButton="btnStart" StopTaskButton="btnStop"
ClientSideOnValueChanged="OnProgress" OnRunTask="ProgressBar1_RunTask"></eo:ProgressBar>

and it renders that same way! Not at all cleanly like in your on-line demo!

So I'm forced to conclude perhaps some strange bug is at play.

Thank you kindly. That fixed it for me. Just the tip to look in that direction was enough. I just inspected the styles in FF and immediately highlighted the issue. You use a table to render the control and that inherited a padding-right from a global style sheet. Wrapped it in a div scoped style and all is good.