HTML Email Design with Nested Tables

Question

Why isn't my text-decoration="none" appearing properly? I've tried putting it in different locations, such as table, tr, td, but I can't seem to get it to work. Any common mistakes in styling email designs? Here is my code:

<table cellspacing="0" cellpadding="0" border="0" max-width="100%" width="600px" align="center">
  <tr>
    <td>

      <table cellspacing="0" cellpadding="0" border="0" max-width="100%" align="center">
        <tr>
          <td>

            <!-- HEADER -->
            <table cellspacing="0" cellpadding="0" border="0" max-width="100%" align="center">
              <tr align="center">
                <td>
                  <p>Is this email not displaying correctly? <a href="#" text-decoration="none">View this email in your web browser</p></a>
                </td>
              </tr>
            </table>
            <!-- END HEADER -->

          </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

Answer 1

text-decoration is a CSS property, not an HTML attribute.

It has to go in a style sheet or a style attribute.

This, among various other errors, would be picked up if you used a markup validator.

Answer 2

If you want it completely gone, you have to remove the underline in all four pseudo-classes (link, hover, active, and visited), which you can only do with CSS.

See this this tutorial for info about pseudo-classes in CSS.

Answer 3

Quentin is right:

• text-decoration is indeed a CSS property therefore it has to be called via the style attribute.
• also, that style attribute has to go inside the tag that it is referencing. Table cells are not divs so inheritance (generally speaking) does not work the same way.

Finally, a suggestion. Write your CSS as you would normally do inside the <style> tags and then convert it into inline with inliner.