Inline css for emails rollover links

HTML & CSS
1

Good Morning Sitepointers,

I have an email news letter that uses rollover links.

I was using the following style code:

<!--
a:link {color: #A70230;}
a:visited {color: #A70230;}
a:hover {color: #000000;}
a:active {color: #FF0000;}
-->
</style>

However some email client strip out the head section.

I therefore need to put this as inline style so to avoid this.

The whole email is encapsulated by single div.

I tried:

<div align="center" style="a:link color:#A720230; a:visited color: #A70230; a:hover color: #000000; a:active color: #A70230; font-family:Arial, Helvetica, sans-serif;">

However this doesn’t seem to work.

Any help appreciated.

2

Well do it twice once with and once without - it might make a difference. Use a table instead of a div but I guess it will still strip the id anyway.

You just have to do the best you can and try various things.:wink:

3

It kind of works…except gmail strips out div ids

4

I suppose you could also try the very old alink and vlink methods in the opening body element.

5

Hi,

The style attribute applies to the element it is connected to. You can’t reference other elements from the style attribute of a different div.

It’s besides the point anyway because you can’t set pseudo-classes with inline styles anyway because they don’t exist in the document structure as such.

You could set the color of the a element inline.

<a href=“#” style=“color:red”>red</a>

But you can’t set hover styles or other pseudo classes inline because they are intangible characteristics that don;t exist in the document structure.

Your best bet is to put the css inside the body and not in the head and then address the elements via a parent id.

e.g.


<style type="text/css">
#outer a:link {color: #A70230;}
#outer a:visited {color: #A70230;}
#outer a:hover {color: #000000;}
#outer a:active {color: #FF0000;}
</style>
<div id="outer">
    <p>all content here</p>
</div>
</body>

Although it's not valid inside the body element it will make no difference in emails as they are mostly invalid anyway. By putting the css inside the body you may protect it from those clients that strip the head content.

With email nothing is safe and you just do [the best you can do](http://www.campaignmonitor.com/css/).
6

I’ll give that a go.

Thanks