div should not be on top of another div on iPhone

StackOverflow https://stackoverflow.com/questions/23569258

  •  19-07-2023
  •  | 
  •  

Domanda

I've created an html email that's showing up almost perfectly across a bunch of email clients, but it's glitching on iPhone and I have no idea what's wrong. Here's the code:

<html>
<head>
<title>PCI Compliance Update</title>
</head>
<body>
<!-- Wrapper -->
<div style="text-align: center; height: 100%, width: 100%">
    <div style="position: relative; display: block; margin-right: auto; margin-left: auto; width: 580px;">
        <img src="http://www.total-partnership.com/email/PCI/brands/email_graphics/PCIheader.jpg" width="580" alt="PCI Colorado">
    </div>
    <div style="position: relative; display: block; margin-right: auto; margin-left: auto; text-align: center; width: 420px;">
        <p style="font-size: 20px">We are offering all Colorado Dental Practices a <a style="color: #bd0d2d" href="https://www.pcihipaa.com/free-risk-assessment-3/">Free Risk Assessment</a> ($599 value)</p>
        <p style="font-size: 20px">See why 1000's of Dental Practices have taken our Free Risk Assessment</p>
    </div>
    <div style="position: relative; display: block; margin-right: auto; margin-left: auto; width: 580px;">
        <img src="http://www.total-partnership.com/email/PCI/brands/email_graphics/PCIvideo.jpg" width="580" alt="PCI Colorado" usemap="#PCImap1">

        <map name="PCImap1">
        <area shape="rect" coords="124,233,468,306" href="https://www.pcihipaa.com/free-risk-assessment-3/" alt="Risk Assessment Button" target="_blank">
        <area shape="rect" coords="228,110,355,178" href="https://www.youtube.com/watch?v=YGb9CFoDAzY&noredirect=1" alt="Youtube Link" target="_blank">
        </map>
    </div>
    <div style="position: relative; display: block; margin-right: auto; margin-left: auto; width: 580px;">
        <img src="http://www.total-partnership.com/email/PCI/brands/email_graphics/PCIbottom.jpg" width="580" alt="PCI Colorado" usemap="#PCImap2">

        <map name="PCImap2">
        <area shape="rect" coords="390,102,418,128" href="https://www.facebook.com/pcihipaacompliance" alt="Share on Facebook" target="_blank">
        <area shape="rect" coords="427,102,455,128" href="https://twitter.com/_PCIHIPAA" alt="Share on Twitter" target="_blank">
        <area shape="rect" coords="464,102,493,128" href="https://www.linkedin.com/company/pci-hipaa?report%2Esuccess=KJ_KkFGTDCfMt-A7wV3Fn9Yvgwr02Kd6AZHGx4bQCDiP6-2rfP2oxyVoEQiPrcAQ7Bf" alt="Share on LinkedIn" target="_blank">
        <area shape="rect" coords="502,102,529,128" href="mailto:?subject=HIPAA Compliance3&amp;body=Thought this would be helpful to your business. https://www.pcihipaa.com/free-risk-assessment-3/" alt="Share through email" target="_blank">
        <area shape="rect" coords="186,191,399,244" href="https://www.pcihipaa.com/" alt="PCIHIPAA" target="_blank">
        <area shape="rect" coords="244,258,289,286" href="http://www.hhs.gov/ocr/privacy/" alt="HIPAA" target="_blank">
        <area shape="rect" coords="298,263,356,283" href="http://www.hipaaacademy.net/credential-offerings/certified-security-compliance-specialist/" alt="CSCS" target="_blank">
        </map>
    </div>
</div>

I don't have enough reputation to post an image of the problem, but here's a link to it... http://www.total-partnership.com/email/PCI/brands/email_graphics/image.png

I appreciate any help you can give me!

È stato utile?

Soluzione

Removing the position:relative in your second div solve your problem

<div style="display: block; margin-right: auto; margin-left: auto; text-align: center; width: 420px;">
        <p style="font-size: 20px">We are offering all Colorado Dental Practices a <a style="color: #bd0d2d" href="https://www.pcihipaa.com/free-risk-assessment-3/">Free Risk Assessment</a> ($599 value)</p>
        <p style="font-size: 20px">See why 1000's of Dental Practices have taken our Free Risk Assessment</p>
</div>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top