Having RoundRect take the top left position of its rectangle container rather than its immediate parent (td)

I am currently troubleshooting an email-related issue that is specifically affecting Outlook

In order to create a round Call To Action (CTA) button, I utilized Vector Markup Language (VML)

The expected result should look like this:

https://i.sstatic.net/LR5hU1Td.png

However, in Outlook, I observed that the roundrect only moves to the top left corner of the container

https://i.sstatic.net/cWyy0BPg.png

To highlight the alignment issues, I have set the background color to red or yellow

Please note that upon removing the container '<v:rect><v:fill ... ', the CTA renders correctly, indicating there might be an issue with the container itself

To implement the round CTA, I included the following code snippet inside a VML if else (if mso) block:

Placeholder for unique text here

Additionally, within the td container containing the block, the following code was present:

Another placeholder for unique text here

The entire code structure can be summarized as follows:

Complete code structure described here
htmlcssoutlookhtml-emailvml

Answer №1

There seems to be a known issue with VML within VML. Although the exact problem is not clear, it has been observed that removing a certain container resolves the rendering issue for the CTA element.

One suggestion is to eliminate the position:relative statements, as their necessity is uncertain in this context.

It appears that the presence of multiple tables might be complicating the structure. A more streamlined approach could involve utilizing fewer table elements and focusing on a simpler structure with v:roundrect, anchorlock, center, text elements. A separate table could be dedicated to the background image if needed.

If maintaining the existing structure is preferable, creating a wrapper to contain problematic sections could be worth exploring. For instance, using a 

<v:textbox inset="0,30px,0,0"> ... </v:textbox>
could help offset certain elements within the layout.

The specific direction of the inset values might need testing to determine the correct placement, but it is likely to align with the position:relative attribute.

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 could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

javascriptjqueryhtmlfocusoutjquery-focusout

Label text facing positioning difficulties

Hey there! I have a goal in mind: https://i.stack.imgur.com/bnso9.png This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode. label { color: #6d6e70; bottom: 0; } .img-row img { width: 10 ...

htmlcsstwitter-bootstrap

Position the text so that it is aligned below and to the right of the text box

I'm currently working on a project in ASP.NET that involves a resizable textbox with a character limit display positioned below and to the right of the box. The challenge I am facing is ensuring this text remains properly aligned as the size of the te ...

htmlcssasp.netbootstrap-4

Hide the div if the content is empty

Within a div created by the_content, there may be content or it could be null, resulting in an empty div that I want to hide. To address this issue, I attempted to store the content in variable $pageContent. However, upon declaring the variable, it either ...

phphtmlwordpress

W3C validation issue: "Failure to immediately follow a start-tag with a null end-tag" and similar errors

Encountering validation errors with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...

cssxhtmlw3c-validation

Surprising results when a class is applied using jQuery

Exploring the differences between two fiddles (make sure to run the code on the jsfiddle pages to see the differences clearly). First Fiddle Simple demonstration: $("body").addClass("noScroll"); alert($("body").hasClass("noScroll")); $("body").removeCla ...

javascriptjqueryhtmlcss

Is there a way to position a div on top of the header with flexbox?

I am a beginner in the world of coding and I am currently experimenting with flexbox to create the layout for my website. However, I am facing a challenge where I need to overlay some text and an image on top of the pink rectangular section that is part of ...

htmlcssflexbox

Creating Beautiful Math Equations with LaTeX in EaselJS

Can MathJAX or a similar tool be integrated into an EaselJS DisplayObject? I am looking for alternative options. I want to render text like $$ 5 + 3 - 3 = 5 $$ on a canvas that serves as an EaselJS stage. Ideally, I hope to achieve this using the Text Cl ...

javascripthtmllatexeaseljsmathjax

Showcasing the values of JavaScript

How can I resolve the issue depicted in the second picture? I need the value of 3 only in the USD column, with all others having a value of zero. <div class="span3"> <ul class="nav nav-tabs nav-stacked" > <?php foreach ( ...

javascriptjqueryhtmlmysqlcss

Having trouble displaying images when uploading to a remote server

I recently uploaded my website to a remote server, but I am encountering an issue with viewing the images that I have referenced in the following code block: <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <img src="/C ...

c#htmlasp.net

issue with date filtering in query

I'm currently developing a date and time filter for a database. The goal is to query results only within a specific date range selected by the user in an input field. I've written some code, but it seems like something is missing because it' ...

phphtmlmysql

How can I properly save a PNG image with alpha transparency to be compatible with IE6?

Seeking advice on saving a visually pleasing 1 or 8-bit PNG image that renders well in IE6. Open to suggestions on alternative methods as I have experience with Fireworks but exploring new options. Thank you in advance! ...

cssimageinternet-explorer-6pngalpha-transparency

The art of CSS Absolute Positioning and the Science of Body Sc

I'm trying to position an absolute div in the bottom right corner of a page. .absolute{ position: absolute; right:0; bottom: 0; } While this code works, I've noticed that when scrolling the page, the right/bottom position is relative t ...

csscss-position

Guide to extracting additional data from a JSON array upon selection of a value within an option tag using jQuery

Seeking assistance to enhance the display of museum information when a museum name is selected from an option dropdown box. The data is extracted from a json array. Although I managed to populate the option box with the museum names, I am encountering di ...

javascriptjqueryhtmljson

Obtaining the node generated from a document fragment

Suppose I add a document fragment to the DOM in the following way: const ul = document.querySelector("ul"); const fruits = ["Apple", "Orange", "Banana", "Melon"]; const fragment = new DocumentFragment(); ...

javascripthtml

Wordpress easily adjusts post alignments for a seamless display

Can anyone help me figure out how to properly align posts in Wordpress to match the example image attached? I've tried using inline-block or float with CSS/HTML, but the posts are not aligning correctly. I'm unsure of what this method is called s ...

phphtmlcsswordpressalignment

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. https://i.sstatic.net/o033E.png Below is the code snippet from my HTML fil ...

javascripthtmlangularjssemantic-ui

Why is it that when I store a DOM element reference in a JavaScript Array, I cannot reuse that stored reference to add an event listener

I have a little confusion and I hope someone can help me out. I am facing an issue with dynamically created buttons, where each button has a unique id. To keep track of these buttons in a well-organized manner, I store their references using a simple two-d ...

javascripthtmlarraysdomreference

The input box that accepts color input using the <input type='color'> does not respond to the input event

It seems that there is an issue with the 'input' event when used with addEventListener() in conjunction with a color input box. Here is the HTML code: <input type="color" value="#ff0000" id="colorWell"> <p>Text to be colored</p& ...

javascripthtml

What is the best way to navigate between elements using AJAX?

My experience in Ajax is minimal. I've managed to create two <li> elements with <a> elements inside, each linking to different HTML files. My goal is for clicking on a link to automatically load the corresponding HTML file without refreshi ...

htmljquerycssajax