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

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

After researching various image sliders online, I came across this specific one. It worked perfectly fine when I included the JavaScript directly in a script tag within the HTML file. However, as soon as I tried to link it via a .js file, the slider stoppe ...

javascripthtmlcss

Tab panels are shown by Bootstrap 5 tabs

I am using Bootstrap 5 to design a layout that changes based on the width of the screen. When the screen width is greater than or equal to 992 pixels, a table is displayed in the sidebar and some text is shown in the main content area. However, if the scre ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to incorporate various styles into one :style attribute?

Within my vuetify project, I encountered a challenge of adding multiple styles to the same style attribute. Specifically, I have successfully implemented a vuetify breakpoint and now wish to include {backgroundColor:'Color'} within the existing a ...

javascriptcssvue.jsvuetify.js

Repeated tweets detected within real-time Twitter stream

I've been working on developing a live update Twitter feature, but I've noticed that it sometimes duplicates tweets and behaves erratically. Did I make a mistake somewhere in my code? http://jsfiddle.net/JmZCE/1/ Thank you in advance (note: I p ...

jqueryhtmljsonlive

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

javascriptjqueryhtmlcss

Ways to have a list component smoothly descend when a dropdown menu is activated

I have a situation where I have a list with two buttons, and each button triggers the same dropdown content in a sidebar component. The issue is that when I click on one button to open the dropdown, the second button does not move down to make space for it ...

javascripthtmlcssreactjs

What is the process for inspecting the element within a div using jsname with JS?

Struggling to inspect elements within a DIV without using xpath. // Assert.assertEquals("Digite uma senha",driver.findElement(By.xpath("//*[@id=\"view_container\"]/div/div/div[2]/div/div[1]/div/form/span/section/div/div/div[1]/div[2]/div[2] ...

cssselenium-webdriverbddcucumber-java

Unusual Behavior of CSS and JQuery Selectors

As I was working with jquery selectors, I encountered something quite unexpected. This is an example of my HTML: <ul id="unordered-list"> <li> <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/> ...

jquerycssjquery-selectorscss-selectors

Tips on automating the process of moving overflowing elements into a dropdown menu

Challenge Description In need of a dynamic navigation bar, I faced the problem of displaying only the first X items on one line and have the remaining items hidden in a "Show more" dropdown. The challenge was to calculate the width of each item accurately ...

javascripthtmlcssreactjs

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

Reactjs error: Invariant Violation - Two different nodes with the matching `data-reactid` of .0.5

I recently encountered a problem while working with Reactjs and the "contentEditable" or "edit" mode of html5. <div contenteditable="true"> <p data-reactid=".0.5">Reactjs</p> </div> Whenever I press Enter or Shift Enter to create ...

javascripthtmlreactjs

"Utilizing CSS exclusively in conjunction with a PHP API for seamless integration

My CSS is working only when inline, and I'm struggling to track down the reason for this issue. As a beginner in web design, I am unsure of what steps to take to troubleshoot the problem. Since I cannot open the console to check for errors, what facto ...

phphtmlcssapi

Creating a div overlay triggered by the addition of a child tag

Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent ...

javascriptcsspaypaldom-events

validating links in Laravel

Is it feasible to validate a href element in laravel? For instance, I have various user responses in my guest book and each user has the capability to delete their posts. The deletion process is as follows: <div class="col-lg-2"> <ul class="l ...

phphtmllaravel

What is a simple way to ensure that my image retains its square shape on a responsive design without having to use numerous media queries?

I've been searching for solutions to my issue, but none of them have worked for me so far. I am working on a form where users can edit or add images, and I want each image to be displayed as a square regardless of the device being used (desktop, mobil ...

cssimagebootstrap-4responsive

Looking to display a submenu next to its parent element

I have a list that is not in order: <ul> <li>Parent-1 <ul> <li>Child-1</li> <li>Child-2</li> <li>Child-3</li> </ul> </li> <li>Parent-2 <ul> <li>Ch ...

jqueryhtmlcssmenu

Is the user currently viewing this page?

My website, www.mysite.com, has a basic login system using PHP and MYSQL. With the $_SESSION['user_id'] in place, I am wondering if there is a way to determine if a user currently has the page www.mysite.com/test.php open. Is it possible to acco ...

phpjquerymysqlhtmlajax

html - automatically populating input fields when the page loads

Currently, I have an HTML form embedded in the view and I am looking for a way to automatically populate specific input fields with json variables obtained from the server. Instead of manually writing JavaScript code for each field, my goal is to access th ...

javascriptjqueryhtmljsononload

The multiline feature of tooltip on mat-table cell is malfunctioning

I adjusted the mat-tooltip to be displayed as multiline using the following style in the global CSS: .mat-tooltip-class-here { white-space: pre-line !important; } Interestingly, this formatting works on span and button elements but not on mat cells. ...

cssangulartooltipmat-table

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

When attempting to click a button, I encountered an error stating that the element is not clickable at point (1333, 75) as another element would receive the click. This issue arose while using Google Chrome version 65. <li class="slds-dropdown-trigge ...

javahtmlselenium