Results 1 to 8 of 8

Thread: word wrap not working in mozilla

  1. #1
    Join Date
    Nov 2006
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question word wrap not working in mozilla

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


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

  2. #2
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    ?
    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....
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  3. #3
    Join Date
    Nov 2006
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I don't understand you

  4. #4
    Join Date
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You need to break the long run of text apart, either when storing it, or when displaying the comment. In PHP, the 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

  6. #6
    Join Date
    Nov 2006
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by winpeace View Post
    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

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
  •