Problems getting gmail to respond to border none on an image link

Hello

I've set up an email receipt that automatically goes out when items are purchased.

Within the email I made the logo image a link back to the site, unfortunately I can' seem to get gmail to remove the blue border from around the image.  Looks fine in yahoo and outlook.  

^^store_logo^^ produces the site logo.  

If anyone is interested I can send an email so you can view the code within firebug.

Thanks ~Jules
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">
	
	/* common
	--------------------------------------------------*/
	
	body {
		margin: 0px;
		padding: 0px;
		color: #666;
		background: #fff;		
	}
	p { margin-bottom:1.30em; line-height:1.5em; }
	* #BodyImposter {
		color: #666;
		background: #fff;
		width: 100%;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}
	* #BodyImposter li,
	* #BodyImposter p,
	* #BodyImposter td {
		font-size: 12px;
		line-height: 1.5em;
		font-family: Helvetica, Arial, sans-serif;
		text-align: justify;
	}
	* #BodyImposter p,
	* #BodyImposter ol,
	* #BodyImposter ul {
		margin: 0em 0em 1em 0em;
	}
	* #BodyImposter img {
		border: 0px;
	}
	
	 #BodyImposter a:link img, #BodyImposter a:visited img { style="text-decoration:none; border:none;" }
	* #Primary img {
		float: right;
		margin: 5px 0px 15px 15px;
		border: 1px solid #d3d3d3;
		padding: 6px;
	}
	* #BodyImposter small {
		font-size: 10px;
		line-height: 1.3em;
	}
	* #BodyImposter ol {
		padding-left: 1em;
	}
	* #Primary ul {
		padding-left: 1em;
		padding-right: 1em;
	}
	* #BodyImposter ol li {
		margin: 0px;
		padding: 0px;
	}
	* #BodyImposter ul li {
		padding: 0px 0px 0px 8px;
		margin: 0px;
		list-style: square outside;
	}
	
	/* links
	--------------------------------------------------*/
	
	* #BodyImposter a {
		text-decoration: underline;
	}
	* #Primary a:link,
	* #Primary a:visited {
		color: #000;
		background: #fff;
	}
	* #Helpful a:link,
	* #Helpful a:visited,
	* #Legal a:link,
	* #Legal a:visited {
		color: #666;
		background: transparent;
	}
	* #BodyImposter a:hover {
		text-decoration: none;
	}
	* #BodyImposter a:active {
		color: #000;
		background: #fff;
		text-decoration: none;
	}
	
	/* heads
	--------------------------------------------------*/
	
	* #BodyImposter h1,
	* #BodyImposter h2 {
		color: #945620;
		background: #fff;
		font-family: Georgia, Palatino, serif;
		font-weight: normal;
		line-height: normal;
		margin: 0em 0em 0.5em 0em;
		padding: 0px;
		text-align: left;
	}
	* #Masthead h1 {
		font-size: 27px;
		color: #0D3282;		
		margin: 0px;
	}
	* #Primary h2,
	* #Primary p.fc_heading {
		color: #945620;
		font-size: 22px;
		font-family: Georgia, Palatino, serif;
		padding-top: 35px;
		text-align: left;
	}
	
	/* boxes
	--------------------------------------------------*/
	
	* #Box {
		color: #666;
		background: #fff;
		border: 1px solid #d3d3d3;
		margin: 0px auto;
	}
	* #Content {
		border: 1px solid #d3d3d3;
	}
	* #Helpful,
	* #Legal {
		margin: 0px auto;
	}
	* #Helpful p,
	* #Legal p {
		margin: 0px;
		padding: 0px;
		text-align: center;
	}
	* #Masthead {
		color: #0D3282;		
	}
	* #Masthead h1,
	* #Masthead p {
		text-align: left;
	}
	* #Masthead p {
		font-size: 14px;
		margin: 0px;
	}
	* #Masthead p #Date {
		float: right;
	}
	* #Masthead {
		width: 100%;
		text-align: center;
	}
	/*
	The asterisks preceding every selector ensure styles are rendered in Dot Mac.
	The inline styles in headlines are for Outlook 2007.
	*/
	
	#fc_purchasing_information_billing_address,
	#fc_purchasing_information_shipping_address {
		width:50%;
		float:left;
	}
	p.fc_heading {
		margin:10px 0px 0px;
		border-top:2px solid #ccc;
	}
	
	#fc_purchasing_information_email span.fc_item_label,
	#fc_purchasing_information_billing_address span.fc_item_label,
	#fc_purchasing_information_shipping_address span.fc_item_label {
		padding:4px;
		background:#fff;
		color:#000;
	}
	#fc_cart_table {
		width:100%;
		margin-bottom:20px;
	}
	
	#fc_cart_table caption { margin:20px 0; font-size:15px; font-weight:bold;  }
	
	#fc_cart_head th {
		background:#fff !important;
		color:#000;
	}
	#fc_cart_foot_total_row td {
		background:#eee !important;
	}
	
	#cg_msg_content #fc_cart_head th, #fc_cart_head_item, #fc_cart_head_quantity, #fc_cart_head_price { background:none repeat scroll 0 0 #CCCCCC !important; color:#000000; }
		
</style>
</head>

<body>
<div id="BodyImposter" style="color: #666; background-color: #fff;">
	<table id="Box" cellspacing="0" cellpadding="15" width="580" style="color: #666; background-color: #fff;">
		<tr>

			<td>
				<table id="Masthead" cellspacing="0" cellpadding="20" width="580">
					<tr>
						<td width="170px" style="color: #0D3282; padding:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;">
                        <a href="http://www.massagecenters.com" style="text-decoration:none; border:none;">^^store_logo^^</a>					
                        </td>

					    <td  style="color: #0D3282;">
                          <h1 style="font-family:Trebuchet MS, Arial, Helvetica, sans-serif;"><a href="http://www.massagecenters.com" style="text-decoration:none; color:#0D3282;">^^store_name^^</a></h1>
						  					
                        </td>
					</tr>
				</table>
  <table id="Content" cellspacing="0" cellpadding="20" width="580" style="color: #666; background-color: #fff;">
					<tr valign="top">
						<td id="Primary" style="font-family: Helvetica, Arial, sans-serif;">
							
							
							<p style="font-size:12px; margin-bottom:1.30em; line-height:1.5em;">Thank you for shopping at ^^store_name^^. Please retain this receipt for your records.</p>
                            <p style="font-size:12px; margin-bottom:1.30em; line-height:1.5em;"> Your order #^^order_id^^ is being processed. To view your receipt online go to:</p>

							<p style="font-size:12px; margin-bottom:1.30em; line-height:1.5em;"> ^^receipt_url^^</p>
							
							
							

^^receipt^^

							
							<div style="float:none; clear:both;"></div>
							
							

^^cart^^

							
							
							
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<table id="Legal" cellspacing="0" cellpadding="15" width="610">

		<tr>
			<td style="font-family: Helvetica, Arial, sans-serif; text-align:center">
				<p><a href="http://www.massagecenters.com" style="text-decoration:none; color:#0D3282; text-align:center;">^^store_name^^</a></p>
			</td>
		</tr>
	</table>
</div>

</body>
</html>

Open in new window

LVL 2
Jules WebbFreelance Web DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JF0Commented:
It is strange that it works in other email viewers but border:none; should be a style for and 'img' tag, not an 'a' tag.

You will probably need something like this:

a.logo img {border:none;}

<a href="http://www.massagecenters.com" style="text-decoration:none;" class="logo">^^store_logo^^</a>
0
Jules WebbFreelance Web DeveloperAuthor Commented:
Within the gmail interface the code renders without the class="logo".  
......So I figured I got it I'll add: table a:link img, table a:visited img {border:none; text-decoration:none;}

NOPE nodda chance.  

Within firebug I can see that there is text-decoration:none; applied to the the img element, but if I add border:none; it doesn't make a difference.

I know I could just put a direct image link and it would probably work, but then when some non-tech person down the line updates the logo withing the shopping cart interface they won't understand why it doesn't update the receipt image.

Do you have any other ideas?
Thanks! ~Jules


<td width="170px" style="color: #0D3282; padding:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;">
 <a href="http://www.massagecenters.com" style="text-decoration:none; border:none;" class="logo">^^store_logo^^</a>					
<td>

Open in new window

0
LZ1Commented:
This may help huge:
http://www.campaignmonitor.com/css/ 
Also, try adding border:0px; to your inline style for the image not the link.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Chris StanyonWebDevCommented:
Try adding the following to your CSS


#Masthead a img {
	border: none !important;
}

Open in new window

0
remorinaCommented:
Hi JulesWebb,
Most of your css wouldn't be recognised by gmail since it deprecates the head <style> and class="" attributes, it will only retain the inline style within the tags.

So best practice when sending an EDM is to use table layout and inline styles.

While for the image border, assign the border:none to the image itself not the parent anchor


<td width="170px" style="color: #0D3282; padding:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;"><a href="http://www.massagecenters.com" style="text-decoration:none;><img src="http://www.massagecenters.com/pics/logo-transparent.gif" style="border:none;" /></a></td>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
remorinaCommented:
I presume you're using osCommerce, have you tried editing the template to render the inline style within the ^^store_logo^^ ?

I think the best way is to check where the portion or your template that prints the ^^store_logo^^ statement and modify it to have the style="border:none;".

Try templates/default.php, with a clean install you should be able to locate around line 264 the below code

echo osc_link_object(osc_href_link(FILENAME_DEFAULT), osc_image(DIR_WS_IMAGES . 'store_logo.jpg', STORE_NAME), 'id="siteLogo"');

Try changing it to something like
echo osc_link_object(osc_href_link(FILENAME_DEFAULT), osc_image(DIR_WS_IMAGES . 'store_logo.jpg', STORE_NAME), 'id="siteLogo" style="border:none"');

And check if it works

0
Jules WebbFreelance Web DeveloperAuthor Commented:

@remorina - I'm actually using FoxyCart, and am in the process of finding out whether I can add a border:none from their end.  thanks for the insight, I'll keep you posted.
0
remorinaCommented:
You're welcome, it should be possible, you just need to locate the snippet that replaces the ^^store_logo^^

An easy way would be browsing the site, check the rendered logo using FireBug and look for the id, then use Advanced Find and Replace tool http://www.abacre.com/afr/ and search all the files within your site for something like id="....".
This method saved me a lot of time trying to track where a certain line of code is within hundreds of files.

Hope this helps
0
Jules WebbFreelance Web DeveloperAuthor Commented:
Thanks for sending me in the right direction:-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.