In the following code snippet, there is a challenge in ensuring that the TextBox field properly fits within the Width and Height of the div#chat-message. This seems to work well in Chrome but encounters issues in IE8 or Mozilla. Additionally, in Mozilla, the TextBox field can be resized, which is not the desired behavior.
HTML:
<!-- Nested in Div's -->
<div id="chat-message-outline">
<div id="chat-message">
<asp:TextBox ID="txtmsg" BackColor="Transparent" runat="server"
Wrap="true" BorderStyle="None" TextMode="MultiLine" />
</div>
</div>
CSS:
#chat-message-outline
{
height: 20%;
width: 100%;
background-color: #D1D1D1;
position: relative;
}
#chat-message, #txtmsg
{
padding: 0;
top: 2px;
bottom: 2px;
right: 2px;
left: 2px;
background-color: white;
position: absolute;
resize: none; /* CSS3 property */
}
I need assistance in making this code cross-browser compatible.
Edit: Using percentages is not an option as there needs to be a 2px gap between the TextBox field and the parent div.
PS: I previously posted this question on Stack Overflow, but the solution provided was not cross-browser compatible (as discovered later).