I just had this exact problem ... I made toolbar buttons by styling an
image and giving it an onClick behavior but IE7 behaved exactly as you
have described. For me, the solution required three parts:
1) Use DataResource instead of ImageResource as described above.
2) Use resource instead of URL in the Image tag like this:
Before:
<g:Image url="{res.arrowRefreshIcon.getURL}"
styleName="{res.css.tool}" title="Refresh the log list now"
ui:field="refresh" />
After:
<g:Image resource="{res.arrowRefreshIcon}" styleName="{res.css.tool}"
title="Refresh the log list now" ui:field="refresh" />-->
3) Encapsulate the image into a container (a div element in my case)
that was styled instead of the Image itself (so that the 16x16 icons
were clipped at the edges.
Steps one and two together seem to have solved the problem with IE7
squishing the entire image bundle into the 16x16 square on the
button's face. Once IE7 was properly positioning and sizing the
image, the padding around the image allowed the other images in the
bundle to become visible. In order to eliminate this, I had to move
the padding around the button to an outer container. Basically, the
clipping has to be the image size, so no margins or padding seem to be
possible.
I'm no IE7 expert but this does seem to fix the issue. Hope it works
for you.
On Nov 22, 10:36 am, Frédéric MINATCHY <[email protected]>
wrote:
> Thank you to all of you...
>
> I tried to use @sprite during the week end and it was OK...
>
> But now I have an other kind of problem on IE6/7... It seems that they
> cannot execute RPC fonction... I will write an other mail about it...
>
> 2010/11/16 Thomas Broyer <[email protected]>
>
>
>
> > On 16 nov, 00:32, Frédéric MINATCHY <[email protected]>
> > wrote:
> > > Hello...
>
> > > As I said before I used the ImageResource in my code like this :
>
> > > public interface UsersAdministrationImagesResources extends ClientBundle
> > {
>
> > > public static UsersAdministrationImagesResources INSTANCE =
> > > GWT.create(UsersAdministrationImagesResources.class);
>
> > > @Source("user_add.png")
> > > ImageResource addUserImage();
>
> > > @Source("user_delete.png")
> > > ImageResource deleteUserImage();
>
> > > @Source("user_edit.png")
> > > ImageResource editUserImage();
>
> > > I get the images by using
> > > GWT.create(UsersAdministrationImagesResources.class).
>
> > > And then on Internet Explorer 7 some images ont gwt and smartgwt
> > component
> > > are not correctly displayed.
>
> > > On the gwt button all the image resources are shown (whereas only one
> > should
> > > be shown)
>
> > As Dave wrote, ImageResource generates data: URLs for those browsers
> > that supports it (everyone except IE6/7) and a "sprite image" (see
> >http://css-tricks.com/css-sprites) otherwise; so what you see really
> > is the intended behavior.
>
> > > and on the smartgwt elements a white square is shown.
>
> > I don't know what SmartGWT (or rather, SmartClient) does.
>
> > > What is the difference with @sprite and Image bundle?
>
> > @sprite will generate the appropriate CSS properties whichever
> > technique is used: "background: url(data:....)" for all browsers but
> > IE6/7, and a bunch of properties for IE6/7 (background-image,
> > background-position, width and height; see link above).
> > Using an Image widget with an ImageResource does exactly the same as
> > @sprite does at the CssResource level.
>
> > See
> >http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClien...
> > and
> >http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClien...
>
> > > How can I choose to use explicitly one of them?
>
> > > Thank you for clues... I hope they will help me to find a correct
> > solution.
>
> > > But if you have another idea do not hesitate.
>
> > > regards.
>
> > > Fred
>
> > > 2010/11/15 Thomas Broyer <[email protected]>
>
> > > > On 15 nov, 11:38, Frédéric MINATCHY <[email protected]>
> > > > wrote:
> > > > > Thank you for your advise...
>
> > > > > But is there a way to make it work with all browser??
>
> > > > ImageResource really is designed to work with either the Image widget
> > > > or a @sprite in a CssResource.
>
> > > > --
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "Google Web Toolkit" group.
> > > > To post to this group, send email to
> > [email protected].
> > > > To unsubscribe from this group, send email to
> > > > [email protected]<google-web-toolkit%[email protected]><google-web-toolkit%2Bunsubs
> > [email protected]>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Web Toolkit" group.
> > To post to this group, send email to [email protected].
> > To unsubscribe from this group, send email to
> > [email protected]<google-web-toolkit%[email protected]>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/google-web-toolkit?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
