Link formatting with internal links CSS

Question

Basic question here...trying to figure out how to format links with fonts and colors and make them clickable. I was able to get the fonts and colors to look the way I wanted them to when I used this code, but I wasn't able to make the clickable:

<table border="0" cellpadding="1" cellspacing="1" style="width:500px;">
<tbody>
    <tr>
        <td colspan="2" style="font-size: 12px; font-family: Arial, sans-serif color: #888888; text-align: center; background-color: rgb(245, 245, 245);"><a conversion="true" href="${1://SurveyURL}" style="font-family: Arial, sans-serif; color:#888888; text-decoration: underline" target="_blank">What do you think?</a></td>
    </tr>
    <tr>

But I can make the links clickable, but not get the formatting I want if I use the following code:

<table border="0" cellpadding="1" cellspacing="1" style="width:500px;">
<tbody>
    <tr>
        <td colspan="2" style="font-size: 12px; font-family: Arial, sans-serif color: #888888; text-align: center; background-color: rgb(245, 245, 245);"><span style="color:#888888;">${l://SurveyLink?d=What%20do%20you%20think?}</span></td>
    </tr>

What am I missing to get my formatting to work and also make the link clickable to the survey? (SurveyURL and SurveyLink actually use the same reference FYI) Thanks.

you should use js see this link [https://stackoverflow.com/questions/13071967/adding-an-onclick-function-to-go-to-url-in-javascript](https://stackoverflow.com/questions/13071967/adding-an-onclick-function-to-go-to-url-in-javascript) — Muneera_salah, May 07 '18 at 19:52
Possible duplicate of [Adding an onclick function to go to url in JavaScript?](https://stackoverflow.com/questions/13071967/adding-an-onclick-function-to-go-to-url-in-javascript) — arnt, May 08 '18 at 10:25

score 0 · Answer 1 · answered May 07 '18 at 19:53

The link is clickable, but you did forget a semicolon after font-family: Arial, sans-serif which means the rest of the styling didn't apply.

I'm not sure what the link is you're directing to (${1://SurveyURL}), but it is clickable for sure.

.link {
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: #888888;
  text-align: center;
  background-color: rgb(245, 245, 245);
}

a {
  font-family: Arial, sans-serif;
  color: #888888;
  text-decoration: underline;
}

<table border="0" cellpadding="1" cellspacing="1" style="width:500px;">
  <tbody>
    <tr>
      <td class="link" colspan="2">
        <a conversion="true" href="${1://SurveyURL}" target="_blank">What do you think?</a>
      </td>
    </tr>
  </tbody>
</table>

trevorp · Accepted Answer · 2018-05-07T20:38:59.833

0

You're just missing a semicolon on your font-family style:

<style>
  .tableLink a  { color: #888888;}
</style>

<table border="0" cellpadding="1" cellspacing="1" style="width:500px;">
  <tbody>
    <tr>
      <td colspan="2" style="font-size: 12px; font-family: Arial, sans-serif; text-align: center; background-color: rgb(245, 245, 245); text-decoration: underline;">
        <span class="tableLink">${l://SurveyLink?d=What%20do%20you%20think?}</span>
      </td>
    </tr>
  </tbody>
</table>

edited May 07 '18 at 20:38

answered May 07 '18 at 19:56

trevorp

1,161
1
14
19

1

Thanks, can't believe I missed the semi-colon. I ran the code and it is working now, except that the color of the link is still showing as blue vs #888888 before being clicked. – gsheppard May 07 '18 at 20:06
You will probably have to add `style="color: #888888;"` to your `span` element (see updated code above). – trevorp May 07 '18 at 20:18
I updated the code, but it looks like it kept the blue color – gsheppard May 07 '18 at 20:29
Since your `a` tag is dynamically generated, you'll probably have to add a class to that span `` and put this CSS on your page: `.tableLink a { color: #888888;}` – trevorp May 07 '18 at 20:35

Link formatting with internal links CSS

2 Answers2