<?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://www.myownpercept.com/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.myownpercept.com</link>
	<description>"Only in quiet waters things mirror themselves undistorted. Only in a quiet mind is adequate perception of the world."~Hans Margolius</description>
	<lastBuildDate>Mon, 02 Aug 2010 12:51:39 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>How to remove the blue border around an image link</title>
		<link>http://www.myownpercept.com/2009/04/remove-border-around-image/</link>
		<comments>http://www.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[Tips & Tricks]]></category>
		<category><![CDATA[Web development]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[snippet]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://www.myownpercept.com/?p=155</guid>
		<description><![CDATA[digg_url = 'http://www.myownpercept.com/2009/04/remove-border-around-image/';digg_title = 'How to remove the blue border around an image link';



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 [...]]]></description>
			<content:encoded><![CDATA[<div class="diggbutton"><script type="text/javascript">digg_url = 'http://www.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;"><script type="text/javascript"><!--
google_ad_client = "pub-0920621684521020";
google_ad_slot = "2952953575";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</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 />
<script type="text/javascript"><!--
google_ad_client = "pub-0920621684521020";
google_ad_slot = "1251664758";
google_ad_width = 336;
google_ad_height = 280;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
  </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>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.myownpercept.com/2009/04/remove-border-around-image/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
