Cursor placement with CSS styled image Text input boxes

I Have a styled search box which uses a background, whenever I click on the box the cursor flashes larger than the text box, until I type where it appears at the correct size.

This is the HTML -

<div class="row2 zero_padMarg floatRight">
 <label for="srcTxt" title="search开发者_StackOverflow form">search</label>
 <input type="text" id="srchCom" name="srcTxt" class="validate[required,length[3,75]] text-input txtBox">
 <input type="submit" class="searchSubBtn" value="submit" title="submit search" name="submit">
</div>

.searchBlock input#srchCom {
    background:url("../images/srchSml.gif") no-repeat scroll left top transparent;
    border-style:none;
    font-size:11px;
    height:23px;
    line-height:normal;
    overflow:hidden;
    text-indent:24px;
    vertical-align:bottom;
    width:160px;
}

Any ideas on a cross browser solution please?

Thanks for your help Paul

I'd try using padding to suggest that the content height is the same as the font-size. Add:

padding: 6px 0;

...and reduce the overall height to the same height as the font-size:

height: 11px;

This looks to me like a Firefox bug.

Can't you change your <input>'s height?

Well, actually I tried removing height of the text box and gave appropriate padding for top and bottom, it worked very well for both IE and firefox.