content editable problems in chrome,mozilla and seamonkey

[shadiadiph]

I have been trying to make a div with contenteditable have ironed out sevral cross browser problems already but am having the following problems

 

1) when i click in the editable area in chrome there is no initial caret (cursor) until I type something.

2) On mozilla and seamonkey the caret (cursor) initially appears to be the same height as the div until I type.

 

Any ideas??

 

CSS

#editabletxt{   
width:500px; 
height:100px;
text-align:left;
font-size:80%;
font-weight:normal;   
background:#fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;    
border: 1px solid #dbe1e6;
padding: 4px 4px 4px 4px;
}
.editortext{
width:500px; 
height:100px;
line-height:150%;
display:block;
overflow:auto;
outline: 0px solid transparent;
word-wrap: break-word;
white-space:pre; 
}

 

 

HTML

<div id="editabletxt" name="editabletxt" class="editortext" contenteditable="true"><div></div></div>

 

if you are wondering why there is an empty div in the main div its a hack for IE to stop it including double line breaks.