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, 6 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, 6 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, 6 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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free