Company EShot is scrambled when viewed on the iPhone.

Hi all
I have recently been employed with a firm and have the task of creating a weekly Eshot that is to be sent out. I don't have much experience in Dreamweaver and I am seeking your help.
Firstly I have created the page using tables over a background image and centred it all. It looks fine on most browsers on computers. However when I try viewing the EShot on an iPhone it is scrambled. I can't understand why and I included a <div id=wrapper> tag to try and correct the problem and used <div> tags for each section. However they seem to be moving around slightly on seperate browsers and the iPhone moves the tables everywhere.
I would appreciate any help.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>StyleStudio Eshot</title>
<style type="text/css">
body {
    background-image: url(http://www.eclipseblinds.co.uk/media/122036/ss_mainbkgrnd.png);
    background-repeat: no-repeat;
    margin-left:0px;
    margin-top: 0px;
    background-attachment: scroll;
    background-position: center top;
.text-area-1 {
    font-family: Arial, Helvetica, sans-serif;
.text-area-1 {
    font-weight: bold;
.text-area-1 {
    color: #FFF;
    list-style-type: disc;
    line-height: 25px;
    font-style: normal;
    font-size: 16px;
.text-area-2 {
    font-family: Arial, Helvetica, sans-serif;
.text-area-2 {
.text-area-two {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
.text-area-2 {
    color: #FFF;
    font-weight: bold;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: 25px;
.text-area-3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    font-weight: bold;
    font-size: 22px;
    right: 0px;
    position: static;
    line-height: 25px;
.text-area-2 ul li {
    text-align: left;
    line-height: 25px;
.text-area-4 {
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 0px;
    letter-spacing: 0em;
    word-spacing: 0em;
    vertical-align: top;
.text-area-4 {
    color: #FFF;
.text-area-4 {
    font-size: 18px;
.text-area-4 {
    font-size: 14px;
    color: #000;
    line-height: normal;
    word-spacing: normal;
#table1 table tr td ul .text-area-1 .text-area-1 .text-area-1 {
</style>
</head>
<body>
<div id="wrapper">
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<div id="table1">
    <table width="576" height="171" border="0" align="center" cellpadding="5" cellspacing="4">
      <tr>
        <td width="281"> </td>
        <td width="283"><ul>
          <li class="text-area-1"><span class="text-area-1"><span class="text-area-1"><span class="text-area-1"><span class="text-area-1"><span class="text-area-1"><span class="text-area-1">Over 300 Roller Fabrics<br />
          </span></span></span></span></span></span></li>
          <li class="text-area-1">Over 200 Vertical Fabrics</li>
          <li class="text-area-1">Over 90% exclusive to Eclipse</li>
          <li class="text-area-1">Over 80% produced in the UK</li>
          <li class="text-area-1">Available for the iPad</li>
        </ul>    </td>
      </tr>
    </table>
</div>
<p> </p>
<p class="text-area-1"><span class="text-area-2"></span></p>
<p> </p>
<p class="text-area-1"> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
    <div id="table3">
    <table width="604" height="85" border="0" align="center" cellpadding="0" cellspacing="4">
      <tr>
        <td width="19" height="77"> </td>
        <td width="573" class="text-area-2"><ul>
          <li class="text-area-2"><span class="text-area-2"><span class="text-area-2"><span class="text-area-2">ONLINE Interactive Design Space</span></span></span></li>
          <li class="text-area-2">Personalise your wall colour & blinds</li>
          <li class="text-area-2">Roman, Pleated, Roller & Vertical</li>
        </ul>    </td>
      </tr>
      </table>
        <table width="520" height="32" border="0" align="center" cellpadding="0" cellspacing="2">
          <tr>
            <td class="text-area-3">BRING YOUR BLIND TO LIFE</td>
          </tr>
        </table>
    </div>
<table width="700" height="253" border="0" align="center" cellpadding="0" cellspacing="2">
      <tr>
        <td height="249"> </td>
      </tr>
</table>
<div align="center" id="table 3">
<table width="600" height="125" border="0" align="center" cellpadding="0" cellspacing="4">
      <tr>
        <td width="229" height="117"> </td>
        <td width="363" class="text-area-2"><ul>
          <li class="text-area-2">The Sample Room makes choosing<br />
            your fabric even easier.
            <br />
          </li>
          <li class="text-area-2">Order 5 free samples of any fabric.</li>
          <li class="text-area-2">Items dispatched directly to any address.</li>
        </ul></td>
      </tr>
</table>
</div>
<div id="footer">
<table width="700" height="35" border="0" align="center" cellpadding="0" cellspacing="2">
    <tr>
      <td width="50"> </td>
      <td width="601"><a href="http://www.eclipseblinds.co.uk" target="http://www.eclipseblinds.co.uk"><img src="http://www.eclipseblinds.co.uk/media/122045/eclipse_red_web_footer.png" width="600" height="40" alt="footer" /></a></td>
      <td width="41"> </td>
    </tr>
</table>
</div>
</body>
</html>

This may be the first time I have seen an email put together like this - interesting.
When using tables, design view in dreamweaver is actually very accurate, so if it looks a little off there, it's likely to be a little off everywhere. This is maybe the only time when design view is very accurate. Using your code in DW, it's seems to be off.
General HTML email guidelines (a short list):
Use an outer table to contain all the inner tables - much like your div wrapper.
Do not use divs
Do not use embedded CSS unless it's for email client overrides or mobile devices (iphone reads them). Instead use inline CSS styling. http://www.tizag.com/cssT/inline.php
The way you have built the email, using a background image with tables over the top, will NEVER work across all email clients and should be avoided at all costs - in fact, background images themselves don't appear in all email clients. You need to construct your email using sliced images and position the text inside color boxes instead of on a background. Keep in mind that some email clients turn images OFF by default so make sure the structure, and design of your email is kept even without the images.
I have included some resources below to help you get a better understanding of the HTML email side.
Free Templates: http://mailchimp.com/resources/html-email-templates/
http://24ways.org/2009/rock-solid-html-emails
http://kb.mailchimp.com/article/how-to-code-html-emails
http://mailchimp.com/resources/guides/your-first-email-marketing-project/
Rik

Similar Messages

Photo Stream issue. Photo Stream shows 263 photos when viewed on the iMac, 289 when viewed on the iPad and 327 when viewed on the iPhone. How can this be?

Photo Stream issue. Photo Stream shows 263 photos when viewed on the iMac, 289 when viewed on the iPad and 327 when viewed on the iPhone. How can this be? Tried shut down on all devices, reboot and the results are the same.

Photo Stream issue. Photo Stream shows 263 photos when viewed on the iMac, 289 when viewed on the iPad and 327 when viewed on the iPhone. How can this be? Tried shut down on all devices, reboot and the results are the same.

After creating a new slideshow I export it with the setting HD 1080p it is then saved as a .mov i then create a dvd in idvd and the quality is not as good as the original photo's when viewed on the monitor or a TV, am i doing something wrong?

After creating a new slideshow I export it with the setting HD 1080p it is then saved as a .mov i then create a dvd in idvd and the quality is not as good as the original photo's when viewed on the monitor or a TV, am i doing something wrong?

DVD's are only 640 x 480 (interlaced), so yes, the quality is not nearly as good. You should probably create your .mov in DV format to best match the DVD format

My images in my welcome page are different when viewed on the internet!

My images in my welcome template are different when viewed on the internet! After a while they don't change anymore. Isn't this so basic....?

Please provide your url so someone can see what you are talking about.

When viewing forums the cursor placed over the thread title would let me see the first sentence in the thread, now it is just a small blank box........any ideas?? Thx

When viewing forums the cursor placed over the thread title would let me see the first sentence in the thread, now it is just a small blank box........any ideas?? Thx

Yassssss...................that did it............................thank you!!!

When viewing Facebook, the blue menu bar at the top disappears. I can only log out by going to 'Messages' where the menu bar comes back. Any ideas?

When viewing Facebook, the blue menu at the top disappears. I can only log out when I go to messages and the menu returns. Any ideas?

These files were lost two years ago.
That's not consistent with what you wrote in your first message. I can't help you unless I know what's going on. Either you do, or do not, have backups of all the data you want to keep. If you do not, then the first thing you need to do is back up those files. It makes zero sense to do anything else. In order to back up, you'll need either of two things: another Mac, in working order, with a FireWire port and enough space on its internal drive to hold your files; or an external drive, also with enough space.
On the other hand, if you do have backups, or if you simply don't care about any of the data, then the solution to your problem may be quite simple. All you have to do is boot from your installation disc (your profile says you're running Mac OS 10.5), erase your internal drive, reinstall the Mac OS, then restore your data from backup. You will need to be selective in restoring software, because incompatible software may be what caused the issue.
But it's also possible that you have a hardware failure, in which case you can't get your computer working again until it's repaired.

Thin dark line appearing on site when viewed on the ipad and iphone iso 7

When viewed on the iPad my site shows a thin vertical dark gray/black line at the edge of a div.container. It use to appear all the way around the div but I took care of that with height: 100%. When zoomed in 500% it disappears. I've found it can be eliminated by configuring the viewport for mobile and tablet devices. The problem is if I do that my horizontal scroll stops working. I've also tried my best with the suggestion from other websites to use a -3px margin and 3px transparent border. Any help here? Is this the right forum for this kind of question? Why did this begin to happen after iOS 7?? Any chance Apple will correct something like this? I don't appear to be the only person with this problem. Any help would be kind. Cheers!

Can you print using Airprint instead?
--About Apple AirPrint--
Some websites use encryption, especially in situations where credit card information is available. You may want to save the page as a PDF first and then try to print it using ePrint.
Don't forgot to say thanks by giving "Kudos" if I helped solve your problem.
When a solution is found please mark the post that solves your issue.
Every problem has a solution!

When viewing picture on iPhone from iCloud does it download onto my phone

when viewing picture on iPhone from iCloud does it download onto my phone

A download to your HD will use space on your HD. As to the 5gb limit "because of the way iCloud stores your content. Your purchased music, apps, and books, as well as your Photo Stream, don’t count against your free storage."
Read more here: http://www.apple.com/icloud/what-is.html

Menu navigation buttons do not appear when viewing page on iPhone

My webpage shows the menu navigation buttons on all browsers and platforms but when viewing on an iPhone they are not there. Hence you cannot view other pages. Is this a restriction of pages created in iWeb or am I doing something wrong?
I have trawled through the discussion forum and tried tips such as the height of the menu bar from the top on the page, pixel width and making sure the menu box is at the front or brought forward.
my website is www.sussexgolfcaptains.org

This may or may not be of interest, but some site builders (such as weebly.com) are mobile friendly — click here:
http://blog.weebly.com/2/post/2010/12/your-websites-are-now-mobile-friendly.html http://blog.weebly.com/2/post/2010/12/your-websites-are-now-mobile-friendly.html
Also, unlike sites made with iWeb, Weebly sites respond to desktop Safari's +View > Zoom In+ command — this is helpful for many who don't have perfect eyesight for reading small text. (iWeb's default font sizes are relatively small.)

I can record voice memos fine using the built-in iPhone 4 mic. And my Bluetooth headset (Jawbone Era) works fine when I leave messages on voice mail systems etc. when calling on the iPhone 4. However, I cannot record voice memos with my Bluetooth mic.

I can record voice memos fine using the built-in iPhone 4 mic. And my Bluetooth headset (Jawbone Era) works fine when I leave messages on voice mail systems etc. when calling on the iPhone 4, so it appears my headset mic is fine. I can also use voice activated dialing, although it fails miserably interpreting numbers. However, I cannot record voice memos with my Bluetooth mic. I just get barely audible static. Any suggestions? Thanks.

Hello, did you ever get an answer to your question? I just picked up a Jawbone Era and using on an iPhone 4s running 5.0.1. Seems to work fine on regular calls, but not on the built in Voice memos application. It worked fine on my older Jawbone Icon, but haven't tested on the 4s or iOS 5.
Thanks!

How do you delete songs that you purchased through iTunes but don't show up when you connect the iphone to iTunes they don't show up in music when you click on "On this phone"? I have my phone setup to manually manage music. Please help.

How do you delete songs that you purchased through iTunes but don't show up when you connect the iphone to iTunes? They don't show up in the music section when you click on "On this phone". Side Note: I have my phone setup to manually manage music. Please help.

Hi, Mrs.Frankie57.
Thank you for visiting Apple Support Communities.
If you want to delete a song from your iOS device on iOS 7, tap Songs, swipe the song from right to left, then tap Delete. The song is deleted from iPhone, but not from your iTunes library on your Mac or PC, or from iCloud.
iPhone User Guide
Cheers,
Jason H.

After upgrading to iOS 5 my music crash when i turn the iphone vertical to horizontal !!

after upgrading to iOS 5 my music crash when i turn the iphone vertical to horizontal !!

I am having this same issue.

My iphone 5 is not powering the scree, when i connect the iphone to the power it only vibrates

my iphone 5 is not powering the scree, when i connect the iphone to the power it only vibrates o make the connect sound (is like the sound when you connect the phone to power) and the screen remains black, itunes recognizes the iphone, but i cannot do a hard reset because the power button does not work, and have password in my phone so itunes wond restore it. i want to know if is a hardware problem like the mother board o something. help please

If you have iOS 7 installed, you can try to restore it via the instructions given by lllaass in https://discussions.apple.com/thread/5634135
As an alternative, you could take it to an Apple store genius bar and have the techs test it and see what is wrong beyond the failed power button.

I have a problem when you update the iPhone

I have a problem when you update the iPhone does not complete the update and the bar that appears in the top of iTunes (restoring iphone software)

Hello After upgrading iPhoto 9.1.2 when you synchronize the iphone / iphoto ipad events are not copied correctly (this option checked all the photos on itunes).

Hello
After upgrading iPhoto 9.1.2 when you synchronize the iphone / iphoto ipad events are not copied correctly (this option checked all the photos on itunes).

I found this other thread discussing this topic, no fix, I will revert to 9.1.1 from Time Machine and wait for a new update.
https://discussions.apple.com/thread/3023160?

Company EShot is scrambled when viewed on the iPhone.

Similar Messages

Maybe you are looking for