Hi. I have discovered that if you fix the height and/or width of a textarea box, you do not get autoscrolling (in IE you do).
My style is:
textarea {
width: 500px;
height: 35px;
FONT-SIZE: 10pt;
FONT-FAMILY: Arial
}
Is there a way to force Mozilla to obey the width and height specs AND autoscroll when necessary?
Best,
TerryWorks fine for me in FF.Works fine for me as well. If it helps any, you might want to take a look at the overflow (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow</a><!-- m -->) property.Thanks Ray,
but I still have the problem.
Here is my html:
************************
<html>
<head>
<title>demo</title>
</head>
<body>
<td width="100%">
<div align="center">
<center>
<table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" cellpadding="10" id="A1">
<tr>
<td width="100%" bgcolor="#FFFFFF">Some text.<br>
<br>
<textarea></textarea>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
*********************
The above works OK in IE and Firefox. Both show vertical scrollbars when the text overflows.
But when I link to my css, I get no scroll in FF.
My complete style at the moment is:
*********************
body {
margin: 0;
}
td{
font: 10pt arial;
}
textarea {
width: 500px;
height: 35px;
FONT-SIZE: 10pt;
FONT-FAMILY: Arial
}
*********************
If I get rid of the width and height, it works in both.
TerrySorry but I just can't make it fail.Must be some dumbfool thing I've done.
But here is a demo online at:
<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea.html">http://aapress.com.au/demo/textarea.html</a><!-- m -->
Beats me.
TerryJust have height or width not both.
Scroll is still possible with both defined using the mouse or keyboard.
The textarea must have the attributes cols and rows to validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->)
font-size should not be defined in pt in screen css <!-- m --><a class="postlink" href="http://www.w3.org/QA/Tips/font-sizeRight">http://www.w3.org/QA/Tips/font-sizeRight</a><!-- m -->.
Wel, I fiddled around with it and by trial and error it's the "px" instead of "pt" that makes all the difference.
It still works in both browsers without ROWS and COLS defined, and with both width and height defined - the inclusion of which are both essential for my purpose. I don't see how defining ROWS and COLS helps if you are going to override them with width and height, but then trying to win an argument against Firefox is pointless these days.
If everything worked like IE I'd have my weekends back. (Yeah,I know, I should be thankful for FF following all the rules. As you say, resistance is useless...)
Thanks for your help.
TerryAdding overflow:auto; to the css will solve the issue as MstrBob mentioned.
The addition of cols and rows is required IF you wish to validate.
It really only works for me if I break rules:
(omitting the ROWS and COLS which make no difference and, besides, I have no wish to validate...)
The first link is my original demo, with a mix of "px" and "pt".
Demo 1 (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea1.html">http://aapress.com.au/demo/textarea1.html</a><!-- m -->)
...doesn't work in FF.
This works:
Demo 2 (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea2.html">http://aapress.com.au/demo/textarea2.html</a><!-- m -->)
...but only because I use "pt" throughout.
The third demo:
Demo3 (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea3.html">http://aapress.com.au/demo/textarea3.html</a><!-- m -->)
...uses px throughout and adds overflow: auto;.
But doesn't work in FF.
Can I break the rules and use points? It's not likely to end up on Macs?
But how does that overflow fix anything?
I know it's all my fault somewhere...
Best,
TerryIf the units are relative, pt % or em, the scrollbar will appear.
pt is used for printed text
% or em for screen text (use em)
The overflow declaration does not work as expected in form controls . overflow can only be applied to block-level elements which textarea is not.The overflow declaration does not work as expected in form controls . overflow can only be applied to block-level elements which textarea is not. [/B]Ode to display: block; eh?display: block; has no effectThis is quite difficult.
I now realise, it has something to do with the pt size stipulated in the CSS. (Forget px and em - makes no difference. em is fonts on steroids. You couldn't possibly control these boxes with ems; At least I can't.)
25pt - it doesn't work in FF
35pt - it works in FF
Of course, IE produces beautiful boxes with vertical scrollbars nicely grayed out until ready. But I like FF. Really!
New demo:
Demo 2 revisited (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea2.html">http://aapress.com.au/demo/textarea2.html</a><!-- m -->)
There must surely be something that DOES work in textarea for FF. Or maybe not!
Anyway, I much appreciate all your help.
Terry.textarea {
width: 55em;
height: 2.8em;
font:0.9em;
}
The height to font ratio must be > 3:1 for scrollbars to appear in FFThat's strange because I can get it to work perfectly (scrollbars and everything) with the following:
<html>
<head>
<style>
TEXTAREA {
width:720px;
height:500px;
font:10pt Arial;
}
</style>
</head>
<body>
<textarea></textarea>
</body>
</html>The problem occurs with small height values.I think it's because the browser doesn't have enough room to draw the scrollbars. However, I got it to work with "height:40px".I have proved to my satisfaction that vertical scrollbars will not show in FF below 36px.
/* vertical scrollbars show in both IE and FF */
width: 500px ;
height: 36px ;
/* vertical scrollbars do not show in FF */
width: 500px ;
height: 35px ;
It also seems to have no bearing on font size at all.
Interestingly, the vertical scrollbars show at very small heights in IE.
For a complete (and fun!) demo:
final demo (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea4.html">http://aapress.com.au/demo/textarea4.html</a><!-- m -->)
I think we can safely conclude that IE is for Lilliputians, and FF is for Brobdingnags.
Terry
My style is:
textarea {
width: 500px;
height: 35px;
FONT-SIZE: 10pt;
FONT-FAMILY: Arial
}
Is there a way to force Mozilla to obey the width and height specs AND autoscroll when necessary?
Best,
TerryWorks fine for me in FF.Works fine for me as well. If it helps any, you might want to take a look at the overflow (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow</a><!-- m -->) property.Thanks Ray,
but I still have the problem.
Here is my html:
************************
<html>
<head>
<title>demo</title>
</head>
<body>
<td width="100%">
<div align="center">
<center>
<table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" cellpadding="10" id="A1">
<tr>
<td width="100%" bgcolor="#FFFFFF">Some text.<br>
<br>
<textarea></textarea>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
*********************
The above works OK in IE and Firefox. Both show vertical scrollbars when the text overflows.
But when I link to my css, I get no scroll in FF.
My complete style at the moment is:
*********************
body {
margin: 0;
}
td{
font: 10pt arial;
}
textarea {
width: 500px;
height: 35px;
FONT-SIZE: 10pt;
FONT-FAMILY: Arial
}
*********************
If I get rid of the width and height, it works in both.
TerrySorry but I just can't make it fail.Must be some dumbfool thing I've done.
But here is a demo online at:
<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea.html">http://aapress.com.au/demo/textarea.html</a><!-- m -->
Beats me.
TerryJust have height or width not both.
Scroll is still possible with both defined using the mouse or keyboard.
The textarea must have the attributes cols and rows to validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->)
font-size should not be defined in pt in screen css <!-- m --><a class="postlink" href="http://www.w3.org/QA/Tips/font-sizeRight">http://www.w3.org/QA/Tips/font-sizeRight</a><!-- m -->.
Wel, I fiddled around with it and by trial and error it's the "px" instead of "pt" that makes all the difference.
It still works in both browsers without ROWS and COLS defined, and with both width and height defined - the inclusion of which are both essential for my purpose. I don't see how defining ROWS and COLS helps if you are going to override them with width and height, but then trying to win an argument against Firefox is pointless these days.
If everything worked like IE I'd have my weekends back. (Yeah,I know, I should be thankful for FF following all the rules. As you say, resistance is useless...)
Thanks for your help.
TerryAdding overflow:auto; to the css will solve the issue as MstrBob mentioned.
The addition of cols and rows is required IF you wish to validate.
It really only works for me if I break rules:(omitting the ROWS and COLS which make no difference and, besides, I have no wish to validate...)
The first link is my original demo, with a mix of "px" and "pt".
Demo 1 (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea1.html">http://aapress.com.au/demo/textarea1.html</a><!-- m -->)
...doesn't work in FF.
This works:
Demo 2 (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea2.html">http://aapress.com.au/demo/textarea2.html</a><!-- m -->)
...but only because I use "pt" throughout.
The third demo:
Demo3 (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea3.html">http://aapress.com.au/demo/textarea3.html</a><!-- m -->)
...uses px throughout and adds overflow: auto;.
But doesn't work in FF.
Can I break the rules and use points? It's not likely to end up on Macs?
But how does that overflow fix anything?
I know it's all my fault somewhere...
Best,
TerryIf the units are relative, pt % or em, the scrollbar will appear.
pt is used for printed text
% or em for screen text (use em)
The overflow declaration does not work as expected in form controls . overflow can only be applied to block-level elements which textarea is not.The overflow declaration does not work as expected in form controls . overflow can only be applied to block-level elements which textarea is not. [/B]Ode to display: block; eh?display: block; has no effectThis is quite difficult.
I now realise, it has something to do with the pt size stipulated in the CSS. (Forget px and em - makes no difference. em is fonts on steroids. You couldn't possibly control these boxes with ems; At least I can't.)
25pt - it doesn't work in FF
35pt - it works in FF
Of course, IE produces beautiful boxes with vertical scrollbars nicely grayed out until ready. But I like FF. Really!
New demo:
Demo 2 revisited (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea2.html">http://aapress.com.au/demo/textarea2.html</a><!-- m -->)
There must surely be something that DOES work in textarea for FF. Or maybe not!
Anyway, I much appreciate all your help.
Terry.textarea {
width: 55em;
height: 2.8em;
font:0.9em;
}
The height to font ratio must be > 3:1 for scrollbars to appear in FFThat's strange because I can get it to work perfectly (scrollbars and everything) with the following:
<html>
<head>
<style>
TEXTAREA {
width:720px;
height:500px;
font:10pt Arial;
}
</style>
</head>
<body>
<textarea></textarea>
</body>
</html>The problem occurs with small height values.I think it's because the browser doesn't have enough room to draw the scrollbars. However, I got it to work with "height:40px".I have proved to my satisfaction that vertical scrollbars will not show in FF below 36px.
/* vertical scrollbars show in both IE and FF */
width: 500px ;
height: 36px ;
/* vertical scrollbars do not show in FF */
width: 500px ;
height: 35px ;
It also seems to have no bearing on font size at all.
Interestingly, the vertical scrollbars show at very small heights in IE.
For a complete (and fun!) demo:
final demo (<!-- m --><a class="postlink" href="http://aapress.com.au/demo/textarea4.html">http://aapress.com.au/demo/textarea4.html</a><!-- m -->)
I think we can safely conclude that IE is for Lilliputians, and FF is for Brobdingnags.
Terry