Re: ImageBundle and IE7
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:
After:
-->
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
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
>
>
>
> > On 16 nov, 00:32, Frédéric MINATCHY
> > 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
>
> > > > On 15 nov, 11:38, Frédéric MINATCHY
> > > > 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
> > google-web-tool...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > google-web-toolkit+unsubscr...@googlegroups.com > cr...@googlegroups.com>
> > > > .
> > > > 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 google-web-tool...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-toolkit+unsubscr...@googlegroups.com
> > .
> > 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 google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+uns
Re: ImageBundle and IE7
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
>
>
> On 16 nov, 00:32, Frédéric MINATCHY
> 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/DevGuideClientBundle.html#ImageResource
> and
> http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites
>
> > 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
> >
> >
> >
> >
> >
> >
> >
> >
> >
> > > On 15 nov, 11:38, Frédéric MINATCHY
> > > 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
> google-web-tool...@googlegroups.com.
> > > To unsubscribe from this group, send email to
> > > google-web-toolkit+unsubscr...@googlegroups.com cr...@googlegroups.com>
> > > .
> > > 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 google-web-tool...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-toolkit+unsubscr...@googlegroups.com
> .
> 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 google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: ImageBundle and IE7
On 16 nov, 00:32, Frédéric MINATCHY
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/DevGuideClientBundle.html#ImageResource
and
http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites
> 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
>
>
>
>
>
>
>
>
>
> > On 15 nov, 11:38, Frédéric MINATCHY
> > 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 google-web-tool...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-toolkit+unsubscr...@googlegroups.com > cr...@googlegroups.com>
> > .
> > 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 google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: ImageBundle and IE7
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) and on the smartgwt elements a white square is shown.
What is the difference with @sprite and Image bundle?
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
>
>
> On 15 nov, 11:38, Frédéric MINATCHY
> 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 google-web-tool...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-toolkit+unsubscr...@googlegroups.com
> .
> 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 google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: ImageBundle and IE7
On 15 nov, 11:38, Frédéric MINATCHY 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 google-web-tool...@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: ImageBundle and IE7
Thank you for your advise...
But is there a way to make it work with all browser??
As IE8+ works with DataResources how can I use a similar code that works
with IE6/7 too?
have you got some code example?
regards
2010/11/15 DaveC
> I think what you need to be using instead of ImageResource is
> DataResource.
>
> GWT uses a different method for bundling resources for the different
> browsers - those that support Data URIs (IE8+, Firefox, Chrome et al)
> get their images turned into base64 encoded strings - IE6/7 gets a
> sprite image (all the images merged into one).
>
> Cheers,
> Dave
>
> On Nov 15, 7:32 am, Frédéric MINATCHY
> wrote:
> > Hi everybody...
> >
> > I have a problem with images bundle and IE7...
> >
> > In some cases images are not rendered in other cases all images are
> rendered
> > on the same button... (I use those images as icons to custom buttons)
> >
> > I don't understand everything seems ok on Firefox and Chrome (as usual)
> >
> > I use gwt 2.1 and smartgwt
> >
> > There is a part of my code :
> >
> > 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();
> >
> > @Source("group_add.png")
> > ImageResource addGroupImage();
> >
> > @Source("group_delete.png")
> > ImageResource deleteGroupImage();
> >
> > @Source("group_edit.png")
> > ImageResource editGroupImage();
> >
> > }
> >
> > and the way i use it :
> >
> > to show a smartgwt button :
> >
> > modificationButton = new ImgButton();
> >
> > modificationButton.setSrc(UsersAdministrationImagesResources.INSTANCE
> > .editUserImage().getURL());
> >
> > and in a real gwt button :
> >
> > createButton = new Button();
> > createButton.setHTML( ""+i18n.createUser() + "
> > src=\"" + UsersAdministrationImagesResources.INSTANCE
> > .editUserImage().getURL() + "\">");
> > createButton.setWidth("200");
> > createButton.setHeight("22");
> >
> > Why is it always so difficult with IE?
> >
> > Is there someone to help me pleaz
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To post to this group, send email to google-web-tool...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-toolkit+unsubscr...@googlegroups.com
> .
> 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 google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: ImageBundle and IE7
I think what you need to be using instead of ImageResource is
DataResource.
GWT uses a different method for bundling resources for the different
browsers - those that support Data URIs (IE8+, Firefox, Chrome et al)
get their images turned into base64 encoded strings - IE6/7 gets a
sprite image (all the images merged into one).
Cheers,
Dave
On Nov 15, 7:32 am, Frédéric MINATCHY
wrote:
> Hi everybody...
>
> I have a problem with images bundle and IE7...
>
> In some cases images are not rendered in other cases all images are rendered
> on the same button... (I use those images as icons to custom buttons)
>
> I don't understand everything seems ok on Firefox and Chrome (as usual)
>
> I use gwt 2.1 and smartgwt
>
> There is a part of my code :
>
> 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();
>
> @Source("group_add.png")
> ImageResource addGroupImage();
>
> @Source("group_delete.png")
> ImageResource deleteGroupImage();
>
> @Source("group_edit.png")
> ImageResource editGroupImage();
>
> }
>
> and the way i use it :
>
> to show a smartgwt button :
>
> modificationButton = new ImgButton();
>
> modificationButton.setSrc(UsersAdministrationImagesResources.INSTANCE
> .editUserImage().getURL());
>
> and in a real gwt button :
>
> createButton = new Button();
> createButton.setHTML( ""+i18n.createUser() + " src=\"" + UsersAdministrationImagesResources.INSTANCE
> .editUserImage().getURL() + "\">");
> createButton.setWidth("200");
> createButton.setHeight("22");
>
> Why is it always so difficult with IE?
>
> Is there someone to help me pleaz
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
ImageBundle and IE7
Hi everybody...
I have a problem with images bundle and IE7...
In some cases images are not rendered in other cases all images are rendered
on the same button... (I use those images as icons to custom buttons)
I don't understand everything seems ok on Firefox and Chrome (as usual)
I use gwt 2.1 and smartgwt
There is a part of my code :
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();
@Source("group_add.png")
ImageResource addGroupImage();
@Source("group_delete.png")
ImageResource deleteGroupImage();
@Source("group_edit.png")
ImageResource editGroupImage();
}
and the way i use it :
to show a smartgwt button :
modificationButton = new ImgButton();
modificationButton.setSrc(UsersAdministrationImagesResources.INSTANCE
.editUserImage().getURL());
and in a real gwt button :
createButton = new Button();
createButton.setHTML( ""+i18n.createUser() + " ");
createButton.setWidth("200");
createButton.setHeight("22");
Why is it always so difficult with IE?
Is there someone to help me pleaz
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
