Encountering a problem with the divLogoBlock element in the code snippet below

I am experiencing an issue with the code below. The divLogoBlock does not appear when I copy and paste the entire page into Outlook as a signature. I believe there may be a problem with the CSS. Can someone please assist me?

<html lang="en"><head>
<meta charset="utf-8>
<title>_-_</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100" rel="stylesheet" type="text/css">

<style>

    body                { font-family: 'Roboto', sans-serif;  color: #545555; margin: 0px; padding: 40px 0px 0px 3px; width:350px; position: absolute; }
    ul                  { float: left; margin: 33px -32px; }
    ul a                { margin-right: 6px; }
    ul a:last-child     { margin-right: 0;}
    .divLogoBlock       { height: 80px; width: 350px; background: #F3F3F3; }
    .logoBox            { padding:0px 0px; width: 350px; height: 4px; position: absolute; }
    .clear              { clear: both; }

</style>

</head>

<body>
    <h4 style="color:#545555; width:350px; margin: 0px">-----</h4>
    <h5 style="color:#545555; font-size:14px;font-weight:600; margin:20px 0 0 0; line-height:1; width:350px; margin-right:0px; ">Esesve Digumarthi</h5>
    <span style="font-size:14px;font-family: 'Roboto', sans-serif; font-weight:normal;">CEO</span>
    <p style="font-size:14px; margin-top:5px;color:#545555; width:350px">+91 9959 800 400  |  <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8adbbadbbbead88ada6a0aba7bab8e6aba7a5">[email protected]</a>" style="color:#252629; text-decoration:none; width:350px"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2540564056534065404b4d464a57550b>48"><svp![r@emdt!we48"></a></a></p>

    <div class="divLogoBlock" style="overflow: auto;">
        <div class="logoBox" >
            <a style="float:left;" href="http://enhcorp.com/" target="_blank"><img style="margin:11px 0;" src="enh.jpg"></a>
            <ul>
                <a href="https://www.facebook.com/EnHcorp " target="_blank"><img src="facebook.png"></a>
                <a href="https://twitter.com/EnHcorp" target="_blank"><img src="twitter.png"></a>
                <a href="https://www.linkedin.com/company/enh-corp" target="_blank"><img src="linkedin.png"></a>
                <a href="https://plus.google.com/106470734549809877531/about" target="_blank"><img src="g_plus.png"></a>
                <a href="https://www.youtube.com/channel/UC0Pdj548Y4A1NzAlX7-9GGw" target="_blank"><img src="youtube.png"></a>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
    <div class="logoBox"><img src="bottomBar.jpg" width="350" height="4" align="top"></div>







</body></html>
htmlcss

Answer №1

To ensure compatibility with email standards, it's important to use absolute URLs for images instead of relative links.

Additionally, consider inlining your CSS for better results. While you can keep style tags in the header, many email clients only support inline CSS. MailChimp's inliner tool is a helpful resource if you prefer automated conversion.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rendering the HTML5 canvas within a console environment

I am looking to create images of humans on the console using nodejs. In order to achieve images of higher quality, I require a library or module that can facilitate drawing images in the console. Some options available include imaging and console-png. How ...

javascriptnode.jshtmlcanvas

Altering the inner HTML content of a div using the ID within an Angular component function

Attempting to change the inner HTML content of a div using its id with another div in an Angular component method. Successfully calling the populateEndpointHomeContent() method and retrieving the content, but encountering issues with subsequent content. Th ...

javascripthtmlangular

Managing the Response from Google Geocode API in a Vue JS Component

I am facing an interesting challenge. I have a scenario where users can choose between two options - using their current location or entering a zip code. When a user inputs a zip code, I need to make a call to the Google geocode API to retrieve the central ...

javascripthtmlvue.js

I am looking for a way to display multiple images when the user clicks a button. It needs to be done

After successfully implementing a draggable single circle image when clicking a button, I am now looking to add multiple circle images each time the button is clicked. I'm considering using the append function with the canvas tag for this purpose. Ca ...

jqueryjquery-uicsshtml5-canvas

An inclusive CSS-compatible calendar control for ASP.NET

I am currently using the Calendar control provided by .NET but I have encountered issues with how it renders HTML in certain situations. Unfortunately, this is hard-coded and cannot be changed. It seems that the Calendar control has not been updated in .NE ...

asp.netcsscalendar

"Toggling a switch alters the appearance following the submission of a form

Recently, I incorporated a switch toggle into my form to help filter products. I followed this guide. However, after submitting the form, the page reloads using ajax and the switch toggles back to its initial style before being toggled again. What could be ...

jqueryhtmlcssruby-on-railsajax

Cross-platform mobile browsers typically have scrollbars in their scrollable divs

I have successfully implemented scrollable div's on a page designed for tablets running Android 3.2+, BlackBerry Playbook, and iOS5+ (except iPad 1). However, I would like to add scrollbars to improve the user experience. For iOS5, I can use the suppo ...

javascriptandroidcsswebkitscrollbars

Having difficulty configuring Compass in WebStorm

Trying to integrate Compass into an existing WebStorm project has been challenging for me as the CSS files are not linking properly. Despite my efforts to modify the relative links, I have not yet managed to resolve the issue. The folders and config.rb we ...

csswebstormcompass-sasscompass

Transform a Div element into an image, ensuring compatibility with Internet Explorer 7 and 8

Currently, I am utilizing the jqplot charting library to create charts in my ASP.NET MVC application. Within a div element, the chart is being rendered. The goal is to convert this div element into an image and export it to a PDF document. The jqplotToIm ...

asp.net-mvchtmlhtml5-canvasjqplotexcanvas

Excessive white space within a relative block div causing the content to appear smaller in comparison

Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row. After leaving my project untouched for a few days, I encountered some bugs upon ...

htmlcss

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

javascripthtmlcssfocus

"Effortlessly add an image to your page and watch it appear instantly without the need

One of the features on my website is a button that enables users to select an image, as shown in the code snippet below: <div id="fileUpload"> <form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data"> ...

phpjqueryhtml

Steps to halt webkit animation within a div located inside a circle:

I have a series of nested circle divs, and I want to give them a pulse animation. The issue is that the text container is within one of these circles, causing the animation to apply to the text as well. I am unable to move the text container due to potenti ...

javascriptjqueryhtmlcss

Steps for adjusting an image in a Bootstrap Carousel

Currently tackling a simple bootstrap Carousel for a school project. I've adjusted the max-height of the images to 400px but it seems like only the top part of the images is visible. I attempted to adjust the margins on the image, and even thought abo ...

csstwitter-bootstrap

Link PayPal payments to the individual making the payment

On my website, I offer in-game features that can be purchased through a miniature store with PayPal buy now buttons. I'm looking for the best and most secure method to automatically deliver these in-game bonuses to users after they have completed thei ...

phphtmlpaypal

The margin property in jQuery does not seem to be functioning properly when trying to send

Within the view page, there is jQuery code that sets a margin on a div. Below is the code: <script type='text/javascript'> $('#someID').css('margin-left', '10px'); </script> This code functions proper ...

jqueryruby-on-railscssactionmailer

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

htmlcssmedia-queries

Being required to design a distinct div for every article I am extracting from the API

In the midst of developing a website for my college project, I have successfully configured my news API to pull and display data using JavaScript. Currently, I am faced with the challenge of having to create separate div elements each time I want to add n ...

javascripthtmlcss

Instructions on transforming a XAML grid in WPF into a JSON array

Currently, I am utilizing a XAML WPF grid in my project and I am looking to transform the structure of the grid into JSON format. Do you have any suggestions or ideas on how this can be achieved? For reference, here is an example: <GridBinding> ...

c#jsonwpfhtmlxaml

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

My website has a video in the header that works fine on desktop but not on mobile. I am using next.js 13.4 and here is my code: <video id="background-video" autoPlay playsInline loop muted classN ...

javascripthtmlreactjsnext.jsfrontend