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.