Fluid layout on iPhone

Hello,

Maybe someone can help. I have a really simple layout which is fluid. Works fine in iPhone until I wrap some of the text in any inline tag such as span for styling purposes.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Enigma</title>
<style>
body {background-color:#e4e4e4;margin:0;padding:0;width:100%} 
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#e4e4e4">
<table width="100%" border="0" cellspacing="0" cellpadding="25">
<tr>
<td width="100%" bgcolor="#414143" style="color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;text-align:left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <span style="color:#f065a5;">eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
</tr>
</table>
</td>
</tr>
</table>                       
</body>
</html>

Have I missed something?

Any help, much appreciated.

Thanks.

jamesashcroft, 5 years ago

Just to add, the issue I am getting is that the table doesn't span 100%, but it looks as if it only spans as far about 90%, with the presence of the span tag around the text. If I remove the span tag then it does span the 100%.

jamesashcroft, 5 years ago

I've answered my own question... I removed margin:0;padding:0;width:100% off of the body. I'll just have to live with it not spanning to the hard edge

roshodgekiss roshodgekiss, 5 years ago

Hi James, thanks for letting us know your fix here. If you're feeling really adventurous, you can try:

<meta name="viewport" content="width=device-width" />
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">

See this article on iPhone development for a bit of context. Problem may be that the body's width:100% isn't agreeing with the iPhone viewport's definition of 100% width. Alternately, pop the margin:0;padding:0; back in and see if that removes the margin somewhat.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098