My current project involves creating an email signature that is easily transferable to email programs like Outlook or Gmail. You can access the website for this project here:
After pasting the signature into Gmail, it displays correctly. However, when pasted into Outlook, it appears like this: https://i.sstatic.net/fnTGN.png.
You'll notice that the vertical bar and text are positioned below the logo instead of next to it as intended. It seems that the CSS float property isn't functioning properly.
What steps should I take to resolve this issue?
If you prefer not to inspect the linked webpage directly, you can refer to the following HTML code:
<span id="signature">
<div style="width:500px">
<div class="row">
<div class="column" style="float: left;
width: 14%;
padding: 6px;">
<img src="https://www.uog.edu/_resources/images/oit/social_media_icons/signature/BigG-resized-but-blurry.png" alt="Signature Logo" style="height:130px; width:auto; margin:0px; padding-top: 8px;"/>
</div>
<div class="column" style="float: left;
width: 14%;
padding: 6px;">
<div class="vl" style="border-left: 2px solid;
color: #046A38;
height: 150px; font-family: Calibri, sans-serif;">
<h1 id="name-signature" style="font-size:15px; color:#046a38; margin:0px; padding-left: 10px; padding-top: 14px; width: 300px; font-family: Calibri, sans-serif;">Joe Triton</h1>
<h2 id="title-signature" style="font-size:15px; color:#046a38; margin:0px; font-style:italic; padding-left: 10px; padding-top: 1px; width: 300px; font-family: Calibri, sans-serif;">Computer Center Assistant</h2>
<p style="font-size:15px; color:#464646; margin:0px; padding-left: 10px; padding-top: 1px; width: 300px;">
<a id="office-signature" href="tel:5551231234" target="_blank" style="color:#464646; font-family: Calibri, sans-serif;">+1 (671) 555-2640</a><br/>
<a id="email-signature" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1cbd5d3c8d5cecfe1d5d3c8d5cecf8fd4cec68fc4c5d4">[email protected]</a>" target="_blank" style="color:#464646; font-family: Calibri, sans-serif;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c46585e455843426c585e455843420259434b02494859">[email protected]</a></a><br />
<!-- href="https://it.uog.edu/" target="_blank" -->
<span id="department-signature" style="color:#464646; font-family: Calibri, sans-serif;">Information Technology</span>
</p>
<div id="socialMediaIcons" style="width:300px;">
</div>
</div>
</div>
</div>
<div style="clear:both;"></div> <!--this line of code causes the following to not be floated. The problem isn't seen in the browser, you see it when you copy it to Gmail -->
<p style="font-size:12px; color:#464646; margin:0px; padding-top: 10px; font-family: Calibri, sans-serif;"><em>The University of Guam is an equal opportunity provider and employer.</em></p>
<hr style="border-color: #00652E;
margin: 0 0px 20px;
border: 0;
border-top: 1px dotted #B3B2B1;
height: 1px;"/>
<p style="font-size:12px; color:#464646; margin:0px; text-align:justify; font-family: Calibri, sans-serif;">CONFIDENTIALITY STATEMENT: This message is from the University of Guam and contains information which is privileged and confidential and is solely for the use of the intended recipient. If you are not the intended recipient, any review, disclosure, copying, distribution, or use of the contents of this message is strictly prohibited. If you have received this transmission in error, please destroy immediately.</p>
<br/>
<p style="font-size:12px; color:#464646; margin:0px; text-align:justify; font-family: Calibri, sans-serif;">This email message (including any attachments) is for the sole use of the intended recipient(s) and may contain confidential information covered under the Family Educational Rights & Privacy Act (FERPA). If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this message (including any attachments) is strictly prohibited. If you have received this message in error, please destroy all copies of the original message (including attachments) and notify me immediately by email or phone. Thank you.</p>
</div>
</span>