<?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>My Own Percept&#187; html</title>
	<atom:link href="http://myownpercept.com/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://myownpercept.com</link>
	<description>&#34;Only in quiet waters things mirror themselves undistorted. Only in a quiet mind is adequate perception of the world.&#34;~Hans Margolius</description>
	<lastBuildDate>Tue, 31 Jan 2012 13:16:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>How to remove the blue border around an image link</title>
		<link>http://myownpercept.com/2009/04/remove-border-around-image/</link>
		<comments>http://myownpercept.com/2009/04/remove-border-around-image/#comments</comments>
		<pubDate>Sun, 12 Apr 2009 17:34:22 +0000</pubDate>
		<dc:creator>Marouan OMEZZINE</dc:creator>
				<category><![CDATA[how-to]]></category>
		<category><![CDATA[snippet]]></category>
		<category><![CDATA[Tips & Tricks]]></category>
		<category><![CDATA[Web development]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://www.myownpercept.com/?p=155</guid>
		<description><![CDATA[[ad#only_in_post] You want to use an image as a link.However, a blue border appears around the image. 1 2 3 &#60;a href=&#34;http://www.myownpercept.com/&#34;&#62; &#60;img src=&#34;logo.png&#34; alt=&#34;&#34; /&#62; &#60;/a&#62; This border is meant to inform users that the image is a link. Well, it&#8217;s a link but this is ugly :s and may not fit your need. [...]]]></description>
			<content:encoded><![CDATA[<div class="diggbutton"><script type="text/javascript">digg_url = 'http://myownpercept.com/2009/04/remove-border-around-image/';digg_title = 'How to remove the blue border around an image link';</script><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div>
<p style="text-align: center;">[ad#only_in_post]</p>
<p>You want to use an image as a link.However, a blue border appears around the image.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.myownpercept.com/&quot;</span>&gt;</span>  
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;logo.png&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></td></tr></table></div>

<p>This border is meant to inform users that the image is a link. Well, it&#8217;s a link but this is ugly :s and may not fit your need.<br />
[ad#hire_me]  </p>
<h2>Solution</h2>
<ol>
<li>You simply have to add a border-style, set to none, as a style to your img tag

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.myownpercept.com/&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;border-style: none;&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;logo.png&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></td></tr></table></div>

</li>
<li>A cleaner way, that will pass the W3C validation, is by adding those lines to your CSS file :

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;">img <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">border-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</li>
<li>A dirty old way, but works,  is by adding border attribute to the img tag.

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.myownpercept.com/&quot;</span>&gt;</span>  
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;logo.png&quot;</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></td></tr></table></div>

</li>
]]></content:encoded>
			<wfw:commentRss>http://myownpercept.com/2009/04/remove-border-around-image/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

