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 :confused:

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:
http://img205.imageshack.us/img205/5311/ssflsi8.gif

This is a screenshot of a blog title in Firefox:
http://img260.imageshack.us/img260/3880/ssffflsm2.gif

As you can see the first letter is missing in IE7 :(

Please can someone help!!?