Link to home
Start Free TrialLog in
Avatar of Jules Webb
Jules WebbFlag for United States of America

asked on

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

Avatar of JF0
JF0
Flag of United States of America image

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>
Avatar of Jules Webb

ASKER

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

This may help huge:
http://www.campaignmonitor.com/css/ 
Also, try adding border:0px; to your inline style for the image not the link.
Avatar of Chris Stanyon
Try adding the following to your CSS


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

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of remorina
remorina
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial

@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.
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
Thanks for sending me in the right direction:-)