IE7 CSS First Letter effect

[blwow]

Something strange is going on with my site when viewing it in IE7!

Please have a look! This is my site:
http://www.newmedia.lincoln.ac.uk/jecgardner/index.php

In firefox and ie6 the first letter of each blog title appears fine where the first letter is bigger then the rest of the words in the title.. When I view my site in IE7 the first letter is invisible? I have no idea why!?

I tried to fix this but when i got the first letter to work in IE7 the effect stopped in firefox

This is the line of code that works in FF and IE6:

echo "<p class='blogtitle'> <span class='blogtit'>".showinweb($row['title'])."</span></P><br />"; 

This is the CSS it refers to:

p.blogtitle:first-letter {
	font-size: x-large;
	font-weight: bold;
	float: left;
	}

p.blogtitle { 
	font-size: 10pt;
	font-style: italic;
	word-spacing: 1em;
	letter-spacing: 0.1cm;
	}

span.blogtit{
    text-transform: uppercase;	
   }

p.blogtitle and span.blogtit works in IE7 because the words are spaced and uppercase. I have no idea why the first letter isnt working?!


When i got it to work in IE7 and not FF this is the code I used (all i did was add <P class='testing'>):

echo "<p class='blogtitle'> <P class='testing'> <span class='blogtit'>".showinweb($row['title'])."</span></P></P><br />"; 

P.testing:first-letter {font-size: x-large;
	font-weight: bold;
	float: left;}

I am stuck..

I am also using this method below so my site looks the same in all browsers:

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="css/mainie6.css" />
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="css/mainie7.css" />
<![endif]-->

This is a screenshot of a blog title in IE7:


This is a screenshot of a blog title in Firefox:


As you can see the first letter is missing in IE7

Please can someone help!!?