What is the simplest way and most reliable way to make a text lay on top of an image (GWT, CSS)?

Ok, I have a mail icon for the message system. Whenever there is a new message comming, the system will count the number of messages & show that number on top of the mail icon.

He is in xml file

<g:FlowPanel addStyleNames="{res.css.flowInline}">                                        <g:Image ui:field="privateMessageImage" addStyleNames="{res.css.mailIcon}"   url="/images/icon/mail.png" title="Private Message" />      <g:Label text="6" addStyleNames="{style.privateMessageNumber}" />      </g:FlowPanel>

The result is like this:

________  |__\/__|6     

That is not what i want cos the number 6 is right at the end of the mail icon.

So I want it look like this

________  |6_\/__|     

Here is css

.privateMessageNumber{      font-weight:bold;      color:red;        font-size: large;     }  .mailIcon{      width:37px;      height:25px;      cursor: pointer;      cursor: hand;  }

So how to fix it to achieve the desired result.

Note:I just want a very reliable css that can work in all browser, I don't need colorful complicated css.

Also see http://stackoverflow.com/questions/22649962/what-is-the-simplest-way-and-most-reliable-way-to-make-a-text-lay-on-top-of-an-i

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.