contenteditable cursor is too big

[shadiadiph]

I have a div that the user can edit problem is when I select the div the initial cursor is always the same height as the div??? Also if i enter no text and click on it i have to leave the div and click before I can enter the div again????

HTML

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

CSS

#editabletxt{   
 width:560px; 
 height:100px;
 line-height:20px;
 display:block;
 overflow:auto;
 outline: 0px solid transparent;
 word-wrap: break-word;
 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;
}

[shadiadiph]

i only seem to be getting the big caret issue in mozilla in ie google chrome it is ok.
one issue i have in ie is with the word wrap it gives a double line space without it it is fine. in mozilla without word wrap the text doesn't break into lines at all??

I think IE shouldn't be allowed to be sold to anyone lol

[shadiadiph]

Fixed almost everythin already by trial and error the only problem I have now is in mozilla it can't find the initial cursor position properly and it is the entire height of the div when you first select it??

[shadiadiph]

Ok I got it almost working only a few issues now.

1) when i clcik 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??