Live view different from design view

Hi folks,
Does anyone know why, in dreamweaver, there is a difference between the site design in Design View and what you see in live view; and how should oneapproach this difference?
Thanks.

Design View was coded a LONG time ago and Adobe hasn't really changed it much. It is very useful for my workflow, which is to work in Split view and jump back and forth between the Design view pane and the Code View pane. I know right off the bat that I won't see everything. Design View will never show me the newer CSS3 attributes, like shadow, gradients and so on. But it gives me a "rough" analog to work with while I'm doing general layout. Things like, "Am I breaking up the text enough to keep people on my web page?" "Do I have this typeface too small?" "Is the picture I just put in there positioned correctly?"
Also, be forewarned, "Live" view is Webkit (an Open Source browser) so it will accurately portray Google's Chrome and Apple's Safari. It will not accurately show issues with Firefox and Internet Exploiter. So, before you launch your website, do a check in all of the major browsers.

Similar Messages

Background in live view different from design view

Why when I am looking at my page in design view it shows up black like I want it to, but when I go to live view or view it on the internet it shows up like the template color that it was when started?

Without the code, it's pretty tough to say what might be happening.
One thing to look at would be the order of you css, including the links to external .css files in the <head> of the page.
If you have two like selectors, for example, two versions of: body {background-color:some color here;}, the one that comes last in the stylesheet links, embedded css, or in the html itself (inline css) will be the one that's used by the browser.

Different from Design, to live, to browser

I'm making a webpage and it looks great in design view, my divs look good. I have a main content div which is centered with a different bg color than the body. When I switch to Live view it disappears the same for if I preview it in the browser.
It's as though my css style sheet isn't there and I know that it is attached.

No special characters allowed in selector names. Hash mark = a unique ID. Dot = a re-usable class.
CSS :
#structure {
width: 80%;
margin: auto;
background-color: #F9F9F9;
/**Since you're using HTML5, why don't you use HTML5 tags and selectors?**/
header { }
nav { }
article { }
footer { }
HTML:
<body>
<div id="structure">
    <header"><img src="Images/logo.png" width="300" height="186" alt=""/></header>
    <nav>Menu goes here</nav>
    <article>Article goes here</article>
    <footer>Content for New footer Tag Goes Here</footer>
</div>
</body>
Nancy O.

Live preview differs from IExplore

Hello all, i created a template in photoshop and opened it in dreamweaver. when i view the live, it seems to display clean and crisp. but when i try it in internet explore its seems a bit pixelated. it is not very obvious but my keen eye can tell me. i have also noticed when i draw a div box and place text in it, the preview is fine in the live preview but the div box shifts about 3 spaces to to the left in IExplore. i have not loaded a css to the file as am not experienced creating css layouts. Is there a way to fix these problems.

Upload your page and dependant files to a remote server space and post a URL, please.
FWIW Browser variation is nothing new. When you're experienced with CSS, you learn to build your sites and test them to perform well in the standards compliant browsers (Firefox, Chrome, Safari). Then use conditional comments or hacks to fix things that don't work in IE.
As for pixelation, it could be you optimized your images poorly in PShop or didn't save them correctly for the web as JPEG or PNG. But there's no way we can help you without seeing your page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Design View differs from Live view problem

I have Dreamweaver CS5.5 with Mac OS 10.7.3 on an iMac. I have the same set-up on a Macbook Pro 17
The problem is that the Design view is showing different fonts and not picking up layout as per CSS style but the Live view is all correct.
All is fine on the laptop so it is my iMac specific glytch
I have checked the settings for diplaying CSS styles and they are ticked
I have switched off the activation settings for Suitcase Fusion 3 in case of conflict there
I have uninstalled and reinstalled Dreamweaver
I think it a font-related problem as the design view only seems to want to display non-serif fonts.
Am I doomed to only use the lap-top in my web work?
I hope someone can advise as I am rather frustrated

I think that's just the way it is...
http://forums.adobe.com/message/4312435#4312435
Martin

Font in Design View different from font in Live View and browser preview

My external style sheet has the body set for a sans-serif font and there is nothing to contradict it in the HTML documents. But while I get sans-serif in the Design View (as you would expect), I get a serif font in Live View and Browser Preview, not to mention on the Web itself.
How is this possible (and what should I do about it)?
--Paul

Murray and David: it worked! It is a rare and joyous experience to have a straightforward solution to the sorts of problems I come up with (including other realms). But I have to say that with HTML and CSS (and hence with Dreamweaver), solutions to difficulties have seemed within easier reach than in other parts of the computer world.
By the way, I wanted to choose "correct answer" for both your posts, but after making the first click it was no longer available for the remaining post--so I typed "helpful" even though that one was correct too.
Thanks again.
--Paul

Design view different from preview - is muse still in beta testing

I have limited experience with coding html so when Adobe released Muse, I was excited. However, I'm wondering if they released it too soon and/or if it is still in beta testing - which I don't mind but would like to know what I'm dealing with. It seems to have a lot of quirks - mainly that the design view is sometimes different from the preveiw or browser view. I spent over an hour yesterday trying to get text boxes to line up. If there is an hidden element affecting the text boxes, I don't see it. I have moved everything off the page and >selected all
and nothing shows up.
Other issues:
Sometimes paragraph styles do not apply - even though in design view it looks like they do.
Can't find a way to center text vetically in a text box other than adjusting the leading?
Can't find a way to organize assets into folders?
When an object is selected on a page, is there a way to indicate that that is the object in the assests panel?
Sometimes the padding options are not available for no apparent reason.
Thanks to the Adobe staff for being responsive as these issues are discovered. One staff member in particular was very helpful as I was trying to get hyperlinks to work right. But I am STILL having a problem. The text box and the text itself have the hyperlink style applied but as you can see on the Dardanelle and Chad Lawson Trio hyperlinks - the style did not take even though they are both hyperlinks that point to the right URL. -- geezermusicclub is the correct link for Dardanelle - It's difficult to see in the pic, but the Dardanelle and Chad Lawson text color is black but the hyperlink text style is brown.
Persoanlly, I feel Adobe should lower the subcription price while all these kinks are being worked out in Muse. In a way, subscribers are **** a LOT of beta testing for Adobe. Not only are we not being compensated for that, we are having to pay for an application that has too many wrinkles.

Murray and David: it worked! It is a rare and joyous experience to have a straightforward solution to the sorts of problems I come up with (including other realms). But I have to say that with HTML and CSS (and hence with Dreamweaver), solutions to difficulties have seemed within easier reach than in other parts of the computer world.
By the way, I wanted to choose "correct answer" for both your posts, but after making the first click it was no longer available for the remaining post--so I typed "helpful" even though that one was correct too.
Thanks again.
--Paul

Dreamweaver cs6 crashes when switching from design to live view

dreamweaver cs6 crashes when switching from design to live view

read my reply
Date: Thu, 30 May 2013 20:27:49 -0700
From: [email protected]
To: [email protected]
Subject: dreamweaver cs6 crashes when switching from design to live view
    Re: dreamweaver cs6 crashes when switching from design to live view
    created by Preran in Dreamweaver - View the full discussion
Hi,
Can you try the solutions mentioned in this document?
http://helpx.adobe.com/dreamweaver/kb/crash-live-view-dreamweaver-cs5. html
Thanks,
Preran
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/5367198#5367198
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/5367198#5367198
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/5367198#5367198. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Dreamweaver by email or at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

DW CS5 - font displayed in Design View/Live View is as we spec'd. Font when Live View is off is radically different. Why?

Subject line says it all. In brand new pages, the font we specify for the page is displayed correctly, regardless of whether Live View is on or off. But we have an existing site where that isn't the case - the non-Live View font is very different from what we spec'd (and what we see) when Live View is on.. Can somebody suggest where to look for a remedy? Maybe a .css file issue? Thanks. - Jim

Thanks Nancy, but those aren't the problems. Did a bit of page testing here and found that what's happening is that for a specific site, non-Live View is rendering my 'normal' font styles Bold for some reason. I'm going to see if I can resolve the problem myself, at which point I'll report back. If you have any thoughts in the interim, I'm all ears. - Jim

Problem: design view looks completely different than live view

I am trying to make changes to my home page in Dreamweaver, and when I am viewing the page in 'design view' the background image for the container is missing, and the divs are all over the place. When I view the same page in live view and in browser preview, it looks fine.
Because I can't really see what the page is going to look like in 'design view', I can't really make changes to the site. Any help would be much appreciated.
Link to screenshot of 'design view'
www.simply-eden.com/images/screenshot1.tiff
Link to screenshot of 'live view'
www.simply-eden.com/images/screenshot2.tiff
link for purpose of viewing the code only
www.simply-eden.com/images/index.html
Thanks for the help.

When things get really goofed up, it could be caused by malformed code or orphaned div tags. Sometimes browsers will let you slide with poor code, but DW Design View won't.
Use these online code validation tools and fix any reported errors.
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Image missing from design view

Hi. In DW CS4 on XP.
I have an image that is missing in my design view from DW. It shows up in the live view, but when I select it I cannot get the option to change the image.
I do not want to change the image in the code. It is not loading my new picture under the same filename for some reason.
I have all the visual aids shown except the first 2 listed: CSS layout backgrounds & box models.
I tired selecting all over the table this page is designed in. I cannot seem to select that picture missing. Right now it is a missing link & usually I am able to click the missing link box. I even tried opening it up in DW 8, but I am not even able to select the box, but at least I see it.
Please help if you can.
Thanks.

I would have said "Try renaming the folder containing the images in Rh's Project Manager. That sometimes fixes the problem. You can revert to the old name afterwards."
Keeping all the images, and / or topics, in the root is never a good idea. It can slow things down and it's messy.
You can move the images you can see but obviously you cannot move the others. Try moving a topic that has one of the images to a different folder and see if that refreshes. Also try deleting the CPD file and reopening Rh.
Backup first.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

How do I make my design view line up with my live view?

I'm using CS6 and my design view is a lot different from my live view. How do I change this?
www.kurtesposito.com
Thanks.

Unfortunately you cant. Design view is only a 'guidance' POV. Use Live View to see how it will really look like or test on browser.

Why page looks fine in Design view but not live view?

I am new to DW. I created a page that looks fine in design view but now I cant get it to show up in live view or the browser preview. Can some one give me some areas to troubleshoot. Most of the code is from a previous page I created that still looks fine in every view. I am not sure what I could be doing different in setting up this site.

Thanks for taking the time to reply to question. Aftr taking a break. I came back realized I inserted the stylesheet before I changed site settings. I just needed to remove the forward slash from my stylesheet declaration. FYI for anyone else new to DW: if stuffs not showing in Live View and Browser Preview eg background images, Go to Manage Sites and check your site setting for Links relative to: You may have switched between document and site root. Thus breaking your links to images or in my case the entire style sheet.

Difference in design and live view

I ran into another problem lately and i still cant find any solution to this yet. I have a table within table and they look fine in the design page but when i change the page to live view or switch to browser, the table seems longer. Any idea why and how can i fix this? Any help would be greatly appreciated. Thanks in advanced and sorry for the long post!
Design page:
Live view:
Source 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>Untitled Document</title>
<link href="Style/style3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('Images/aboutusbtn_b.gif','Images/homebtn_b.gif','Images/joinbtn _b.gif','Images/partnersbtn_b.gif','Images/contactbtn_b.gif')">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="319" align="left" scope="col"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <th width="319" align="left" scope="col"><img src="Images/logo_2_01.png" width="319" height="104" border="0" usemap="#Map" /><img src="Images/banner_A_03.png" width="319" height="14" /></th>
      <th width="481" align="left" scope="col"><img src="Images/banner_A_02.png" width="481" height="118" /></th>
    </tr>
</table></th>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <th width="235" align="left" valign="top" scope="col"><table width="235" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th height="100" scope="col"> </th>
      </tr>
      <tr>
        <td><table width="235" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th scope="col"><a href="index3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Images/homebtn_b.gif',1)"><img src="Images/homebtn_a.gif" name="home" width="235" height="65" border="0" id="home" /></a></th>
          </tr>
          <tr>
            <td valign="top"><a href="aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutus','','Images/aboutusbtn_b.gif',1)"><img src="Images/aboutusbtn_a.gif" name="aboutus" width="235" height="65" border="0" id="aboutus" /></a></td>
          </tr>
          <tr>
            <td><a href="activity.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('activity','','Images/actbtn_b.gif',0)"><img src="Images/actbtn_a.gif" name="activity" width="235" height="65" border="0" id="activity" /></a></td>
          </tr>
          <tr>
            <td><a href="joinus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('joinus','','Images/joinbtn_b.gif',1)"><img src="Images/joinbtn_a.gif" name="joinus" width="235" height="65" border="0" id="joinus" /></a></td>
          </tr>
          <tr>
            <td><a href="partners.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('partners','','Images/partnersbtn_b.gif',1)"><img src="Images/partnersbtn_a.gif" name="partners" width="235" height="65" border="0" id="partners" /></a></td>
          </tr>
          <tr>
            <td><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','Images/contactbtn_b.gif',1)"><img src="Images/contactbtn_a.gif" name="contact" width="235" height="65" border="0" id="contact" /></a></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td> </td>
      </tr>
    </table></th>
    <th width="5" align="left" scope="col"><img src="Images/side2.jpg" width="5" height="764" /></th>
    <td width="560" height="764" align="left" valign="top" id="tb_bg5" scope="col"><table width="560" border="0" align="center" cellpadding="15" cellspacing="0">
      <tr>
        <td height="419" align="left" scope="col"><h1>Corporate Partners</h1>
          <p>Phasellus sit amet massa id nunc faucibus condimentum vel a lacus. Etiam   mattis, erat nec dapibus tristique, dui elit iaculis orci, et dignissim   nunc nisi a lectus. Duis semper porta nisl nec ullamcorper. </p>
          <table width="530" border="0" cellpadding="0" cellspacing="0" class="table_border">
            <tr>
              <th width="200" align="left" scope="col"><img src="Images/partners_logo/f_logo1.png" width="197" height="136" /></th>
              <td width="330" align="left" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="5">
                <tr>
                  <th align="left" scope="col"><p>Sed id nulla neque, in blandit nisi. Quisque a lorem elit. Nullam fringilla, nisi ac blandit ullamcorper, velit mauris porta metus, ut facilisis ligula orci sed tortor. Suspendisse a metus eu purus hendrerit suscipit eu eu nunc. Morbi neque metus, varius quis egestas eu, egestas nec purus.</p></th>
                </tr>
              </table></td>
            </tr>
            <tr>
              <th colspan="2" align="left" scope="col"><img src="Images/divider2.png" width="522" height="7" /></th>
            </tr>
            <tr>
              <th align="left" scope="col"><img src="Images/partners_logo/f_logo2.png" width="197" height="136" /></th>
              <td width="330" align="left" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="5">
                <tr>
                  <th align="left" scope="col"><p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum convallis massa sit amet mattis. Curabitur ac nisl vitae leo convallis pretium in eu magna. Donec luctus sodales lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></th>
                </tr>
              </table></td>
            </tr>
            <tr>
              <th colspan="2" align="left" scope="col"><img src="Images/divider2.png" width="522" height="7" /></th>
            </tr>
            <tr>
              <th align="left" scope="col"><img src="Images/partners_logo/f_logo3.png" width="197" height="190" /></th>
              <td width="330" align="left" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="5">
                <tr>
                  <th align="left" scope="col"><p>Nam sed leo justo. Nulla a urna odio. Sed at metus lorem, a mattis justo. Pellentesque vel augue a neque auctor scelerisque. Vivamus lobortis augue sed dui luctus id consequat odio blandit. Nam convallis libero id risus sagittis lobortis. Quisque ut euismod risus. Ut faucibus ante velit, eget convallis risus. Curabitur est lorem, consequat auctor hendrerit ac, pretium sit amet metus. Proin ante massa, laoreet at commodo vitae, egestas et velit</p></th>
                </tr>
              </table></td>
            </tr>
          </table></td>
      </tr>
    </table></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <th colspan="2" align="left" scope="col"><img src="Images/footer.jpg" width="800" height="5" /></th>
</tr>
<tr>
    <td width="400" align="left" scope="col"><p class="footer_text">Copyright © Olive Interactive. All rights reserved.</p></td>
    <th width="400" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="150" scope="col"> </th>
        <th width="200" align="left" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="80" align="center" scope="col"><p>follow us on</p></th>
            <th width="55" align="left" scope="col"><p><a href="http://www.facebook.com"><img title="Facebook" img src="Images/fb_logo.jpg" alt="Facebook" width="50" height="50" /></a></p></th>
            <th width="55" align="left" scope="col"><a href="http://www.twitter.com"><img title="Twitter" img src="Images/twitter_logo.jpg" alt="Twitter" width="50" height="50" /></a></th>
          </tr>
        </table></th>
        <th width="50" scope="col"> </th>
      </tr>
    </table></th>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="75,3,261,105" href="index3.html" alt="Go Green" />
</map>
</body>
</html>
css style sheet:
#tb_bg5 {     background-image: url(../Images/bg_2b.png); } .table_border {     border: medium solid #A9D18B; } p {     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;     font-size: 14px;     color: #333;     font-weight: normal; } h1 {     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;     color: #84C775;     font-size: 24px;     font-weight: bold; }

Welcome back -
It will be waaaaay easier for us to assist if you would upload all your files to your webspace and post a link here.
Please?
Meanwhile, not sure where you want space reduced, but if it's above your footer, find this cell, and reduce the cell height from 764 to 700
<td id="tb_bg5" width="560" valign="top" height="764" align="left" scope="col">

In design view, how to change the white panel background so white text displays? (I keep having to go to Live view to see it)

When I'm adding white text it doesn't show up as the background input panel is white, and I keep having to go into Live view to see the paragraph spacings etc. Is there a way round this, other than changing the text colour in CSS to, for instance, black, and then changing it back before I upload the page?

Hi, and thanks, but it's my fault, I think I'm describing it wrong!
I've attached two screenshots from that area of the screen, one with the white text on the white background (showing as invisible) and the other where I've highlighted the text so you can see where it is. The background .jpg isn't a solid colour, it's a pattern, and if I added an equivalent pattern to the text area div, it wouldn't line up properly on all sreen resolutions, so that's why I gave that div a transparent background. When I go into Live view, the page displays perfectly, but in Design view I can't see to make amendments to the paragraphs etc.

Live view different from design view

Similar Messages

Maybe you are looking for