SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist tangledman's Avatar
    Join Date
    Sep 2005
    Location
    Puerto de Mazarron, Murcia, Spain
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inline css for emails rollover links

    Good Morning Sitepointers,

    I have an email news letter that uses rollover links.

    I was using the following style code:

    HTML 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:
    HTML Code:
    <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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I suppose you could also try the very old alink and vlink methods in the opening body element.

  4. #4
    SitePoint Evangelist tangledman's Avatar
    Join Date
    Sep 2005
    Location
    Puerto de Mazarron, Murcia, Spain
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll give that a go.

    Thanks

  5. #5
    SitePoint Evangelist tangledman's Avatar
    Join Date
    Sep 2005
    Location
    Puerto de Mazarron, Murcia, Spain
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It kind of works...except gmail strips out div ids

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tangledman View Post
    It kind of works...except gmail strips out div ids
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •