Explain difference between using <g:Image> or a <div> (in UI Binder) when using GWT sprite ?

Hello,

I have the css properties of the header's  top left element (the logo's place) which has a logo sprite in background :

@sprite .topHeaderLeftAlign {

gwt-image: "sprites_MS";

width: 154px; 

height: 60px;

background-position: -1101px -973px; /* logo */

}

I have a different result when I use :

(method 1) <g:Image ui:field="logo" addStyleNames='{commonRes.commonCss.topHeaderLeftAlign}' />

or

(method 2) <div class='{commonRes.commonCss.topHeaderLeftAlign}' />

My problem occurs using method 1 (<g:Image>) because I see an undesirable "gray border" around my logo. For example you can see theses borders in the footer's social icons of my website : http://127.0.0.1:8888/MananaSeguro.html?gwt.codesvr=127.0.0.1:9997#!inicio 

Moreover, I do not want to use method 2 (<div>) because I need to add some handler for the mouse events (I do not know if it is possible in the worst case).

Could you give me the best solution to display my images using the sprite (correctly appearing, without the border) and having all the necessaries event listeners ?

Thanks you.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/-Ub6KLB4_1IJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.