Hassles with background-image and font sizes

The other day I was working on upgrading the eVision web site to the new look (as well as the latest WordPress 2.02). While I’ve been using HTML for more than a decade, I have to admit, my grasp on CSS is patchy. I’m still picking it up. So it took a bit of wrestling to get it to (more or less) match the design provided by the graphic designer. The big graphic still isn’t in quite the right spot, but no matter, it’s still a vast improvement over the old one.

I did learn a couple of (possibly) valuable tips:

  • In Firefox, the background-image of a div doesn’t display in the portion of the div that has nothing in it. In my case, I had a UL (which forms the dropdown menu) in there, right justified. The background only appeared in the left hand bit in IE, not Firefox. I had to add a   to it to get it to appear… and then I had to specify a height, so the background image would go to the right height, instead of just the nominal height of the non-existent text.
  • Font sizes… after complaints from a colleague who is keen on big text, I had to remove all the references to pt sizes in text, in favour of em, so that IE would resize the text when asked. Firefox handles this even if you’ve got all pt sizes.
  • I also learnt I need to study CSS a bit more. The next projects will be doing some more upgrades and new WordPress themes, I think. I’ve got a few that need doing.