Question

I am trying to write a CSS in which when the user writes text and it overflows instead of having a scrollbar or hiding, it just goes down like in a normal Word Document or so. I have this code:

#content-text {     width: 960px;     padding-left: 10px;     padding-right:10px;     text-align: left;     color:#000;     height:100%;     margin-left: 25px;     margin-right:25px; } 

The odd thing, is that while this code actually does what I want in IE in Firefox it overflows and becomes a scrollbar. I’ve tried overflow:auto; overflow:hidden; and overflow:inherit; just to see if any helped but no luck so far, and I honestly have no idea of why is this happening in Firefox, =/ would any of you know?

---

Update: I tried with overflow:visible; but I just get the overflow…well visible but still it doesn’t wraps. and ONLY in Firefox so far. =/

---

Update: The only other thing that could be affecting is that I have another CSS code and the first is contained:

#content-title{     background-color: transparent;     background-image: url(../img/content-title-body.png);     background-repeat: repeat-y;     background-attachment: scroll;     background-x-position: 0%;     background-y-position: 0%;     height:auto;     position:absolute;     z-index :100; /* ensure the content-title is on top of navigation area */     width:1026px;/*1050px*/     margin: 160px 100px 5px 100px;     overflow: visible;     top: 55px; } 

and the HTML that uses this is:

<div id='content-title'>                 <div id='content-text'>             Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!          </div> </div> 

Answer 1

So your css is probably fine. For example on my page I have css is like this:

 textarea.input_field2 {     margin: 10px 10px 10px 0px;     width: 440px;     height: 150px;     background:#696969;      color: white;     border: none;     font-size: 14px;     text-align: left;     vertical-align: middle;     } 

Then in the body I call it up like this:

 <textarea rows='9' cols='9' class='input_field2' name='user_comments'></textarea> 

It works fine. But make sure when you test it you test it with something like Lorem Ipsum, words with spaces and not one long string like ‘aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa’ cause that will force a scroll bar probably. Also check your html and css for validation.