CSS Overflow Firefox issue

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.

Answer 2

Try: overflow: visible.

Answer 3

There must be more to the story than you are showing here. I used the CSS provided and I am seeing the same behavior in both Internet Explorer and Firefox. The page is rendered 960 pixels wide and when the browser width is less than this, a horizontal scroll bar is rendered.

If you specify a width on an element, the browser is not going to render it less than this value. If you remove the width declaration from your example, the element will only render as wide as it needs to.

If this is not the answer you are looking for, please provide more code to give us the whole picture.

Answer 4

Add word-wrap: break-word; to your #content-text