Layout Looks Different from Dreamweaver to Email?

I am currently using Adobe Dreamweaver CS5 to create emails for my work. Last month I started having an issue where the 3 columns I have in the template would look even in Dreamweaver, but when I sent a test email to myself they looked completely off. This past week I have encountered another issue where the cellpadding of the email looks different from Dreamweaver to email. I am new to HTML and coding so it could just be me, but is anyone having a similar problem and if so, is there a way to fix it?

Nancy-O posted this recently. You might find it helpful.
Martin
http://alt-web.com/Articles/HTML-Emails.shtml
Achieving consistent results across email clients is not as straightforward as it should be!

Similar Messages

HELP! Dreamweaver layout looks different from Live site

I decided to upload what I have so for this website I am working on for a friend. For some reason its not looking the way its suppose to. Much help is greatly appreciated.
shizzycouture.com
Im not sure what to change since it looks good through dreamweaver. I am currently using the latest version of firefox

Yes, Im sure it is on the server. There was nothing on the server till I uploaded it. I am currently running DreamWeaver CS4 as well.
This is the code from index.html file in DreamWeaver:
<!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>Untitled Document</title>
<style type="text/css">

</style></head>
<body class="twoColLiqLtHdr">
<div id="container">
<div id="header">
    <div class="paypal" id="paypal"></div>
    <span class="paypal"><a href="https://www.paypal.com/us/verified/[email protected]" target="_blank"><img src="images/Logo_Paypal.jpg" alt="Official PayPal Seal" border="0" /><br />
    </a><strong>We Accept PayPal</strong></span><br /><img src="images/logotest.JPG" width="600" height="290" />
</div>
<div id="header2"><hr /><img src="images/links/home.gif" width="100" height="52" /><img src="images/links/aboutus.gif" width="100" height="52" /><img src="images/links/contactus.gif" width="100" height="52" /><img src="images/links/shipping.gif" width="100" height="52" /><img src="images/links/sizing.gif" width="100" height="50" /><hr /></div>
<div id="sidebar1">
<p><a href="bellybands.html"><center><img src="images/bellybands.gif" width="124" height="122" border="0" align="middle" /></center></a></p>
<p><a href="dresses.html"><center><img src="images/dresses.gif" width="124" height="122" border="0" /></center></a></p>
<p><a href="diapers.html"><center><img src="images/diapers.gif" width="124" height="122" border="0" /></center></a></p>
<p><a href="leashes.html"><center><img src="images/leashes.gif" width="124" height="122" border="0" /></center></a></p>
<p><a href="hats.html"><center><img src="images/hats.gif" width="124" height="122" border="0" /></center></a></p>
<p><a href="costumes.html"><center><img src="images/costumes.JPG" width="124" height="122" border="0" /></center></a></p>
<a href="harnesses.html"><center><img src="images/harnesses.gif" width="124" height="122" border="0" /></center></a>
</div><center>
<p><strong><em>Our Line of Products</em></strong></p>
<table width="600" border="0" cellpadding="2" cellspacing="2">
    <tr>
      <td align="center"><p><strong>Belly Bands</strong></p>
      <p><a href="bellybands.html"><img src="images/bellybands/belllybandssmall.jpg" width="200" height="149" border="0" /></a></p></td>
      <td align="center"><p><strong>Dresses</strong></p>
      <p><img src="images/dresses/lefemme fatalesmall.jpg" width="200" height="166" /></p></td>
      <td align="center"><p><strong>Diapers</strong></p>
      <p><img src="images/diapers/paws01bsmall.jpg" width="200" height="165" /></p></td>
    </tr>
    <tr>
      <td align="center"><p><strong>Costumes</strong></p>
      <p><img src="images/costumes/poppy fairysmall.jpg" width="200" height="165" /></p></td>
      <td align="center"><p><strong>Harnesses</strong></p>
      <p><img src="images/harnesses/reversible 01small.jpg" width="200" height="147" /></p></td>
      <td align="center"><p><strong>Leashes</strong></p>
      <p>Coming Soon</p></td>
    </tr>
    <tr>
      <td align="center"><p><strong>Hats</strong></p>
      <p>Coming Soon</p></td>
      <td align="center"><strong>More to come soon!</strong></td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
</table></center>
<p><br class="clearfloat" />
</p>
<div id="footer"><hr />
    <div align="center">
      <p>Shizzy Couture © 2010 All Rights Reserved </p>
    </div>
</div>
</div>
</body>
</html>

Why is my DW layout looking different from the browsers? So confused...

Hi guys,
I've been successfully struggling through my first attempt at building a website using Fireworks and DW CS4. What has been puzzling me is that how the site looks in DW is not how it looks in my browser. Oddly enough, all the browsers are displaying exactly what I want (so far), but in the DW layout, some of my images are overlapping. It's as if I have to get them almost on top of each other just so they can appear close together in browsers.
This is making it somewhat tough to add my hyperlinks to images that are underneath the other ones and I am worried that I am doing something wrong. I posted pictures of both the DW layout and what is showing up in the browsers I have checked (Firefox, Safari and Internet Explorer all look the same). Note: The first pic on top is displaying in Firefox, the second pic beneath in the layout in DW.
Thanks a million in advance

#1 Design View is the result of your underlying HTML & CSS code. At best it's an approximation of what you can expect to see in browsers. For best results, work in Split View or Code View. Use Live View & Preview in browsers to test your layout.
#2 DW is not click & drag like your graphics apps. If you're trying to work this way, you'll have poor results.
#3 Fireworks is great for creating web images & comps. It's not so great at generating HTML code. Use DW to build your page layout. If you're new to web design, it's much easier to start projects with a pre-built CSS Layout. See DW Starter Pages below.
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Hope this helps,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Page that is uploaded to the server looks different from the preview in Dreamweaver browser

Hi, I have a couple of questions. Does anyone happen to know why my homepage looks different in Dreamweaver when I preview in browser then it does when I upload the page onto the server? http://www.iewaterkeeper.org/ I see a join our mailing list button is intact when I preview in browser but is no where to be found when I view the uploaded page from the server. Other weird things have been going on with Dreamweaver today like I wasn't able to absolute position a div tag in it's intended place and all the typography on my homepage looks very blurry in Dreamweaver but looks clearer when it's uploaded to the server. Does anyone know what's going on? Any help would be greatly appreciated. .... Could it be a virus?

That's so weird because I'm looking at the code in Dreamweaver and line 181 has a closing </body>.   Here's the code straight from Dreamweaver:
<!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>Inland Empire Waterkeeper</title>
<link href="_css/styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
    color: #999999;
    font-family: Verdana, Geneva, sans-serif;
body {
    background-color: #FFFFFF;
    color: #D6D6D6;
    background-image: url(_images/background_1255hompage.png);
    background-repeat: repeat-x;
    margin: auto;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container">
<div class="header"><img src="_images/banner1.jpg" alt="Inland Empire Waterkeeper" width="933" height="300" /></div>
<div class="menubar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html" class="MenuBarItemSubmenu">Home</a>
        <ul>
          <li><a href="mission.html" class="MenuBarItemSubmenu">About Us</a>
            <ul>
              <li><a href="mission.html">Our Mission</a></li>
              <li><a href="history.html">Our History</a></li>
              <li><a href="community.html">Our Community</a></li>
            </ul>
          </li>
          <li><a href="staff.html" class="MenuBarItemSubmenu">Our Team</a>
            <ul>
              <li><a href="staff.html">Staff</a></li>
              <li><a href="supporters.html">Supporters</a></li>
              <li><a href="advisoryboard.html">Advisory Board</a></li>
            </ul>
          </li>
          <li><a href="coastkeeper.html">Coastkeeper</a></li>
        </ul>
      </li>
      <li><a href="projects.html" class="MenuBarItemSubmenu">What We Do</a>
        <ul>
          <li><a href="advocacy.html" class="MenuBarItemSubmenu">Programs</a>
            <ul>
              <li><a href="advocacy.html">Advocacy</a></li>
              <li><a href="education.html">Education</a></li>
              <li><a href="research.html">Research</a></li>
              <li><a href="restoration.html">Restoration</a></li>
              <li><a href="enforcement.html">Enforcement</a></li>
            </ul>
          </li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="datareports.html">Data & Reports</a></li>
        </ul>
      </li>
      <li><a href="volunteer.html" class="MenuBarItemSubmenu">Get Involved</a>
        <ul>
          <li><a href="volunteer.html">Volunteer</a></li>
          <li><a href="employment.html">Employment</a></li>
          <li><a href="events.html">Events & Meetings</a></li>
          <li><a href="donate.html">Donate</a></li>
        </ul>
      </li>
      <li><a href="pressreleases.html" class="MenuBarItemSubmenu">News Room</a>
        <ul>
          <li><a href="pressrelease.html">In the News and Press Releases</a></li>
          <li><a href="legislation.html">Legislative Updates</a></li>
          <li><a href="waternews.html">Water in the News</a></li>
        </ul>
      </li>
      <li><a href="reportpollution.html" class="MenuBarItemSubmenu">Resources</a>
        <ul>
          <li><a href="watershed.html" class="MenuBarItemSubmenu">Information</a>
            <ul>
              <li><a href="watershed.html">Our Watershed</a></li>
              <li><a href="reportpollution.html">Report Pollution</a></li>
            </ul>
          </li>
          <li><a href="photos.html">Photo Gallery</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>
    <div class="missionstatement"><img src="_images/mssionstatement.gif" alt="Inland Empire Waterkeeper" width="933" height="110" /></div>
<div class="space1"><img src="_images/bar_left.png" alt="Inland Empire Waterkeeper" width="20" height="315" /></div>
<div class="facebook">
      <div class="facebooktop">
      <img src="_images/facebooktop.gif" width="106" height="125" alt="Inland Empire Waterkeeper" /></div>
    <div class="facebookmailinglist">
    <div class="fb-like" data-href="http://www.iewaterkeeper.org/" data-send="true" data-width="106" data-show-faces="false"></div>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_tl_gray.gif" width="6" height="6" alt=""></td>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_top_gray.gif"> </td>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_tr_gray.gif" width="6" height="6" alt=""></td>
</tr>
<tr>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_left_gray.gif"></td>
<td bgcolor="#cccccc"><a href="http://visitor.r20.constantcontact.com/d.jsp?llr=wejp69bab&p=oi&m=1101488694422" target="_blank" style="text-decoration:none; font-weight: bold; font-family:Arial; font-size:10px; color:#336666;">Join Our Email List</a></td>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_right_gray.gif"></td>
</tr>
<tr>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bl_gray.gif" width="6" height="6" alt=""></td>
<td background="https://imgssl.constantcontact.com/ui/images/visitor/bevel_bg_bottom_gray.gif"> </td>
<td><img src="https://imgssl.constantcontact.com/ui/images/visitor/bevel_br_gray.gif" width="6" height="6" alt=""></td>
</tr>
</table>
</div>

    </div>
    <div class="space2"><img src="_images/bar_right.png" width="21" height="315" alt="Inland Empire Waterkeeper" /></div>
   <div class="video"><iframe width="560" height="315" src="http://www.youtube.com/embed/3OU8D8kBjWg" frameborder="0" allowfullscreen></iframe></div>
    <div class="space3"></div>
    <div class="photospace1"></div>
    <div class="photo1"><a href="_images/kayaking_6lg.png"><img src="_images/kayaking_6.jpg" alt="Inland Empire Waterkeeper" width="176" height="95" /></a></div>
    <div class="photospace2"></div>
    <div class="photo2"><a href="_images/riverkat_57lg.png"><img src="_images/riverkat_57.jpg" width="176" height="95" alt="Inland Empire Waterkeeper" /></a></div>
    <div class="photospace3"></div>
    <div class="photo3"><a href="_images/riverkat_172lg.png"><img src="_images/riverkat_172.jpg" width="176" height="95" alt="Inland Empire Waterkeeper" /></a></div>
    <div class="photospace4"></div>
    <div class="space4"></div>
<div class="pillars"><img src="_images/pillars_grey.jpg" alt="Inland Empire Waterkeeper Pillars" width="933" height="400" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="77,54,297,198" href="advocacy.html" alt="Inland Empire Waterkeeper Advocacy" />
      <area shape="rect" coords="361,51,584,195" href="education.html" alt="Inland Empire Waterkeeper Education" />
      <area shape="rect" coords="636,54,858,196" href="research.html" alt="Inland Empire Waterkeeper Research" />
      <area shape="rect" coords="212,220,430,352" href="restoration.html" alt="Inland Empire Waterkeeper Restoration" />
      <area shape="rect" coords="502,222,726,364" href="enforcement.html" alt="Inland Empire Waterkeeper Enforcement" />
    </map>
</div>
<div class="footer"><img src="_images/footer2.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Print layout is different from the working view.

I got two calendars in iCal, marked with red and green. I always make the green ones as the first one on everyday and the red ones as the second. However, when I printed the scheduled month, some red ones were in the upper positions and it looked different from my screen.
How can I make all the green ones as the first event in the printed version.

You can make objects visible only on the screen by selecting Object => Presence => Visible (Screen Only). You can do the same for printing by selecting the Visible (Print Only) option.
Hope this helps,
Mike

Why do my Organizer & Editor pages look different from those in books and the brochure that came?

Why do my Organizer and Editor screens look different from the ones in books and in the brochure that came with installation cd?

Which version of the photoshop elements are you using.
You can get the help files of the latest version of photoshop elements 11 from the following link:
http://helpx.adobe.com/photoshop-elements.html
Thanks
Harshit yadav

HT204053 My apple id is different from my current email . I can't get icloud support

My apple id is different from my current email . I can't get icloud support

I don't have any suggestions that will help you resolve this issue other than to try posting here where there should be more iCloud experts.
https://discussions.apple.com/community/icloud/icloud_on_my_ios_device
Or contact Apple and ask for their help with this. Try here. I think Account and Setup would be the starting point.
https://getsupport.apple.com/Issues.action

My firefox home page looks different from your tutorial

I am trying to learn to use firefox. Sometimes the firefox home page looks different from the one in your tutorial. Fox example, now I am looking above and the "plus sign" symbol to add a new tab is not there. Please advise me. Thank you.

You can find the New Tab button showing as a '+' on the Tab bar.
You can open the Customize window and drag the New Tab button that shows as a plus sign (+) from the Tab bar on another toolbar and it will become a regular toolbar button like the New Tab button that you have in Firefox 3 versions.
If you can't find the New Tab button then click the "Restore Default Set" button in the Customize window.
*http://kb.mozillazine.org/Corrupt_localstore.rdf
If you want the New Tab button at the far right end of the Tab bar then place a flexible space to the left of it.
* New tab toolbar button: https://addons.mozilla.org/firefox/addon/new-tab-toolbar-button/

HT5930 Why does my Aperture v3.5.i look different from the one shown in the online videos

Why does my Aperture v3.5.i look different from the one shown in the online videos

Are you asking about the colorful icons in the video?
The video must have been done with an Aperture version 3.2.4 or earlier. Since Aperture 3.3 are the icons drab and gray - the Aperture 3.3 Release Notes are calling this:
Newly designed monochrome source list and toolbar icons.
The Release notes will tell you, what has changed since then:
http://support.apple.com/kb/TS2518
--Léonie

Dialog Programing: Output screen layout is different from actaul layout

Hi,
I have developed screen layout in SE51 and same is used in my program.Program is working fine but the problem is in column order.I designed layout in SE51 by copying structure from ABAP dictionary and same has been used in my program but output layout column order is completely different from SE51 screen layout.When i check this on Se51,everything is in order.
My program is referring the same screen number and program.there is only one screen i.e 100.
How do we fix this problem.
Regards,

Looks like, your table settings got changed for the table control on the screen.
Run your program.
Now, on the screen you can find out the "Table Settings" in the Top Right corner of the Table control as ICON.
Press the Icon and it will bring the Table Settings screen.
In the Current Settings, choose the Basic Settings ... save and close.
Regards,
Naimesh Patel

Layouts looking 'right' in Dreamweaver

Hi all, I seem to have this reoccurring problem, when I
design layouts, I get them the way I want they look great in
IE/Firefox but when working on them in Dreamweaver the layout looks
messy and sometimes quite hard to work with.... I attach my CSS and
XHTML, just to make sure i'm not designing it wrong...
Thanks for any help in advance

> That's a common IE hack
It's not one I would ever use. It's way too fiddly and
complex.
I just use good CSS technique to produce code that doesn't
need to be
hacked. Check the uberlink and MacFly tutorials at PVII -
http://www.projectseven.com/
and the Navbar tutorial/articles at Thierry's place
http://tjkdesign.com/articles/dropdown/
Or this one (more recent article):
http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp
Or to get it done fast, go here -
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
> layout goes completely wild in DW
The most common cause for this is the use of negative
margins, nested
floats, or float clearing methods that aren't supported by
DW's design view
(e.g., 'overflow:hidden', or those using the content style).
> Perhaps it's got to do with the fact I've used a SSI to
insert the Spry
> nav bar in every page, that wouldn't show up on the
source code when you
> view the page online.
I doubt it. But I didn't go through your page to see what it
might be....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"polarl light" <[email protected]> wrote in message
news:[email protected]...
>
>> No doubt DW is confused by this goofiness -
>>
>> <li><a href="#">Home</a>
>> 
>
> That's a common IE hack, often found in free CSS based
templates. I have
> used them too and the above doesn't look too bad in DW,
it only makes the
> text in the nav bar look a bit funny in design view.
>
> However, I have other pages where the above hack hasn't
been used, yet the
> layout goes completely wild in DW but looks OK on most
browsers, even on
> exotic ones (I've used browsershots to check the pages)
>
>
http://www.hunalp.co.uk/retail/products/forty.shtml
>
> The table with the products goes off on its own in DW
yet it shows up fine
> on 20 browsers/versions. IE5.01 & 5.5 do not seem to
recognize the Srpy
> collapsing panel and just show it fully open but the
table still looks
> fine, yet it's completely messed up in DW design view.
Perhaps it's got to
> do with the fact I've used a SSI to insert the Spry nav
bar in every page,
> that wouldn't show up on the source code when you view
the page online.
>

Very frustrated - spent days - fireworks layout looks pooh in dreamweaver ! HELP

Hi
I hope someone can help as I originally made a basic web page in dreamweaver using a very good site that did it step by step. Encouraged I bought Web Premium CS4 and Photoshop elements. Then I came across Fireworks in the package and after looking on the web was excite that I could make an even better site.
Now I am just sooooo frustrated. I have made a great looking site for a friend, that when previewed in Fireworks looks brilliant. I exported to Dreamweaver so that I can add some links and other pages, but prior ti this I thought I would look what it looks like in the browser once again.
It looks awful! My header image has been duplicated across the top, the olours looks different and the gradient I put in the side columns isn't there at all. The nav bar bits are a look naff. I thought that this package was mean't to help us non techhies ! PLEASE HELP !
Thanks
Julie

Hi Runrunforest.
wow ! That's so kind of you. I will have a go at uploading it now. I did try to attach the file yesterday for Linda, but the 'image' function kept crashing.. I'm using a macbook of my daughter's so that may be the problem with the uploading? Will have a go.
Also can anyone suggest a good step by step way to learn the packages? I did see that the range of 'Missing Manuals' have a god write up.
Thanks again, so much appreciated !
This is the css file created by Fireworks
Is that what you need?
@charset "utf-8";
body {
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
body * {
font-size: 100%;
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
p {
margin-bottom: 1.1em;
margin-top: 0;
#main p.lastNode {
margin-bottom: 0;
a:link img, a:visited img {
border: none;
div.clearFloat {
clear: both;
font-size: 0;
height: 0;
line-height: 0px;
li.clearFloat {
clear: both;
ul.symbolList {
display: inline;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
.AbsWrap {
position: relative;
width: 100%;
.rowWrap {
width: 100%;
#main {
margin: 0 auto;
width: 960px;
#header {
margin-left: 12px;
margin-top: 1px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #fff;
background-attachment: scroll;
background-image: url(images/bg_header.png);
background-position: left top;
background-repeat: repeat-x;
width: 940px;
padding-top: 0px;
height: 100px;
html > body #header {
height: auto;
min-height: 100px;
#bg_header_top {
margin-left: 0px;
margin-top: 0px;
background-image: url(images/bg_header_top.gif);
overflow: hidden;
display: inline;
float: left;
height: 9px;
margin-bottom: 0;
width: 938px;
#colwrap2 {
float: left;
margin-left: 0px;
margin-top: 0px;
width: 561px;
#ukipbath_r3_c2 {
margin-left: 0px;
margin-top: 0px;
background-image: url(images/ukipbath_r3_c2.gif);
overflow: hidden;
display: inline;
float: left;
height: 1px;
margin-bottom: 0;
width: 562px;
#logo {
margin-left: 12px;
margin-top: 4px;
display: inline;
float: left;
height: 79px;
margin-bottom: 0;
width: 506px;
#ukipbath_r3_c9 {
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
height: 91px;
margin-bottom: 0;
width: 369px;
#ukipbath_r3_c12 {
margin-left: 0px;
margin-top: 0px;
background-image: url(images/ukipbath_r3_c12.gif);
overflow: hidden;
display: inline;
float: left;
height: 1px;
margin-bottom: 0;
width: 7px;
#nav_top {
margin-left: 10px;
margin-top: 4px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #7e276e;
width: 940px;
padding-top: 0px;
height: 39px;
html > body #nav_top {
height: auto;
min-height: 40px;
#Home {
color: #fff;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 140%;
margin-left: 70px;
margin-top: 11px;
display: inline;
float: left;
margin-bottom: 0;
#Home :link, #Home :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#Home :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#Home :hover, #Home :focus {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#Home :active {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#Bath_Enterprise_Trust {
color: #fff;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 140%;
margin-left: 61px;
margin-top: 10px;
display: inline;
float: left;
margin-bottom: 0;
#Bath_Enterprise_Trust :link, #Bath_Enterprise_Trust :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#Bath_Enterprise_Trust :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#Bath_Enterprise_Trust :hover, #Bath_Enterprise_Trust :focus {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#Bath_Enterprise_Trust :active {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#The_Team {
color: #fff;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 140%;
margin-left: 49px;
margin-top: 11px;
display: inline;
float: left;
margin-bottom: 0;
#The_Team :link, #The_Team :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#The_Team :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#The_Team :hover, #The_Team :focus {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#The_Team :active {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#News {
color: #fff;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 140%;
margin-left: 55px;
margin-top: 11px;
display: inline;
float: left;
margin-bottom: 0;
#News :link, #News :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#News :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#News :hover, #News :focus {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#News :active {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#Contact {
color: #fff;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 140%;
margin-left: 47px;
margin-top: 11px;
display: inline;
float: left;
margin-bottom: 0;
#Contact :link, #Contact :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#Contact :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#Contact :hover, #Contact :focus {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#Contact :active {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#Links {
color: #fff;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 140%;
margin-left: 70px;
margin-top: 11px;
display: inline;
float: left;
margin-bottom: 0;
#Links :link, #Links :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#Links :visited {
color: #fff;
font-weight: bold;
text-decoration: none;
#Links :hover, #Links :focus {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#Links :active {
color: #ececec;
font-weight: bold;
text-decoration: underline;
#content_wrapper {
margin-left: 10px;
margin-top: 5px;
display: inline;
float: left;
margin-bottom: 0;
width: 940px;
padding-top: 0px;
height: 1399px;
html > body #content_wrapper {
height: auto;
min-height: 1400px;
#colwrap3 {
float: left;
margin-left: 0px;
margin-top: 0px;
width: 219px;
#bg_nav_col {
margin-left: 0px;
margin-top: 12px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #7e276e;
background-attachment: scroll;
background-image: url(images/bg_side_nav_middle.gif);
background-position: center center;
background-repeat: repeat-y;
width: 220px;
padding-top: 0px;
height: 1275px;
html > body #bg_nav_col {
height: auto;
min-height: 1275px;
#bg_side_nav_top {
margin-left: 14px;
margin-top: 0px;
background-image: url(images/bg_side_nav_top.gif);
overflow: hidden;
display: inline;
float: left;
height: 8px;
margin-bottom: 0;
width: 190px;
.h4_heading {
font-family: 'Handwriting, Dakota', Arial, Helvetica, sans-serif;
font-size: 200%;
font-weight: bold;
text-align: center;
color: #000;
line-height: 155%;
padding-bottom: 2px;
padding-top: 1px;
margin-left: 8px;
margin-top: 12px;
display: inline;
float: left;
margin-bottom: 0;
width: 197px;
#bg_side_nav_bottom {
margin-left: 14px;
margin-top: 90px;
background-image: url(images/bg_side_nav_bottom.gif);
overflow: hidden;
display: inline;
float: left;
height: 8px;
margin-bottom: 0;
width: 5px;
#ukipbath_r13_c5 {
margin-left: 10px;
margin-top: 46px;
display: inline;
float: left;
height: 220px;
margin-bottom: 0;
width: 175px;
.Txt_Has {
font-family: 'Handwriting, Dakota', Arial, Helvetica, sans-serif;
font-size: 180%;
font-weight: bold;
text-align: center;
color: #7e266c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
margin-left: 24px;
margin-top: 9px;
display: inline;
float: left;
margin-bottom: 0;
width: 174px;
.Txt_Loyal {
font-family: 'Handwriting, Dakota', Arial, Helvetica, sans-serif;
font-size: 180%;
font-weight: bold;
text-align: center;
color: #7e266c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
margin-left: 21px;
margin-top: 17px;
display: inline;
float: left;
margin-bottom: 0;
width: 179px;
.Txt_Is {
font-family: 'Handwriting, Dakota', Arial, Helvetica, sans-serif;
font-size: 180%;
font-weight: bold;
text-align: center;
color: #7e266c;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
margin-left: 24px;
margin-top: 21px;
display: inline;
float: left;
margin-bottom: 0;
width: 174px;
#colwrap4 {
float: left;
margin-left: 0px;
margin-top: 0px;
width: 500px;
#content_img_2 {
margin-left: 20px;
margin-top: 13px;
display: inline;
float: left;
height: 163px;
margin-bottom: 0;
width: 461px;
#content_img_1 {
margin-left: 27px;
margin-top: 47px;
display: inline;
float: left;
height: 116px;
margin-bottom: 0;
width: 449px;
.h1_heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 180%;
text-align: center;
color: #000;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
margin-left: 21px;
margin-top: 14px;
display: inline;
float: left;
margin-bottom: 0;
width: 461px;
.main_content {
font-family: Arial, Helvetica, sans-serif;
font-size: 160%;
text-align: left;
color: #000;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
margin-left: 3px;
margin-top: 7px;
display: inline;
float: left;
margin-bottom: 0;
width: 497px;
#colwrap5 {
float: left;
margin-left: 0px;
margin-top: 0px;
width: 220px;
#bg_sub_col_top {
margin-left: 0px;
margin-top: 12px;
background-image: url(images/bg_sub_col_top.gif);
overflow: hidden;
display: inline;
float: left;
height: 8px;
margin-bottom: 0;
width: 220px;
#footer {
margin-left: 0px;
margin-top: 24px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #7e276e;
width: 940px;
padding-top: 0px;
height: 39px;
html > body #footer {
height: auto;
min-height: 40px;
.Txt_Copyright {
font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;
font-size: 140%;
font-weight: bold;
text-align: center;
color: #000;
line-height: 120%;
padding-bottom: 2px;
padding-top: 1px;
margin-left: 17px;
margin-top: 12px;
display: inline;
float: left;
margin-bottom: 0;
width: 904px;

When I preview a page in a browser it looks different from my design

Hi, I'm having problems with my font and pictures not spacing correctly. They look perfectly in dreamweaver but when I publish or preview that are further apart than they're supposed to be. I need Help!

For more meaningful answers you'll need to post a URL to your test page so we can see it.
That said, DW Design View is not 100% reliable owing to different browsers, end-user settings and display sizes. Test your site in ALL major browsers (Chrome, FF, IE7, 8, Opera...) with increased/decreased text (zoom, text only). Also test with maximized and smaller than max browser viewport. Do this often during the design phase.
Use valid markup and CSS code. Bad code is the #1 cause of most page rendering problems.
Code validation tools
CSS - http://jigsaw.w3.org/css-validator/
X/HTML - http://validator.w3.org/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Div tag looks different from mac to pc?

I have a very simple page with a background image as a CSS style (centered). I added a Div tag on the top and built a form inside of the div tag. The div tag is set to absolute positioning and looks great in dreamweaver and the pc. I tested it on my mac and the whole div/form moves all the way to the left side of the screen. I appreciate any help.

Try this code instead of what you have now.
<!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>Harley-Davidson Police Survey</title>
<style type="text/css">
/**zero out browser defaults**/
* {margin:0; padding: 0; line-height: 1}
body {
background: silver;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
#wrapper{
background: #000 url(http://www.hdpolicesurvey.com/images/purl_background.jpg) no-repeat;
width: 780px;
margin:0 auto; /**centered on screen**/
text-align:left;
color: #fff;
#form {
margin-left: 235px;
width:500px;
font-size: 12px;
padding-top: 120px;
/**Text Styles**/
p {
line-height: 1.5;
margin-top: 1.5em;
margin-bottom: 1em;
</style>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="_mmServerScripts/XMPJS.ashx?XMPJavaScript=Tracking"></script>
<script language="JavaScript" type="text/javascript"> /* Track Current Page Visits */
var obj = new Object(); obj.type = "Page Visit"; XMP_TrackThis(obj, "HarleyPURL", "Page Visit", "Page Visit");
</script>
</head>
<body>
<div id="wrapper">
<div id="form">
<form name="form2" method="POST" action="landing.aspx?rid=testPURL&XMPieOrgBaseURL=http%3a%2f%2fwww.hdpolicesurvey.com%2f" id="form2">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIzMzY3MzEzNQ9kFgQCBQ8VAQpIYXJsZXlQVVJMZAIGD2QWAmYPFQoDTXMuB01lbGFuaWUIU2hlZmNoaWsWVGV1dGViZXJnIEluY29ycG9yYXRlZAw0MTQtMjA3LTEzNTESMTIyMDAgVy4gV2lydGggU3QuCVdhdXdhdG9zYQJXSQU1MzIyMgpIYXJsZXlQVVJMZGTcAVE098MvJaXoGbNLgITf6vth/g==" />
</div>
<p>* = required fields</p>
<table width="474" border="0">
<tr>
<td valign="top">Title</td>
<td valign="top"><input name="title" type="text" id="title" value='Ms.' size="6" maxlength="6" /></td>
<td> </td>
<td colspan="2" valign="top">First*</td>
<td colspan="3"><span id="sprytextfield5">
<input name="first" type="text" id="first" value='Melanie' />
</span></td>
</tr>
<tr>
<td width="58">Last*</td>
<td width="144"><span id="sprytextfield6">
<input name="last" type="text" id="last" value='Shefchik' />
</span></td>
<td width="32"> </td>
<td width="43" colspan="2">Dept*</td>
<td width="144" colspan="3">
<input name="company" type="text" id="company" value='Teuteberg Incorporated' /></td>
</tr>
<tr>
<td>Phone*</td>
<td><span id="sprytextfield7">
<input name="phone" type="text" id="phone" value='414-207-1351' />
</span></td>
<td> </td>
<td colspan="2">Street</td>
<td colspan="3">
<input name="street" type="text" id="street" value='12200 W. Wirth St.' /></td>
</tr>
<tr>
<td height="24">City</td>
<td><input name="city" type="text" id="city" value='Wauwatosa' /></td>
<td> </td>
<td>ST</td>
<td><input name="state" type="text" id="state" value='WI' size="6" maxlength="2" /></td>
<td> </td>
<td>ZIP</td>
<td><input name="zip" type="text" id="zip" value='53222' size="14" maxlength="10" /></td>
</tr>
</table>
<p><br />
Do you currently employ a motor unit?
<br />
<label>
<input type="radio" name="employ" value="employ_no" id="employ_1" />
yes<br />
<input type="radio" name="employ" value="employ_yes" id="employ_0" />
no</label>
</p>
<p>What brand are you currently using? (Check all that apply)<br />
<label>
<input type="checkbox" name="brand_HD" value="HD" id="brand_0" />
HD</label>
<br />
<label>
<input type="checkbox" name="brand_BMW" value="BMW" id="brand_1" />
BMW</label>
<br />
<label>
<input type="checkbox" name="brand_Honda" value="Honda" id="brand_2" />
Honda</label>
<br />
<label>
<input type="checkbox" name="brand_Kawasaki" value="Kawasaki" id="brand_3" />
Kawasaki</label>
<br />
<label>
<input type="checkbox" name="brand_Other" value="checkbox" id="brand_4" />
Other</label>
</p>
<p>Total Motorcylce Fleet Size:<br />
<label>
<input type="radio" name="fleet" value="fleet1-5" id="fleet_0" />
1-5</label>
<br />
<label>
<input type="radio" name="fleet" value="fleet6-15" id="fleet_1" />
6-15</label>
<br />
<label>
<input type="radio" name="fleet" value="fleet16-25" id="fleet_2" />
16-25</label>
<br />
<label>
<input type="radio" name="fleet" value="fleet26-50" id="fleet_3" />
26-50</label>
<br />
<label>
<input type="radio" name="fleet" value="fleet51" id="fleet_4" />
51+<br />
<br />
</label>
Do you anticipate purchasing new motorcycles in... (Check all that apply)<br />
<label>
<input type="checkbox" name="purchase_3month" value="3month" id="purchase_0" />
within 3 months</label>
<br />
<label>
<input type="checkbox" name="purchase_3to6month" value="3-6month" id="purchase_1" />
3 - 6 months</label>
<br />
<label>
<input type="checkbox" name="purchase_6to12month" value="6-12month" id="purchase_2" />
6 - 12 months</label>
<label><br />
<input type="checkbox" name="purchase_1yearmore" value="1year" id="purchase_3" />
1 year or more</label>
<br />
</p>
<p>
<label>        Would you like someone from H-D to contact
you regarding our
2010 products?<br />
<input type="radio" name="contact" value="contact_yes" id="contact_0" />
yes</label>
<br />
<label>
<input type="radio" name="contact" value="contact_no" id="contact_1" />
no<br />
<br />
Would you like to receive a H-D Police motorcycle catalog?<br />
<input type="radio" name="receive" value="receive_yes" id="receive_0" />
yes</label>
<br />
<label>
<input type="radio" name="receive" value="receive_no" id="receive_1" />
no</label>
</p>
<p>
<input onmouseup='XMP_TrackThis(this, "HarleyPURL", "Button", "Performed Action");' type="submit" name="submit" id="submit" value="Submit" />
<label>      </label>
<label>      </label>
<br />
<br />
<br />
<br />
<br />
</p>
<input type="hidden" name="XMP_SetNewAdors" value="form2" />
</form>
</div> 
<script type="text/javascript">

</script>
</div>

</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Why is it that iTunes looks different from all other apps again?

This might be a rather irrelevant question, yet I wonder: Why is it that iTunes doesn't look like the majority of other Apple apps? I guess it's mainly the scrolls bars and the check boxes. Not that I don't like the way iTunes look, I'm just curious why it has to look different when one of Leopard's goals was to make a more unified interface.
Can anyone enlighten me or is this something that only Apple knows?

"Besides, not all of us run Leapard, so wouldn't making iTunes look like leapard make it look different on all our systems that don't use leapard?"
That's a point But what I meant by that was that in Tiger there are many different kinds of windows where Apple in Leopard has tried to stick to just one. And that's why I think it's so weird that iTunes has to differ from all the rest.

Layout Looks Different from Dreamweaver to Email?

Similar Messages

Maybe you are looking for