Home/ Questions/Q 7739031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:25:07+00:00

I wrote HTML to create the content shown in the image below on Safari

  • 0

I wrote HTML to create the content shown in the image below on Safari on iPad. I use relative, positioning, specifying pixels to position the text and images and the size of the overall background and border. However, when this HTML is rendered on Safari for Mac and iPhone, the image position is different and on iPhone, the background and border no longer encapsulates the content.

Any pointers on how to amend my HTML to ensure that at the very least, the rendering is correct on Safari for Mac and iOS would be greatly appreciated please!

My current HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head></head><body><div><p><br /></p></div><div style="border-style:solid;border-width:2px;border-color:rgb(0,0,0);background-color:rgb(255,232,0);width:302px;height:185px"><img style="position:relative;z-index:100;left:126px; top:39px;" src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="image"/><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: -123px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>John</b></p><br /><br /><br /><br /><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: 0px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>XYZ Company</b></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></body></html>

This is the content generated as rendered correctly by the HTML above on an iPad:

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should work:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Render this</title>
    <style type="text/css">
        div, p {
            margin:0;
            padding:0;
            font-family: Helvetica;
            font-size:14px;
            color:#000;
            font-weight:bold;
        }
        div.box {
            padding:15px;
            width:272px;
            height:155px;
            border:2px solid #000;
            background-color:rgb(255,232,0);
        }
        div.box div.inner {
            height:100%;
            background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
        }
        p.name {
            margin-bottom:65px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            <p class="name">John</p>
            <p>XYZ Company</p>
        </div>
    </div>
</body>
</html>

    You could also try using this example(html 4 transitional dtd):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Render this</title>
</head>
<body>
    <div style="margin:0;padding:15px; width:272px; border:2px solid #000;background-color:rgb(255,232,0);display: table-cell;vertical-align:middle;">
        <p style="margin:0;padding:0;font-family: Helvetica;font-size:14px;color:#000;font-weight:bold;">John</p>
        <div style="margin:0;padding:0;font-family: Helvetica;font-size:14px;color:#000;font-weight:bold;display:table;vertical-align:middle;"><span style="margin:0;padding:0;width:110px;display:inline-block;vertical-align:middle;">XYZ Company</span><img style="margin:0;padding:0;width:162px;vertical-align:middle;" src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="image"></div>
    </div>
</body>
</html>
    • 0