<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MoonKat Creations &#187; textarea</title>
	<atom:link href="http://www.moonkatcreations.com/tag/textarea/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.moonkatcreations.com</link>
	<description>Web design, front-end development</description>
	<lastBuildDate>Thu, 12 May 2011 18:52:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>Textarea Scrolling in Firefox</title>
		<link>http://www.moonkatcreations.com/web-design/html/textarea-scrolling-in-firefox/</link>
		<comments>http://www.moonkatcreations.com/web-design/html/textarea-scrolling-in-firefox/#comments</comments>
		<pubDate>Mon, 15 Jun 2009 20:19:08 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[browser bugs]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[textarea]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://blog.moonkatcreations.com/?p=3</guid>
		<description><![CDATA[1. Firefox will put a vertical AND horizontal scrollbar on a textarea by default. To get rid of the horizontal scrolling, use this: overflow-y: scroll; (or overflow-y: auto if you don&#8217;t want your scrollbar to appear if it&#8217;s not needed) &#8230; <a href="http://www.moonkatcreations.com/web-design/html/textarea-scrolling-in-firefox/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>1. Firefox will put a vertical AND horizontal scrollbar on a textarea by default.</p>
<p>To get rid of the horizontal scrolling, use this:</p>
<p><strong>overflow-y: scroll; </strong>(or<strong> overflow-y: auto </strong>if you don&#8217;t want your scrollbar to appear if it&#8217;s not needed)<br />
<strong> overflow-x: hidden;</strong></p>
<p>Not this, as I&#8217;ve seen suggested on various blogs:</p>
<p><strong> overflow: scroll;<br />
overflow-y: scroll;<br />
overflow-x: hidden;<br />
overflow:-moz-scrollbars-vertical;</strong></p>
<p>I&#8217;m not sure what the advantage is to the extra styles, as I&#8217;ve seen no difference in rendering.</p>
<p>2. Firefox will not wrap a single word. Use text with spacing for testing. I&#8217;ve made the mistake of testing with one long string of keyboard gibberish, and wondered why I could only get horizontal scrolling. Also, if you have your x-scrolling disabled, the string of characters that exceeds the width of the text box will be cut off from view.</p>
<div id="attachment_4" class="wp-caption alignnone" style="width: 201px"><img class="size-full wp-image-4" title="lipsum" src="http://blog.moonkatcreations.com/wp-content/uploads/blog.moonkatcreations.com/2009/06/lipsum.png" alt="Spaces are good." width="191" height="81" /><p class="wp-caption-text">Spaces are good</p></div>
<div id="attachment_5" class="wp-caption alignnone" style="width: 201px"><img class="size-full wp-image-5" title="no_spaces" src="http://blog.moonkatcreations.com/wp-content/uploads/blog.moonkatcreations.com/2009/06/no_spaces.png" alt="Single string is bad" width="191" height="81" /><p class="wp-caption-text">Single string is bad</p></div>
<p>3. Be sure to set the height of the textarea great enough for the browser to render a scroll icon. If the textarea isn&#8217;t tall enough, all you&#8217;ll get is a gray box on the right hand side, which is still functional, but not intuitive.</p>
<div id="attachment_6" class="wp-caption alignnone" style="width: 201px"><img class="size-full wp-image-6" title="lipsum1" src="http://blog.moonkatcreations.com/wp-content/uploads/blog.moonkatcreations.com/2009/06/lipsum1.png" alt="With a specified height" width="191" height="81" /><p class="wp-caption-text">With a specified height</p></div>
<div id="attachment_7" class="wp-caption alignnone" style="width: 198px"><img class="size-full wp-image-7" title="no_set_height" src="http://blog.moonkatcreations.com/wp-content/uploads/blog.moonkatcreations.com/2009/06/no_set_height.png" alt="Without a specified height" width="188" height="45" /><p class="wp-caption-text">Without a specified height</p></div>
<p><span id="more-6"></span><!--more--></p>
]]></content:encoded>
			<wfw:commentRss>http://www.moonkatcreations.com/web-design/html/textarea-scrolling-in-firefox/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

