How to fix blue links in navbar for gmail?


#1

Hello again. My hyper links in the navbar work fine in preview mode for Firefox as well as Outlook emails, but for some reason they show up as blue. Can anyone help?

Thanks

It should look like this:

Here is my code (I edited/deleted everything past the navbar code):

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <title>Hear from Agree, W. P. Carey, Angelo, Gordon & VEREIT at InterFace Net Lease</title>

    <!-- Web Font / @font-face : BEGIN -->
    <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->

    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
<style type="text/css">
.fallback-font {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
        <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,800" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--<![endif]-->

    <!-- Web Font / @font-face : END -->

    <!-- CSS Reset -->
    <style>

      	/* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
		
		/* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }
		
		/* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode:bicubic;
        }

        /* What it does: A work-around for email clients meddling in triggered links. */
        *[x-apple-data-detectors],	/* iOS */
        .x-gmail-data-detectors, 	/* Gmail */
        .x-gmail-data-detectors *,
        .aBn {
            border-bottom: 0 !important;
            cursor: default !important;
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        /* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
        .a6S {
            display: none !important;
            opacity: 0.01 !important;
        }
        /* If the above doesn't work, add a .g-img class to any image in question. */
        img.g-img + div {
            display:none !important;
           }

        /* What it does: Prevents underlining the button text in Windows 10 */
        .button-link {
            text-decoration: none !important;
        }
		
		</style>
	 
		<!-- Progressive Enhancements -->
    	<style>

        /* What it does: Hover styles for buttons */
        .button{
            transition: all 100ms ease-in; /**doubtful in emails**/
			background: #0f64aa;
			border-radius: 8px;
			font-family: Helvetica, Arial, sans-serif; 
			font-size: 18px;
			text-decoration: none; 
			display: block;
			color:#ffffff;
			text-align:center;
        }
        .button:hover{
            transition: all 100ms ease-in; /**doubtful in emails**/
			background: #555;
			border-radius: 8px;
			font-family: Helvetica, Arial, sans-serif; 
			font-size: 18px;
			text-decoration: none; 
			display: block;
			color:#ffffff;
			text-align:center;
        }
			
		/* What it does: Hover styles for navbar */
		a.ex5:visited, a.ex5:link {color: #ffffff !important; text-decoration: none !important; font-size:16px; font-family: Helvetica, sans-serif;}
		a.ex5:hover, a.ex5:active {color: #ffffff !important; text-decoration: underline !important; font-size:16px; font-family: Helvetica, sans-serif;}
			

        /* Media Queries */
        @media screen and (max-width: 480px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

            /* What it does: Adjust typography on small screens to improve readability */
			.email-container p {
				font-size: 17px !important;
				line-height: 22px !important;
			}
        }

    </style>

    <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
    <!--[if gte mso 9]>
	<xml>
		<o:OfficeDocumentSettings>
			<o:AllowPNG/>
			<o:PixelsPerInch>96</o:PixelsPerInch>
		</o:OfficeDocumentSettings>
	</xml>
    <![endif]-->

	<style type="text/css">
    body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
    table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
    img{-ms-interpolation-mode: bicubic;}

    img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
    table{border-collapse: collapse !important;}
    body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}

   div[style*="margin: 16px 0;"] { margin: 0 !important; }
.padding {          padding: 10px 5% 15px 5% !important;
}
	
</style>
</head>
<body bgcolor="#ececec" bgproperties="fixed" style="margin: 0; padding: 0;">
	<table align="center" border="0" cellpadding="0" cellspacing="0" width="680px">
 		<tr>
			<td align="center" valign="top" style="padding-top: 15px;"></td>
 		</tr>
 	</table>
 	<table align="center" border="0" cellpadding="0" cellspacing="0" width="680px" style="border: 1px solid #000000;">
 		<tr>
  			<td bgcolor="#ffffff">
  	<table border="0" cellpadding="0" cellspacing="0" width="100%">
    	<tr>
            <td bgcolor="#0f64aa" align="center" valign="top">
                <a href="http://interfaceconferencegroup.com/nl2018" target="_blank">
					<img src="http://interfaceconferencegroup.com/nl18/images/NL-Banner.jpg" alt="Register Today!">
				</a>
            </td>
        </tr>
		<tr>
			<td bgcolor="#0f64aa" align="center" style="padding: 10px 0 15px 0; margin-top: 0px;">
				<a class="ex5" href="http://www.cvent.com/events/2018-interface-net-lease/agenda-8696705e0e04442c8f490fc6b5428ea9.aspx" target="_blank">AGENDA</a><span style="color: #ffffff;"> &nbsp;&#8226;&nbsp;</span>
				
				<a class="ex5" href="http://www.cvent.com/events/2018-interface-net-lease/speakers-8696705e0e04442c8f490fc6b5428ea9.aspx" target="_blank">SPEAKERS</a><span style="color: #ffffff;"> &nbsp;&#8226;&nbsp;</span>
				
				<a class="ex5" href="http://www.cvent.com/events/2018-interface-net-lease/fees-8696705e0e04442c8f490fc6b5428ea9.aspx" target="_blank">REGISTER</a><span style="color: #ffffff;"> &nbsp;&#8226;&nbsp;</span>
				
				<a class="ex5" href="http://www.cvent.com/events/2018-interface-net-lease/custom-17-8696705e0e04442c8f490fc6b5428ea9.aspx" target="_blank">SPONSORS</a><span style="color: #ffffff;"> &nbsp;&#8226;&nbsp;</span>
				
				<a class="ex5" href="http://www.cvent.com/events/2018-interface-net-lease/travel-8696705e0e04442c8f490fc6b5428ea9.aspx" target="_blank">VENUE</a>
			</td>
		</tr>
  
  
</table>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="650px">
 		<tr>
			<td align="center" valign="top" style="padding-top: 15px;"></td>
 		</tr>
</table>
</body>
</html>


#2

AFAIK, at least some email clients don’t do <head> content. If you remove the <head> ... </head> and look at it in a browser does it look OK?


#3

No, I need the head tags.


#4

In that case I guess you’ll need to send the email to only those email clients that will use the <head> (I have no idea which, if any, will). Stinks I know, but that’s the current sorry state of email.


#5

I haven’t done html email for quite a while but I usually had success with wrapping a span around the text inside the anchor and applying the colour to the span instead.

Similar example mentioned here: