HTML that will render correctly across major browsers and screen sizes iPhone and larger

Question

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

you did not define what you mean with "works across all browser and screen resolutions". You probably can't, therefore you have to set more realistic goals. (What should happen on a 5cm by 3 cm screen?, crop, zoom, ...) — stefan bachert, Mar 31 '12 at 12:53
Isn't this the Holy Grail of www coding? Flash would be one way to go but even still – in all browsers and all resolutions... Not gonna happen. (And Flash isn't a way to go in any case IMHO...) — ZZ-bb, Mar 31 '12 at 13:18
Definitely impossible, yes. That said, since `cm` is a valid CSS unit, I fail to see what the problem is. Where does it go wrong? Where do you get stuck? What part of your HTML do you need help with? — Mr Lister, Mar 31 '12 at 13:31
Apologies, I should have been more specific. At the moment, my HTML is displaying fine on an iPad, slightly differently on Safari on a mac and very differently on an iPhone. The major differences are the positioning of the image and the fact that the border and background no longer encapsulates the content. I have updated the question with my HTML and also the pic of what the end result should look like. — RunLoop, Mar 31 '12 at 14:53
To achieve consistent layouts throughout all Media Devices and Browsers. I would suggest that you make use of Media Queries and responsive / fluid layouts. For example, using % instead of PX, also for iPhone and some other devices there are specific viewport META tags that can be used. — khollenbeck, Apr 01 '12 at 21:38
@Kris Thank you. I am a bit strained for time so will put a bounty of 200 on this one for the person who provides the HTML which will render the content as shown in the image above correctly on iPad, iPhone and Mac. Please check back in 7 hours when I can add the bounty. — RunLoop, Apr 02 '12 at 05:31
@RunLoop, I just want to make sure. Is the HTML posted above all of the HTML in which you are using? — khollenbeck, Apr 02 '12 at 15:30
My dumb question from the peanut gallery: have you considered using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics)? This is literally the stock-standard solution to your problem, and current support is quite good now in all major browsers. — MrGomez, Apr 03 '12 at 00:27
@MrGomez it seems it may be possible, and if you show the SVG (embedded in HTML as I have to include content in iOS in an email either as text or HTML) to render the content above (please note positioning) I will award to bounty to you. http://stackoverflow.com/questions/5388349/including-svg-in-html5-for-ios & http://stackoverflow.com/questions/7576548/display-svg-in-ios-browser-using-html-without-the-use-of-the-embed-tag — RunLoop, Apr 03 '12 at 00:43
@RunLoop Done, to the best of my abilities. I'm flummoxed on a good SVG upload source (SO doesn't support it as an image format and the linkthroughs fail in Chrome), but I've provided the source and how I created it. :) — MrGomez, Apr 03 '12 at 00:48
@RunLoop In including the source code, see the caveats and notes mentioned in those threads. You _should_ be able to use `` or `` to complete your needs, but if they prove intractable, the inline and CSS examples they provide should do the trick. — MrGomez, Apr 03 '12 at 01:02

score 5 · Answer 1 · edited May 23 '17 at 12:13

My knee-jerk reaction would be to use SVG. Exploding your example:

<!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>

Ow. Don't do this. We can help.

Doing this properly, we get something like this:

<?xml version="1.0"?>
<svg width="407" height="263" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="svg_2" height="262.999995" width="406.999984" y="-0.000003" x="-0.000005" stroke="#000000" fill="#ffff00"/>
  <image fill="#000000" xlink:href="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" id="svg_3" height="170.000002" width="208.999986" y="64.999977" x="186.999985"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_4" y="41.999977" x="52.999985" stroke-width="0" stroke="#000000" fill="#000000">John</text>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_5" y="193.999977" x="97.999985" stroke-width="0" stroke="#000000" fill="#000000">XYZ Company</text>
 </g>
</svg>

If your browser supports inline Base64 encoding, you can drop this into the URL line to see what I did there (this works in Chrome):

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjQwNyIgaGVpZ2h0PSIyNjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogPCEtLSBDcmVhdGVkIHdpdGggU1ZHLWVkaXQgLSBodHRwOi8vc3ZnLWVkaXQuZ29vZ2xlY29kZS5jb20vIC0tPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMiIgaGVpZ2h0PSIyNjIuOTk5OTk1IiB3aWR0aD0iNDA2Ljk5OTk4NCIgeT0iLTAuMDAwMDAzIiB4PSItMC4wMDAwMDUiIHN0cm9rZT0iIzAwMDAwMCIgZmlsbD0iI2ZmZmYwMCIvPgogIDxpbWFnZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSJodHRwczovL3MzLmFtYXpvbmF3cy5jb20vc2lnbm9mZm1haW5idWNrZXQvOENBOEVDMUEtQzFDNS00MzkwLTlGQzQtNjQ5NjQ4QUEyNkM4LmpwZyIgaWQ9InN2Z18zIiBoZWlnaHQ9IjE3MC4wMDAwMDIiIHdpZHRoPSIyMDguOTk5OTg2IiB5PSI2NC45OTk5NzciIHg9IjE4Ni45OTk5ODUiLz4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfNCIgeT0iNDEuOTk5OTc3IiB4PSI1Mi45OTk5ODUiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSIjMDAwMDAwIj5Kb2huPC90ZXh0PgogIDx0ZXh0IHhtbDpzcGFjZT0icHJlc2VydmUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJzZXJpZiIgZm9udC1zaXplPSIyNCIgaWQ9InN2Z181IiB5PSIxOTMuOTk5OTc3IiB4PSI5Ny45OTk5ODUiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSIjMDAwMDAwIj5YWVogQ29tcGFueTwvdGV4dD4KIDwvZz4KPC9zdmc+

Obviously, browser URL line copypasta is suboptimal. I heartily support someone updating my answer once SO supports SVG as an image format, because I lack a convenient webhost for SVG that can handle the load.

As for everywhere else, here's how you can embed an SVG file in your page. But, as you've mentioned, there are additional ways to do this.

Time from bounty start to initial answer: 20 minutes and 9 seconds. The bounty hunter strikes again! — blahdiblah, Apr 03 '12 at 02:20
@blahdiblah Ironically, it's just what came up in my "Interesting" tab when I happened to be browsing around. I think the algorithms underpinning the site are on to me. — MrGomez, Apr 03 '12 at 02:28
@MrGomez, sorry I have not come back to you. I accepted the other answer because it uses plain HTML. However, I am going to try and implement your answer too and if it works will transfer 100 points to you too. — RunLoop, Apr 05 '12 at 16:12

branduren · Accepted Answer · 2012-04-05T18:21:24.663

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>

Thank you - this works without flaw on Mac Mail and iOS devices as well as iCloud's website. Unfortunately it does not render properly in Outlook 2010, but as that was not part of the brief, you still get the bounty! If you do have any suggestions re getting it to render correctly in Outlook, that would be greatly appreciated please. — RunLoop, Apr 05 '12 at 11:40
For some reason the image does not download in Outlook using your HTML, but does download when using the HTML I posted in my question. — RunLoop, Apr 05 '12 at 11:43
100 extra points if you can get this to work in Outlook 2010 as well please :) — RunLoop, Apr 05 '12 at 16:24
I don't have Outlook installed on any of my machines at the moment, so I'm not able to test my code using outlook. But I have updated my post anyway and added another example. I just assume it works since the code has been validated. I'll keep my fingers crossed. :) — branduren, Apr 05 '12 at 18:22

HTML that will render correctly across major browsers and screen sizes iPhone and larger

2 Answers2