SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange textbox error in ie6

    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:

    Code:
    <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:

    Code:
    .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.
    monkey - the rest is history

  2. #2
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,878
    Mentioned
    46 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NightStalker-DNS View Post
    ... 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.

    Quote Originally Posted by boxhead View Post
    Code:
    <asp:TextBox ID="tbArea" runat="server" Width="90%" TextMode="MultiLine" Rows="3" />
    Code:
    .FieldRight
    {	
    	display: block;
    	padding: 0 0.5em 0 12.5em; 
    	overflow: visible;
    }
    Quote Originally Posted by boxhead View Post
    ... 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.

  4. #4
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <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>
    Code:
    .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;
    }
    monkey - the rest is history

  5. #5
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,878
    Mentioned
    46 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •