vertically aligning text within a div

If you've ever tried to vertically align some text inside a div, you might notice that it's pretty annoyingly difficult. I just found myself with the following scenario:

I wanted to create something that looked like this:

And I wanted to use a single css class to style the div which would contain the image as a background and have the text vertically aligned.

I created the background image with the exclamation mark, and then positioned it on the left like so:

.verticallyAlignedDiv {
    height: 50px;
    background: url("exclamationMark20pxhigh.png") no-repeat scroll 0 0 transparent;
}

When I added the text it was aligned on the top and was overlapping the background. I then added padding on the left (to indent the text), and on the top (to separate it from the top of the div).

.verticallyAlignedDiv {
    height: 50px;
    background: url("exclamationMark20pxhigh.png") no-repeat scroll 0 0 transparent;
    padding-left: 37px;
    padding-top: 15px;
}

This did NOT work because adding padding on top pushed the height of the whole thing, creating extra unwanted space on the bottom.

Solution:
 You want to use the vertical-align attribute. However, this only will work on something with a fixed height, so I changed my height attribute to be a line-height , and then I could use the vertical-align.
 Like this:

.verticallyAlignedDiv {
    line-height: 50px;
    background: url("exclamationMark20pxhigh.png") no-repeat scroll 0 0 transparent;
    padding-left: 37px;
    vertical-align: middle;
}



and that's another good job well done

:)

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