IE 6 and the CSS dot notation

I have this code:

CSS
---
p {color:#583000; font-family:arial; font-size:14pt}
p.italic {color:black; font-family:arial; font-style:italic; font-size:10pt;}

JavaScript
----------
function test(theId){
  oInp = document.getElementById(theId);

  pItal = document.createElement("p");
  pItal.setAttribute("class","italic");
  oInp.parentNode.replaceChild(pItal, oInp);
       
  text = 'Just A Test';
  textNode = document.createTextNode(text);
  pItal.appendChild(textNode);
}

HTML
----
<form>
 <input type="text" name="textName" onBlur="test('x')" id="x">
</form>

In NN 6 this works fine, the text is displayed using the "p.italic" style. In IE 6 the text is displayed using the "p" style, not the "p.italic" as intended. I can't tell you how annoyed I am. I'm trying to avoid having two separate CSS's. Why doesn't IE recognize the CSS dot notation? I even checked that IE wasn't ignoring the setAttribute method using:

alert(pItal.getAttribute("class"));

and both browsers returned

italic

although IE isn't actually using the "p.italic" style. Short of having to set each individual "p.italic" attribute using JavaScript, what can I do to get IE to cooperate?

bmh