word wrap not working in mozilla

[winpeace]

Word wrap is work in ÝE but doesn't work mozilla firefox

http://img85.imageshack.us/img85/4046/untitled1qs7.jpg

<pxt:tmpl name="previewForm">
<script language="javascript" src="components/com_combomax/templates/js.tpl"></script>
<style>
pre
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>

<div class="componentheading">Your comment so far:</div>

<!- Repeats for every comment -->

<div align="left" class="inputbox" style="white-space:-moz-pre-wrap;width:450px;height:1px;left:0">
<table border="0" width="80%" align="center">
<tr>
<td width="30%" valign="top"><b>Name:</b> {NAME}</td>
<td width="60%" rowspan="2" style="word-wrap:break-word;width:450px;height:1px;left:0" rowspan="2" valign="top"><b>Comment:</b><br />{COMMENT}</td>
</tr>

<tr>
<td>
<!-- Rating --> Rated Article: {RATINGIMAGE}<br />
<!-- IP --> <img style="cursor: help;" src="{LIVESITE}/components/com_combomax/images/ip.gif" alt="IP Logged as: {IP}" title="IP Logged as: {IP}"/>
<!-- URL --> <a href="{URL}" target="_blank"><img src="{LIVESITE}/components/com_combomax/images/home.gif" alt="HomePage: {URL}" title="HomePage: {URL}" border="0" /></a>
<!-- Browser --> <img style="cursor: help;" src="{LIVESITE}/components/com_combomax/images/browser.gif" alt="Browser: {BROWSER}" title="Browser: {BROWSER}" />
<!-- Date --> <img style="cursor: help;" src="{LIVESITE}/components/com_combomax/images/clock.png" alt="Dated: {DATE}" title="Dated: {DATE}" />
<!-- Report Comment --> <a href="{REPORTURL}" target="_SELF"><img src="{LIVESITE}/components/com_combomax/images/report.gif" alt="Yöneticiye Bildir" title="Report This Comment" border="0" /></a>
</td>

</tr>
</table>
</div>
<br />

<div class="componentheading">Make Changes:</div>

<form action="index.php" method="post" name="adminForm" id="adminForm" onsubmit="return validateForm( this,true,true,false,true,0)">

<center>
Your Name: <br />
<input type="text" name="name" style="width:300px;" class="inputbox" value="{NAME}" validate="blank" emsg="Please enter your name!"><br />
Your Email Address: <br />
<input type="text" name="email" style="width:300px;" class="inputbox" value="{EMAIL}" validate="email¦1" emsg="Please enter your email!"><br />
Your Homepage: <br />
<input type="text" name="url" style="width:300px;" class="inputbox" value="{URL}" validate="url¦http¦0¦0" emsg="Please enter your webpage address!"><br />
Rate this article:<br />
<span class="content_vote">
Poor
<input type="radio" alt="vote 1 star" name="user_rating" value="1"{VOTE1}/>
<input type="radio" alt="vote 2 star" name="user_rating" value="2"{VOTE2}/>
<input type="radio" alt="vote 3 star" name="user_rating" value="3"{VOTE3}/>
<input type="radio" alt="vote 4 star" name="user_rating" value="4"{VOTE4}/>
<input type="radio" alt="vote 5 star" name="user_rating" value="5"{VOTE5} />
Great
</span>
<br /><br />
Comment: <br />
<textarea name="comment" id="comment" cols="50" rows="7" class="inputbox" validate="blank" emsg="Please enter your comment!" onkeydown="javascript:sinirla(this)" onkeyup="javascript:sinirla(this)">{RAWCOMMENT}</textarea>
<input type="text" size="5" id="kalan" name="kalan" value="140">
<table border=0 cellspacing=3 cellpadding=0 class="smiletoolbar">
<tr>
<td onClick="javascript:emo('B)');" style="cursor:pointer;"><img src="components/com_combomax/images/bigsmile-smiley.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo(':(');" style="cursor:pointer;"><img src="components/com_combomax/images/blue-smiley.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo(':)');" style="cursor:pointer;"><img src="components/com_combomax/images/happy-smiley.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo(':laugh:');" style="cursor:pointer;"><img src="components/com_combomax/images/laughing-smiley.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo(':sad:');" style="cursor:pointer;"><img src="components/com_combomax/images/sad-smiley.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo(':q:');" style="cursor:pointer;"><img src="components/com_combomax/images/question.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo(':thumbup:');" style="cursor:pointer;"><img src="components/com_combomax/images/thumbsup.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo(':thumbdown:');" style="cursor:pointer;"><img src="components/com_combomax/images/thumbsdown.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo(':clown:');" style="cursor:pointer;"><img src="components/com_combomax/images/clown.gif" width="15" height="15" alt="" border="0"></td>
<td onClick="javascript:emo('');" style="cursor:pointer;"><strong>BOLD</strong></td>
<td onClick="javascript:emo('

');" style="cursor:pointer;">"QUOTE"</td>
<td onClick="javascript:emo(' ');" style="cursor:pointer;"><U>UNDERLINE</U></td>
</tr>
</table>
<input type="button" name="preview" value="Preview Changes" class="button" onClick="javascript:document.adminForm.task.value='preview';document.adminForm.submit();" />
</center>
<br />
<div class="componentheading">Subscribe</div>
Do you want to receive an email when new comments are added to this article?
<br />
<select class="textarea" name="subscribe">
<option value="1">Yes - I want to receive emails when this article has new comments</option>
<option value="0">No thanks!</option>
</select>

<input type="hidden" name="option" value="com_combomax" />
<input type="hidden" name="task" value="save" />
<input type="hidden" name="contentid" value="{CONTENTID}" />

<div align="right">
<input type="submit" class="button" value="Submit Comment" />
</div>

</form>

</pxt:tmpl>

[boxxertrumps]

?
what have you tried so far?
Do you want index.php to automatically put a <br />
after a certain amount of characters? if so, post
index.php, or you could make the container of the
text a fixed size. and <p></p> usually wraps the
text automatically....

[winpeace]

I don't understand you

[Acey99]

try this:


<style>
pre
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
width:600px; /* NEW LINE */
}
</style>

[mwinter]

You need to break the long run of text apart, either when storing it, or when displaying the comment. In PHP, the wordwrap (http://uk.php.net/wordwrap) function can be used for this. A browser won't usually wrap text until it encounters whitespace (or similar) characters, so these characters need to be introduced artificially if text is too long.

I have no idea why that pre rule even exists in your style sheet: you have no pre elements within the document. Remove it.

Mike

[winpeace]

I remove pre.But it doesn't work.I broke my brain

[ak7861]

Yeah, i gave up on this one as well. I used a text area form instead.

[mwinter]

I remove pre.But it doesn't work.

I didn't say that it would.

If a user enters a "word" with 100 characters, and that "word" is too long to be shown without a scrollbar, then the only reasonable solution is to break that "word" apart into two or more smaller "words". How you do that depends on what you are using to generate these documents - PHP, for example.

Mike