Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Firefox and textarea - to wrap or not to wrap

Status
Not open for further replies.
jwhite68

jwhite68

IS-IT--Management
Jun 14, 2007
77
BG
The more I test with Firefox, the more confidence I lose in this web browser.

If I have a textarea (as many of you probably will in your forms), instead of neatly wrapping to the next line (even with no spaces), it scrolls to the right continuously - and I cannot find a fix for this. It just appears to be its behaviour. IE handles this perfectly.

Similarly, if you have text in a div class, and the text goes beyond that, in IE, with overflow:auto set in the stylesheet for that div, the text will be displayed with a horizontal/vertical scrollbar, so your form doesnt stretch.
Firefox on the other hand, just stretches your form.
I see this widely reported on many forums and just a simple Google search on the issue - with no evident solution.

Bill Gates 2 Makers of firefox 0.

Sorry, but I am getting so tired of the flakiness of Firefox.

Not being able to wrap text in the latter case is a serious presentation issue, that cannot and should not be treated lightly by the makers of Firefox.
 
Sort by date Sort by votes
Maybe you could present a URL we can visit to test this wild allegations.

I use FX on a Mac and on Windows and have never had problems with textareas or divs causing problems (the only examples of problems usually occur when the code is badly structured, when CSS is badly applied, or when people don't bother to validate their code against the doctype for the page).

You do seem to be mixing your div and form tags in the description above - which makes it difficult for me to understand what kind of problem you have experienced.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
OK, look at this URL which validates 100% via HTML Tidy validator, through Netscape Navigator.


Here is the full source code for this example.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Test for wrap issue in Firefox</TITLE>
<link href="test-wrap.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<center>
<!-- End drop down menu code -->
<!-- End top menu -->
<table border="0" cellspacing="0" cellpadding="0" class="t874">
	<tr>
		<td>
			<div class="offer1">
				<p >
				<strong>Description</strong>
				<br /><br />
				qwhdfqgfkjsadgiadgf;aweurgdfffffffffffffffffddskjgfk;skkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss				<br />
				</p>
			</div>
		</td>
</table>
</center>
</BODY>
</HTML>

The stylesheet test-wrap.css is:

Code: 
div.offer1{
   overflow: auto;
	width: 874px;
	border: 1px solid #DDDDDD;
	margin-top: 10px;
	background: #F4F3EE !important;
	display: table !important;
}
table.t874{
	width: 874px;
	/*margin: 0px 63px 0px 63px !important;*/
}
table.t874 td{
	border: 0px;
	padding: 0px;
	line-height: 16px;
	font-size: 11px !important;
}


Compare the results in Firefox with IE. IE displays a horizontal and vertical scrollbar, ensuring that the div area presents the background area always the same size.

If you look in FF, you will see it just continuously scrolls to tbe right.

I will work on getting an example for the textarea issue too.
 
Upvote 0 Downvote
jwhite68, I actually agree with you that Firefox could get a support for the proposed CSS3 property word-wrap. They do support some of the future properties, so why not this one?

I however disagree with you on the 'flakiness' of FF. True, it won't wrap in the presented examples, because you have no spaces in the string. But how often are you presented with long strings of text without any spaces? And even more importantly, how often are you expected to read that long text? One could say that posting a long filename could make for a long string of text without any spaces, but I will argue that there is no need for the user to see that name. If you gave it a friendlier name, you would not lose anything. And if nothing else, you could truncate the long string at the point where it gets too long and denote somehow that you cut it at that point (with three dots or something).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
jwhite68

Your page tentatively passed validation, but it is also true that it does not have a complete and valid doctype. So, not so good.

Second, when you actually have a production website that needs to display:
Website said:
qwhdfqgfkjsadgiadgf;aweurgdfffffffffffffffffddskjgfk;skkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkksssssssssssssssssssssssssssssssssssssssss [snip]
Click to expand...
we will deal with your problem. But I will bet that you will never encounter such a text for your website and when there are actual spaces in your text, you will have no problem with the code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
The text, of course, isnt true production test - but could quite easily be a particularly long URL that I allow someone to post on my site. I just entered a long string of text instead (testing needs to be quicker, and not always time to present perfect text).

The second problem with the textarea can be seen on Enter text continuously in the Description box, in IE, then in Firefox. IE behaves perfectly. Firefox doesnt.
It may be that Firefox works this way by design, which just implies poor design.

I'm not normally a big advocate of Microsoft products, but when it comes to the behaviour one would expect for presenting information on a web page, IE is without doubt far superior in its default decisions.
Anyway, I dont want to enter the debate about whos best - I just want to see if I understand the limitations of this issue correctly, when trying to work with Firefox.

Code for textarea:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Textarea text wrap issue in Firefox</TITLE>
			<div id="desc">
					<table border="0" cellspacing="0">
						<tr>
							<td style="text-align:right !important"><span>Description</span></td>
							<td colspan="5" >
								<textarea name="text" rows="10" style="width:385px" ></textarea>
							</td>
						</tr>
					</table>
				</div>
</BODY>
</HTML>
 
Upvote 0 Downvote
Well... if you hadn't changed the display property you would have been fine. Comment out the folllwing line and it continues to behave as described in IE:
Code: 
display: table !important;

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Thanks Jeff. That addresses the first problem.
I dont think the same fix applies to the second one with the textarea though. I suspect that one just works this way in Firefox?
 
Upvote 0 Downvote
w3 said:
17.7 The TEXTAREA element

cols = number [CN]

This attribute specifies the visible width in average character widths. Users should be able to enter longer lines than this, so user agents should provide some means to scroll through the contents of the control when the contents extend beyond the visible area. User agents may wrap visible text lines to keep long lines visible without the need for scrolling.
Click to expand...
It looks to me as though a default behaviour hasn't specifically been set and so neither browser is doing anything wrong. They both have their own implementations of what should happen and it may be something you just have to live with. Personally, I don't see many, if any, cases where this actually happens as most textareas are generally wide enough to cope with their longest string.

Bill Gates 2 Makers of firefox 0.
Click to expand...
It always amazes me how many people blame standards compliant browsers when their code doesn't work as it does in IE. Have you ever thought it could be incorrect HTML/CSS and/or IE that is the problem? Have a look at to change the score you posted.





____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
In the case of the non wrapping textarea, it is obvious that IE and Firefox have different default behaviour.
ca8msm said:
...a default behaviour hasn't specifically been set and so neither browser is doing anything wrong. They both have their own implementations of what should happen...
Click to expand...
One thing that is clear, though, is that it's not possible to make Firefox behave the same as IE in this instance. I agree that it's a personal preference (or a design preference for the implementor) - and I would be annoyed if I was tasked with delivering that kind of behaviour in Firefox and stumbled across this limitation.

It *could* be addressed via javascript by inserting a hard break every XX characters (assuming no space has been hit). This would be difficult to get "pixel perfect" due to different character widths. I wouldn't bother with this unless you had a lot of time on your hands... and it was really really important to you [smile]

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Vragabond said:
Second, when you actually have a production website that needs to display:

Quote (Website):

qwhdfqgfkjsadgiadgf;aweurgdfffffffffffffffffddskjgfk;skkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkksssssssssssssssssssssssssssssssssssssssss [snip]

we will deal with your problem. But I will bet that you will never encounter such a text for your website and when there are actual spaces in your text, you will have no problem with the code.
Click to expand...
Actually this kind of problem is very common in websites displaying genetic data. Protein and DNA information is always displayed as big long stings of letters with no spaces. Bioinformatics applications are becoming more and more prevalant on the web, and pretty much all of them have to deal with just this kind of data. It may not be a common problem for you .. but I assure you its a common problem for us :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
705
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
747
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top