how can i update these css classes to generate a blue box behind the first letter of a word?

Question

I am trying to customize a titles in a Microsoft share point portal and found these 4 css classes to control the title design:

   .ms-WPTitle {font-weight: bold; font-family: verdana, arial, helvetica, sans-serif; color: #003399; padding-left: 6px; padding-right: 7px; padding-top: 2px; padding-bottom: 2px; font-size: 8pt; }
   .ms-WPTitle A:link, .ms-WPTitle A:visited { color:#003399; text-decoration:none; cursor:hand; }
   .ms-WPTitle A:hover { color:red; text-decoration:underline; cursor:hand; }
   .ms-toolbar { font-family: verdana; font-size: .68em; text-decoration: none; color: #003399; }

What updates to the above classes do i need to make the visual work as required?

here is the problem i am trying to solve in IE 6 and IE 7 the blue square around the first letter is not working in IE. MY css used is:

<style>
      .FirstLetter:first-letter{font-family: arial; font-size: 14pt; font-weight: bold;color:White; background:Blue; border:1px black solid; padding-top:8px; padding-left:8px; padding-bottom:3px;}
      .Spaced{letter-spacing: 5px;font-family: arial; font-size: 14pt; font-weight: bold;}
      </style>

<div class="FirstLetter Spaced headerFont">
Executive Summary
</div>

Answer 1

To fix the wrong amount of padding on the top and bottom of the first letter, I experimentally found that you should just increase the amount for IE6/7.

To make it display at all in IE6, you have to put a space in like this:

.FirstLetter:first-letter{

to this:

.FirstLetter:first-letter {

I shit you not.

So, complete code which makes it look correct everywhere, as far as I can tell:

Live Demo (see code)

CSS:

.FirstLetter:first-letter {font-family: arial; font-size: 14pt; font-weight: bold;color:White; background:Blue; border:1px black solid; padding-top:8px; padding-left:8px; padding-bottom:3px;}
                       /*^ important space!*/
.Spaced{letter-spacing: 5px;font-family: arial; font-size: 14pt; font-weight: bold;}

HTML:

<div class="FirstLetter Spaced headerFont">
Executive Summary
</div>

Bonus CSS for IE <8:

<!--[if lt IE 8]>
<style>
.FirstLetter:first-letter {padding-top:12px; padding-bottom:7px}
</style>
<![endif]-->

Answer 2

I don't know how to apply rules to JUST the first letter, but you could try breaking the word apart and putting the first letter in its own div:

<div class="css-for-all-letters">
  <div class="css-for-first-letter" style="float:left;">E</div>
  <div class="css-for-the-other-letters" style="float:left;">xecutive Summary</div>
  <div style="clear:both;"></div>
</div>

To be honest though, this could be VERY annoying if you had to swap the text (in internationalization for example). So I would keep that in mind before you tried this.