Internal link formatting using CSS styling

I have a question about formatting links with fonts and colors to make them clickable. I managed to achieve the desired font and color styles using a specific code snippet, but struggled to make the link 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>

On the other hand, I was able to make the links clickable using a different piece of code, but lost the formatting I wanted:

<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>

I am wondering what I might be overlooking in order to achieve both the desired formatting and functionality of making the link clickable to the survey. (Just an FYI, SurveyURL and SurveyLink refer to the same thing) Thank you!

htmlcss

Answer №1

You are simply missing a semicolon in the `font-family` style declaration:

<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>

Answer №2

Don't forget to add a semicolon after font-family: Arial, sans-serif in your CSS code; otherwise, the styling won't fully apply.

The link you're referring to (${1://SurveyURL}) is functional and clickable.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to position a rectangle on top of a div that has been rendered using

I recently started using a waveform display/play library known as wavesurfer. Within the code snippet below, I have integrated two wavesurfer objects that are displayed and positioned inside div elements of type "container". My goal is to position my own ...

javascripthtmlcsswavesurfer.js

Printing style in CSS

Everything looks good on my webpage. For printing, my CSS adjusts the layout and section sizes. Unfortunately, there is an issue with the print layout - there is a one-inch margin on the left side causing two elements to go off the page on the right. I ...

cssprintingmargin

Unstyled Cards Failing to Receive Design

I am currently working on creating a prototype that utilizes two Bootstrap 4 cards to display information from a form and store related information from another form in the second card. The current layout of this setup can be observed below: This JSFiddle ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-4

How to determine button placement based on the content present on the page

I'm struggling to find the right CSS positioning for a button on my page. I want the button to stay fixed in a specific location, but when there's a lot of content on the page, I need it to adjust its position accordingly. Initially, I want the ...

javascripthtmlcssbuttoncss-position

"Creating dynamic radio buttons within a dynamic table using Ajax and jQuery: a step-by-step guide for toggling

Looking to generate a dynamic html table with data retrieved from a web method in asp.net using Ajax jQuery. One of the fields is a boolean value that needs to be associated with radio buttons. However, encountering an issue where setting attributes like ...

jqueryhtmlasp.netajaxasp.net-mvc

Having difficulty with the placement of a div element in HTML code, wondering how to position it according to my specific

As a beginner, I ran into some trouble with my code while trying to create a simple 'game' for fun. The initial result looked like this. After that, I attempted to add another div onto the brown element using the following CSS: #energy_and_coins ...

htmlcsspositioning

Superceding Meta Character Encoding Statements

Have you ever wondered what happens when two older-style character encoding declarations are used in a webpage? Will the first declaration override the second, or vice versa? Or will they both be ignored and excluded from the encoding algorithm? For Ex ...

htmlencodingcharacter-encodingmeta-tagsmeta

Spread out a div across a container's width

Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached. Take a look at this fiddle for reference. The absol ...

htmlcss

Flexbox layout to achieve equal height columns with content centered

In search of a solution to create two columns with equal height and center-aligned content within each column, while also maintaining different widths. Issue: The challenge lies in achieving both 'equal height' and 'middle aligned' at ...

htmlcssflexboxsemantic-ui

Design your own unique HTML webpage

My goal is to create a screen using divs that includes a big div which aligns with the month of October. This big div should be movable across the months, and when it stacks on a specific month, a form should be submitted. I am seeking assistance with po ...

htmlcss

Unresolved conflict stemming from an HTML closing tag in the index.html file, despite both source and destination files being identical

I am currently facing a challenge while trying to merge my code with the master branch through a pull request. The conflict arises in the src/index.html file, specifically on line 17 which states </html> needs to be corrected to </html>. It&apo ...

htmlangularversion-controlbitbucketpull-request

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

Tips for properly aligning numbered lists in text documents

My issue involves designing an order list paragraph where I also need a paragraph in the middle of the ordered list numbers. The first paragraph is displaying correctly, but the second and third paragraphs are only appearing as single lines, so I adjuste ...

html

Is there a way to shift the display of inline-block to the right?

I'm struggling with positioning a div that's nested within a display:inline-block. How can I align it to the right side of the container? <div style='width:100%'> left <div style='display:inline-block;position:relative;r ...

htmlcss

Tips for enhancing your HTML email template with borders:

I designed an email template using the email template editor and incorporated nested table tags for each mail element. As I created a table to contain all these elements and attempted to add borders to the tags, I encountered a space between the top and bo ...

htmlcsshtml-tablehtml-emailemail-templates

What is the process for obtaining the Rails response object within your code?

Is there a way to manipulate the response object from a controller in Rails? I have an example of how to access the response: class HomeController < ApplicationController after_filter :generate_html def index end def generate_html raise ...

htmlruby-on-railsstatic-pages

Exploring Laravel 4's CSS Routing

Attempting to connect my CSS document in Laravel 4 has been a bit challenging. The location of my CSS file is: public/css/style.css In the view, I have the following link: <link type="text/css" rel="stylesheet" href="{{URL::asset('css/style.css ...

cssexceptionrouteslaravel

Progressing through the Material UI LinearProgress bar in steps

How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png I attempted using this code but couldn't find an option for splitting: <LinearProgress variant="determinate" classes={{ ...

cssreactjsmaterial-ui

Maintain an equal distance between 2 out of 3 elements while resizing the window to ensure responsiveness

There are two image divs stacked on top of each other, positioned beside a fluid header logo (.svg) also contained in a div. The HTML: <header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div cla ...

javascriptjqueryhtmlcssresponsive-design

Issues with Google maps are causing multiple maps to malfunction

After incorporating some jquery code to create multiple maps upon window load, I noticed a peculiar issue with the maps - they all display the same location despite having different latitudes and longitudes set. Upon inspecting the code responsible for cr ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3