Trouble with HR functionality in Outlook email

<table>
  
  <tr>
<td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8px;padding-right:30px;line-height: 26px;color: #262626; font-weight:700; background:#f9f9f9;" align="center">

 <hr align="left" style="width: 70px; vertical-align: middle; height: 1px; background: #171717; display: inline-block;">
                        <img src="http://www.hubilo.in/images_for_links/venue_icon.png" width="25" height="25" align="center" style="vertical-align: middle;">
                        <hr align="left" style="width: 70px; display: inline-block; vertical-align: middle; height: 1px; background: #171717;">

</td>
</tr>
  
  </table>

Upon viewing this in Outlook, it appears as follows:

The left hr is displayed on one line,

the image is shown on the second line, and

the right hr is on a new line.

Do you have any suggestions on how to fix this formatting issue?

htmlcsshtml-table

Answer №1

<table align="center" style="">
<tr>
<td align="left" style="width: 35px; padding: 0; margin: 0;">
<hr style="width: 30px; border:1px solid #000000; background: #000000; ">                  
</td>                  
<td align="center" style="width:30px; padding: 0; margin: 0;">
<img src="http://www.hubilo.in/images_for_links/venue_icon.png" width="25" height="25" style="vertical-align:middle;">
</a>
</td>
<td align="right" style="width: 35px; padding: 0; margin: 0;background: ">
<hr style="width: 30px; border:1px solid #000000; background: #000000; ">                 
</td>;

<td align="right" style="width: 20px; padding: 0; margin: 0;">
<span style="color:#FFFFFF; font-size:14px;"> </span>                  
</td>
</tr>
  </table>

Here's a suggestion

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

JavaScript: Remove just the specific user input without affecting the rest of the HTML block

I'm facing a dilemma with deleting a specific user input without removing the entire HTML block. I know that the delete button triggers on the HTML ID 'noteDelete', which is the parent of each user input. However, I'm unsure about how t ...

javascripthtml

scrollable list using bootstrap

<div class="panel panel-primary" id="result_panel"> <div class="panel-heading"><h3 class="panel-title">List of Results</h3> </div> <div class="panel-body"> <ul class="list-group"> &l ...

csstwitter-bootstrap

Mysterious attributes of angular 6's <table mat-table> tag

This particular question regarding the angular material table has not been duplicated in any other discussions. Other similar questions pertain to angular versions 2-5, not version 6 The issue I am encountering is as follows: Can't bind to 'dat ...

htmlangulartypescriptangular-material

The table on the page shifts position when viewed on different devices, sometimes not remaining between the header and footer

Here is a link to see how my page looks with the header, table, and footer: If you want to see how it looks when responsive (with smaller width), check out this link: I have encountered 2 main problems: The table overlaps the header, The footer ends up ...

htmlcssangular

Caution: Unable to establish connection with database due to connection refusal (HY000/2002)

Currently diving into PHP and working on a login/register page in localhost using XAMPP on my Mac. I'm encountering an issue with the following error message: Warning: mysqli_connect(): (HY000/2002): Connection refused in /opt/lampp/htdocs/website/ ...

phphtmlmysqlixampplocalhost

Issue arising from failure to check the checkbox

My ajax request is sending form data to an external PHP script and returning a result, but I'm encountering an error: Uncaught SyntaxError: Unexpected token < index.php hr.onreadystatechange This error occurs when trying to send the form without ...

phpjqueryhtmlajaxjson

CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

Looking to create a template with a background on the left side that extends to the edge of the page within an 8 of 12 bootstrap columns setup. The remaining 4 columns on the right will not have a background. This layout should be responsive, stacking on t ...

cssbootstrap-4

Guide to showcasing user input using a Javascript function

I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...

javascripthtml

Addressing Image Issues in CSS Grid

I'm struggling to position two images in different sections of a grid layout without overlapping them. I've attempted referencing the images by both their class and id, but they continue to occupy the same grid space. Referencing the images by ...

htmlcss

The function of style.marginRight differs from that of style.marginLeft

One function aligns content to the left while the other doesn't align it to the right function openNavLeft() { document.getElementById("mySidenavLeft").style.width = "100vw"; document.getElementById("main").style.marginLeft = "100vw"; } function ...

javascriptjqueryhtmlcssbootstrap-4

Why does Next.js throw an error when using an additional <div></div>?

I'm new to exploring Next.js and I'm encountering an error when using the html tag twice. It works fine with just one container, but as soon as I add another one, this error pops up: Error: error: Unexpected token "div". Expected jsx i ...

javascripthtmlnext.js

A comprehensive guide to navigating pages using AngularJS

Greetings! I've recently embarked on my Angular JS learning journey and have encountered an issue with loading content from pages. Unfortunately, I am not able to receive any content. Below are snippets of my index file and corresponding JavaScript co ...

javascriptangularjshtml

Error: The function 'check' is not defined and cannot be called when the 'on

My aim is to display the "expandrepeat" div when a specific select option is chosen. Unfortunately, the code below doesn't seem to be working as intended: <script> window.check=function(elem) { if (elem.selectedIndex == 1) { documen ...

javascripthtmlvue.js

The HTML file that was downloaded appears to contain jumbled and nonsensical text

I recently downloaded some HTML files from an Android application. They display perfectly when opened within the app, but appear jumbled on my computer. There is also a CSS file included. If necessary, I can provide the CSS file for reference. While I am n ...

androidhtmlencode

The div swiftly clicks and moves beyond the screen with animated motion

Here is a code snippet that I am working with: $(document).ready(function(){ $(".subscriptions").click(function (){ if($(".pollSlider").css("margin-right") == "-200px"){ $('.pollSlider').animate({"margin-right": '+ ...

javascriptjqueryhtmlcssjquery-ui

Basics of CSS border-image explained

Although it seems simple, I'm struggling to figure out what the issue might be. I am attempting to create a div with a specific border on an ASP.Net webpage. CSS: .ResourcesDiv { border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-w ...

htmlcssborder

What is the method to dynamically modify the value of location.href using vanilla javascript?

I have a button that looks like this: <button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button> However, I want to change the location.href value using vanilla JavaScript. The code below ...

javascripthtmldebugging

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Although this question may appear similar to others, there is a key distinction that sets it apart. In search of request efficiency rather than space efficiency, lazy loading could be the solution. However, in situations where content needs to be quickly ...

javascripthtml

My content is being obstructed by a single-page navigation system

I attempted to create a simplified version of the issue I am facing. Basically, I am working on a header with navigation that stays at the top of the page while scrolling. The problem arises when clicking on a section in the navigation. The screen scrolls ...

javascriptjqueryhtmlcss

Ways to prevent scrolling in Angular 6 when no content is available

I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...

javascripthtmlcssangulartypescript