<?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>Advanced CSS Design Resources - last-child.com &#187; border</title>
	<atom:link href="http://www.last-child.com/category/css/border/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.last-child.com</link>
	<description>CSS Toys for Professional Web Developers</description>
	<lastBuildDate>Mon, 19 Dec 2011 18:30:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>Control form button width in IE6</title>
		<link>http://www.last-child.com/control-form-button-width-in-ie6/</link>
		<comments>http://www.last-child.com/control-form-button-width-in-ie6/#comments</comments>
		<pubDate>Wed, 19 Apr 2006 00:03:59 +0000</pubDate>
		<dc:creator>Ted</dc:creator>
				<category><![CDATA[background]]></category>
		<category><![CDATA[border]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Form Button]]></category>
		<category><![CDATA[overflow]]></category>
		<category><![CDATA[padding]]></category>
		<category><![CDATA[Quick Tips]]></category>

		<guid isPermaLink="false">http://www.last-child.com/control-form-button-width-in-ie6/</guid>
		<description><![CDATA[I&#8217;m working on a project with shiny, happy submit buttons all over the place. To offer more control over the presentation, we are using the form button element and inserting images inside the button tags. ... Now, you need to over-ride some pretty ugly default presentation styles: form button {padding:0; margin:0; border:none; background:0;} This works [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m working on a project with shiny, happy submit buttons all over the place. To offer more control over the presentation, we are using the form button element and inserting images inside the button tags.<br />
<code lang="HTML"></p>
<form>
...<br />
<button type="submit" name="submit" id="submit"><br />
<img src="submit.png" alt="submit" /><br />
</button><br />
</form>
<p></code></p>
<p>Now, you need to over-ride some pretty ugly default presentation styles:</p>
<p><code lang="CSS"><br />
form button {padding:0; margin:0; border:none; background:0;}<br />
</code></p>
<p>This works fine and dandy until you get to IE6. The buttons tend to get really large with IE. So, you need to re-define the width of the buttons and apply overflow:visible. Here&#8217;s the entry in your IE6.css file:<br />
<code lang="CSS"><br />
form button {width:1%; overflow:visible;}<br />
</code></p>
<h3>Resources</h3>
<p>Special thanks to <a href="http://jehiah.com/archive/button-width-in-ie">Jehiah Czebotar</a> for saving me a bunch of time trying to figure this out.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.last-child.com/control-form-button-width-in-ie6/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

