Strange textbox error in ie6

[boxhead]

This is a preliminary post to see if anyone knows what causes this - more info can be added if required. Not even sure if this is a .net issue, html or css.

I have a text box in my asp.net webform:

<asp:TextBox ID="tbArea" runat="server" Width="90%" TextMode="MultiLine" Rows="3" />

This works fine on ie7+ but when view in ie6 as soon as the users clicks into the box it resizes horizontally going off the screen. No horizontal scroll bar is provided so users are unable to view all of what they are typing.

The field is an a div with this css class:

.FieldRight
{	
	display: block;
	padding: 0 0.5em 0 12.5em; 
	overflow: visible;
}

if we take it out of here is still resizes but slightly less.

Any ideas what is going on? I'm affraid 'get rid of IE6' is not a solution - it is happening in our org but very slowly!

Cheers for any thoughts.

[NightStalker-DNS]

I would suggest not using width and rows. Stick to using style="" to do all the styling and sizing. That should hopefully sort out your issue.

[imaginekitty]

... Stick to using style="" to do all the styling and sizing. ...

NS, I don't think I've ever disagreed with you before. The use of inline styling is something I can't recommend. Better to use a CssClass instead.

<asp:TextBox ID="tbArea" runat="server" Width="90%" TextMode="MultiLine" Rows="3" />

.FieldRight
{	
	display: block;
	padding: 0 0.5em 0 12.5em; 
	overflow: visible;
}

... No horizontal scroll bar is provided so users are unable to view all of what they are typing. ...

That would imply the improper use of absolute positioning but who knows without seeing the rest of the code. You're going to have to show a link or at least the rendered markup and styling to the page for correct diagnosis. .FieldRight isn't in the markup so it has no context.

Oh, and get rid of IE6.

[boxhead]

<asp:Panel ID="Panel1" runat="server" CssClass="Borders">
	<div class="BorderTitle">
		Panel Title
	</div>
	<div class="FieldsWrapper">
		<div class="FieldLeft FieldNameFont">
			Field Name:
		</div>
		<div class="FieldRight">
			<asp:TextBox ID="TextBox1" runat="server" Width="90%" TextMode="MultiLine" Rows="3" />
		</div>
	</div>
</asp:Panel>

.Borders
{
	border: solid 2px #a5b5d1;
	padding: 0em 0.0em 0.3em 0em;
	margin: 0.3em 0em 1em 0em;
	background-color: white;
}

.BorderTitle{
	margin-top: 0px;
	margin-bottom: 0.6em;
	padding: .2em .3em .4em .3em;
	font-weight: bold;
	color: #000055;
	background-color: #e3e9ef;
}

.FieldsWrapper
{	
	margin:0.2em 0.5em 0.3em 0.5em;
}

.FieldLeft
{
	float: left;
	width: 11em;
	padding:0 0.5em 0 0.5em;
	text-align: right; 
	clear: left;
	white-space: nowrap;
}

.FieldRight
{	
	display: block;
	padding: 0 0.5em 0 12.5em; 
	overflow: visible;
}

.FieldNameFont
{
	font-family: Verdana, Arial, Tahoma;
	font-size: 1em;
	font-weight: bold;
	color: #111111;
}

[NightStalker-DNS]

NS, I don't think I've ever disagreed with you before. The use of inline styling is something I can't recommend. Better to use a CssClass instead.

I agree with you. I only use that aswell. But I wanted to first get it working, then refine it later. But I guess it would be easier to adjust a css class than inline style like this.

So I agree, use the method suggested by imaginekitty. Should give you the same result at the end of the day, just a bit cleaner.

Also, once you have that in place, you can play around with the settings in Firebug to make sure its 100% in firefox, then check IE again.