Span element width

If you've ever tried setting a width to a <span> element, you'll find that somehow it just doesn't work. I just found out that the reason for this is that elements that have display:inline property set, will ignore width (because inline elements will automatically assume the smallest possible width.

So you can fix this by doing something like

span {
  display: inline-block;
  width: 50px;
}

.. and according to the HTML spec, <span> is an inline element.

Grid borders in GWT

Grid borders in GWT can be extremely annoying. If you are trying as hard as you can, but can't seem to make the borders between cells disappear, you can use the following css for the entire grid:


.grid-without-cell-borders{
   border-collapse:collapse;
}

This works because GWT creates a html table element for a grid, so setting the border-collapse property to collapse will make the table cell borders disappear.

how to override css classes

A useful trick when trying to write clean and unobtrusive css is the following: create id selectors. When you have a large and complex project with many css files flying around everywhere, and you want to override a class you should stop and think before you do. You should think "hey - is it possible that my changes might affect another component in a galaxy far far away (or maybe in my colleague's project)?" If the answer is yes, just create an id

#myId{
}

and within that id you can safely override that class you were so dying to override:

#myId .classWhichSucksSoMuchIWantToOverrideId{
   text-align:left;
}

RESULT:
In your code if you simply create an empty div like this

<div id="myId"> </div>

and inside that div you place all the code which corresponds to your part of the project like this:

<div id="myId">

   <div class="classWhichSucksSoMuchIWantToOverrideIt">
           this text will be left aligned!!
   </div>

</div>

you will see the overridden style applied only to the elements which are inside the outer div with id="myId".

Other, innocent elements which happened to have the class classWhichSucksSoMuchIWantToOverrideId will not be affected (unless they are inside the div with id="myId").

good job well done