Jules Webb
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
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>
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
......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>
This may help huge:
http://www.campaignmonitor.com/css/
Also, try adding border:0px; to your inline style for the image not the link.
http://www.campaignmonitor.com/css/
Also, try adding border:0px; to your inline style for the image not the link.
Try adding the following to your CSS
#Masthead a img {
border: none !important;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@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
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/
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
ASKER
Thanks for sending me in the right direction:-)
You will probably need something like this:
a.logo img {border:none;}
<a href="http://www.massagecenters.com" style="text-decoration:non