Firefox CSS Overflow Error
I am trying to write CSS where when the user writes text and overflows it, instead of having a scrollbar or hiding it, it just crashes like in a regular 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 does indeed do 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 be sure someone helped, but no luck so far and I honestly have no idea why this is happening in Firefox = / do any of you know?
Update: I tried with overflow: visible; but I just get overflow ... well visible, but still it doesn't wrap around. and ONLY in Firefox so far. = /
Update: The only thing that might affect the fact that I have different CSS code and the first one contains:
#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 HTML that uses this:
<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>
source to share
So your css is probably fine. For example, in my page I have css 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 like this:
<textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>
It works great. But make sure when you test it, you test it with something like Lorem Ipsum, words with spaces and more than one long line like "aaaaaaaaaaaaaaaaaaaaaaa" which will probably force the scrollbar. Also check html and css for validation .
source to share
There must be more in the story than shown here. I used the provided CSS and I observe the same behavior in both Internet Explorer and Firefox. The page is 960px wide, and the browser width is smaller than the horizontal scrollbar.
If you specify the width of an element, the browser will not render it less than this value. If you remove the width declaration from your example, the element will only appear as wide as needed.
If this is not the answer you are looking for, please provide more code to give us the full picture.
source to share