Live View Window Reading Extra 20px

Okay, I figured out what the bug is after the 13.1 update. On all of my live views on all of my projects and on both of my machines (I'm running Windows 8, btw), Dreamweaver is miscalculating the window width (or displaying the wrong window width in the corner) by 20px. So, if I have a media query that says don't break until a min-width of 801px, when I pull my Live View window out, it doesn't break until 821px.
Where is this extra 20px coming from? It can't be in my stylesheets because this is happening in multiple projects on multiple devices.
Is anyone else having this problem? If so, please respond.
Anyone at Adobe listening to this?
Cheers,
Jonathan

Okay. There are no errors in the code. I'm designing for a phone, so the "Preview in Browser" tool is worthless for me. I mean, I get it, because you can squish the browser down and all of that. But if I wanted to design sites that way, I'd get Notepad ++ and save myself the agony of paying thousands of dollars for the Adobe software suite.
Now, I did uninstall DW 13.1, and reinstalled at 13.0 and the issue when away. I could actually use the Live View. Then, without thinking, I installed the update--and now the issue is back.
All of that being said. I'm adding a photo of what my screen looks like and then I'm going to post ALL of the css, so there aren't any questions about what's going on. I've already gleened
As I can see: horizontal scroll bar all the time. I've checked for every discrepency I can think of in my stylesheets: width: 100%, but margins: 0 5%; Padding blow out. All of it. I can't post the CSS here because it says I'd be violating the TOS.
So, I'll post it up here: http://www.stpaulmedia.com/sample-style.css
The Wordpress install I'm working on is locally hosted, so there's no point in trying to share that.

Similar Messages

Dreamweaver 2014.1 Live view is showing old version of file

I'm running Window 7 (64-bit) and upgraded from Dreamweaver CC 2014 to 2014.1 a couple days ago. Since I'm using fluid grid design view is not available, so when I view my files in Live view Dreamweaver (DW) is showing very old versions when I edit some files (not all). When I use split view the code is correct, but it doesn't correspond at all to what I'm seeing in Live View. The code window shows the current version of the file and the live view window shows an old version. Any idea? Also, live view in this new version seems to be extremely slow.
Another question is, how can I re-install the old version (CC 2014)? I tried to uninstall and re-install, but the install automatically installs 2014.1 and doesn't give an option. Thus far, I am very unhappy with what I've seen so far in 2014.1 and would really like to back off 2014 to speed things up.
Thanks much

Hi Preran.
I seam to have the same problem on a Mac. Also Live view keeps crashing and linked to Adobe BC.
If the live view crashes then the live view is showing an older version on the CSS file until I do a refresh. Its been driving me Nuts!
Also the CSS file is no longer automatically uploading to Adobe CC...
So I really could do with a solution for me to run on CC 2014.0 Please.
I am a subscriber to CC.
Cheers Jake

Don't see changes in Live View until after 30 second delay

Running Dreamweaver CS5.5 on Mac OS X 10.7.5
Running Locally using MAMP
Site is configured to run on a local PHP/MySQL server, and consists of a single index.php file with nothing more than an html header (I don't even have any PHP in there yet).
When I use Dreamweaver to make a change in my index.php file (such as changing the text in the header), I save it, and then go to Live View or Web Browser Preview. In both cases, it takes over 30 seconds before I see my changes in Live View or Browser Preview.
To get a better idea of my workflow:
     1) My indiex.php file header reads "This is a test"... and it's correct in both Live View and Browser Preview.
     2) I change the header to be "Hello World".
     3) Select "Save" from the File menu.
     4) Click the "Live View" button.
     5) Live view still reads "This is a test"
     6) Open Browser Preview, also still reads "This is a test"
     7) I spam the refresh button in both Live View and Web Preview, no change, still reads "This is a test".
     8) After about 30 seconds of hitting the refresh button, the change finally is visible in Live View and Web Preview, reading "Hello World".
Anyone seen anything similar? Any ideas why I'm getting such a long delay before seeing my changes? Any suggestions to fix it (besides restarting my mac?

Thanks for the input!
Restarting the computer was the obvious first thing to try, but had no effect.
I have over 2GB free memory and still experiencing the issue.
It does take a few seconds to load the Live View for the first time, but that's not my problem. My problem is that with Live View already loaded, it takes over 30 seconds after saving changes to the php file before I can see the changes in the Live View (I'm clicking the refresh button once a second, and on the thirty something time I'll finally see my changes).
With "Preview Using Temporary Files" turned off, I get the behavior I've been describing.
Turning "Preview Using Temporary Files" on does actually mitigate the issue for me, though, so thank you for that suggestion!
     - I can see changes in my Live View instantly after saving and clicking the refresh button.
     - I can see changes using Preview in Browser instantly too... but the browsers refresh button has no effect (which makes sense since the temporary file it's looking at hasn't changed).
     - I can actually get some work done now.
However, I still feel that I should be able see my changes in Live View immediately after saving and clicking the refresh button without using "Preview Using Temporary Files", and I'd like to be able to leave the page open in my browser and just click the browser's refresh button to see my recently saved changes instantly.
So Long Story Short:
     Using "Preview Using Temporary Files" has definitely helped!
     But I still have no way to see my changes immediately without using temporary files, so something still seems fishy.

Live view on laptop monitor

I'm looking for Canon PowerShot and software that offer ability to conect with laptop, that I can see on monitor what camera lens see. No need for any additional function, just live view window. PowerShot with Vari-Angle LCD may not be helpful cause sometimes camera will be too far away for me to see. (3m is far away for me ) Help!

The Powershot N series allows that on either a tablet or smartphone. The N2 and the N100. You can control and view your camera via WiFi connections.
I think but I cant recall which models but there may be some other models that have live output via and AV or HDMI cable.
One call to Canon might get you the list of models quicker

How do i set up the viewer window so I can read the email in the bottom section of the window

how do i set up the viewer window so I can read the email in the bottom section of the window? Someone sat at my computer and changed it and now I cannot restore it.

Mail Preferences, Viewing, Use Classic Layout.

Live view css3

Hi you guys. I am looking for some input. I am playing around with some of the new properties in CSS3. There is some really great stuff out there now that you can do with CSS3. One of the properties I am playing with is
-moz-transform:rotate(30deg); (NOTE IT IS FOR FIREFOZ ONLY)
If you assign it to an ap div, it turns that div at a 30 degree angle. Pretty cool.
But what I am finding out is, when I hit the live view button, the Live view browser does not appear to be the Firefox browser and that property is particular to firefox In other words when I click live view, I can not see the box turned at a 30 degree angle. I have to actual hit F12, to see it in my primary default browser, Firefox. I don't want to have to hit f12. I want to be able just click the live view and see the page as it would be seen in a FireFox browsers. Is there anyway I can change the browser live view renders in?
Please let me know. Thanks for all your help.
-moz-transform:rotate(30deg); /* Firefox */
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 394px;
top: 78px;
background-color: #99CCCC;
-moz-transform:rotate(30deg);

www.aimeecaprice.com wrote:
Hello, Thank you for your quick reply.
I did try changing the property to a webkit property and live view did display it then, however I want live view to display the Mozilla Firefox property.
There must be some way to change that live view browser from webkit to firefox, don't you think? Let me ask you this, how did you find out that dreamweaver live view uses web kit. Was it in the help manual? or did you just figure it out by process of elimination?
Adobe has openly said in blogs and in the release notes that the Live View uses the Webkit engine. This was primarily targeted because of how they were perceived as being slow and hanging onto Flash. Webkit is the engine that powers Safari and Chrome on the desktop as well as iOS and Android on the mobile front. Unfortunately, because of how Webkit is tied into DW there is no way to "swap out engines". Believe me when I say, Mac users would have loved to have been able to "swap in" the IE rendering engine and Windows users could say that as well with the IE6, IE7, IE8, IE9 and IE10 engines (the last 2 are the least problematic).
If you are truly developing for CSS3 and cross-browsers, using the -webkit and -moz prefixes in addition to standard CSS3 is recommended since IE falls under neither prefix, and the same should go for Opera as well. While it may seem bothersome, I can assure you it is no where near as bothersome as HTML5 video where the big players (Apple and MS) currently support the proven MPEG-4 video technology whereas Firefox currently supports Ogg and Chrome wants to move from MPEG-4 to its own propriety format WebM. So not only in this case do you need extra code in your pages but you need to re-encode your video multiple times.
So the short answer is that it's best not to develop for just one browser. It will be a bad habit that will be hard to break.

Div Image not showing in Live View

Why can't I see my image placed within a Div tag in Live View? Makes no sense. I've changed the z-index to 1000, also tried 1 nothing changes. Please advise if anyone can help. Thank you!

I've applied BOLD to the Div tag in question
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">
<style type="text/css">
#apDiv8 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 2;
</style>

<link href="pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#pavemendlogo {
    background-image: url(_images/NEW%202012%20PAVEMEND%20LOGO%20WHITE.png);
    background-repeat: no-repeat;
    height: 78px;
    width: 196px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
</style>


</head>
<body>
<div id="wrapper">
<div class="container">
<div id="apDiv1"><a href="pavemend_home_page.html"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="197" height="79" class="fltlft" /></a>
    <div id="resources"></div>

<div class="headerResources"></div>

<nav>
<ul id="menu">
    <li><a href="pavemend_home_page.html">OUR PRODUCTS ▼</a>
      <ul>
        <li><a href="slq_product_page.html">SLQ<sup>®</sup></a></li>
        <li><a href="sl_product_page.html">SL<sup>®</sup></a></li>
        <li><a href="dotline_product_page.html">DOTLine™</a></li>
        <li><a href="15.0_product_page.html">Pavemend 15.0<sup>®</sup></a></li>
        <li><a href="TR_product_page.html">Pavemend TR<sup>®</sup></a></li>
        <li><a href="VR_product_page.html">Pavemend VR<sup>®</sup></a></li>
        <li><a href="IA_product_page.html">Instant Asphalt™</a></li>
        <li><a href="kemrok_product_page.html">KEMROK™</a></li>
        <li><a href="kemrokVR_product_page.html">KEMROK VR™</a></li>
        <li><a href="firerok_product_page.html">FIREROK™</a></li>
        <li><a href="antiwear_product_page.html">Anti-Wear™</a></li>
        <li><a href="antiscale_product_page.html">Anti-Scale™</a></li>
      </ul>
    </li>
    <li><a href="resources_page.html">RESOURCES</a></li>
    <li><a href="technical_support.html">TECHNICAL SUPPORT</a></li>
    <li><a href="contact_page.html">CONTACT US</a></li>
</ul>
</nav>
    </section>

<div class="sidebarleftlong">
<nav>
    <ul>
      <li><a href="#">PAVEMEND PRODUCT <br>    BROCHURE</a></li>
      <p><li><a href="#">KEEP TRAFFIC MOVING <br>    BROCHURE</a></li></p>
      <p><li><a href="#">CASE STUDIES</a></li></p>
      <p><li><a href="#">INSTANT ASPHALT REPAIR</a></li></p>
      <p><li><a href="#">SL PRODUCT VIDEO</a></li></p>
      <p><li><a href="#">SLQ PRODUCT VIDEO</a></li></p>
      <p><li><a href="#">DOTLINE FIELD <br>    APPICATION VIDEO</a></li></p>
    </ul>
    </nav>
   <div id=""></div>
    </div>


<div class="content">
<p> </p>
<img src="_images/resources_header.png" alt="slheader" width="553" height="31" class="productlogos" />
</section>
<p> </p>
      <section>
        <p><strong>Pavemend</strong><sup>®</sup> Rapid, Permanent Concrete and Asphalt repair products are quickly becoming the choice for Turnpike, State DOT Bridge Crews and discriminating engineers who value superior, permanent repairs and reduced traffic disruptions.</p>
<p>Typical repair applications include full and partial depth bridge deck repairs, bridge header joints, approach slabs, form & pour repairs, dowel bar retrofits, joint nosings and more. <strong>Pavemend</strong><sup>®</sup> products require only the addition of water, with no bonding agents or curing requirements and offer all season rapid repair capability.</p>
<p>Featuring technology developed here in the USA, <strong>Pavemend</strong><sup>®</sup> (by CeraTech Inc) products are easier to use, offer greater durability, provide superior return on investment, and are by far the most sustainable repair products available today.</p>
        <p><img src="_images/Done Smart Logo.png" width="150" height="17" alt="donesmartlogo" />
      </section>
</div>
        
<div class="footer"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="160" height="64" class="flt_rgt" />
    <table width="510" summary="footer material">
<tr>
    <td width="210"><strong><em>Manufactured by</em></strong></td>
<tr>
    <td><img src="_images/CTI_logo_white.png" width="200" height="47" alt=""/>
    <td width="50" align="center"><a href="#../twitter.com/Pavemend">Twitter</a>
<div id="apDiv7"></div>
<td><strong><em>Planet Friendly Technology</em></strong></td>
   </tr>
</table>
    <div id="apDivPFT1"></div>
    </div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
#menu {
    clear: left;
    position: relative;
    width: 100%; /**adjust width as needed**/
    margin: 0;
    padding: 0;
    background-image: url(_images/topnavpanel.png);
    color: #FFFFFF;
#menu ul {
    margin: 0;
    padding: 0
#menu li {
    list-style: none;
    float: left;
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: #000000;
/**top level menu**/
#menu li a {
    display: inline-block;
    text-decoration: none;
    /* adjust width as needed or use auto */
    width: 13em;
    padding: 8px;
    font-weight: bold;
    line-height: 12px;
    color: #000;
    border-top-style: none;
    font-size: 90%;
    margin-bottom: 0;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0;
    border-bottom-style: none;
/**top menu style on mouse over**/
#menu li:hover > a {
    color: #FFF;
    width: 13em;
/**sub-menu**/
#menu li ul {
    display: none;
    text-align: center;
    padding: 0;
    margin-bottom: 0;
    margin-left: 40px;
    margin-right: 0;
    margin-top: 0;
    border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
    display: block;
    position: absolute;
    z-index:1000;
    padding: 0;
#menu li:hover li, #menu li.hover li {
    float: none;
    background-color: #E1D5BB;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
    width: 14em; /* adjust width as needed or use auto */
    margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
    color: #FFF;
    background-color: #03C;
/* Clear floated elements at the end*/
#menu:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#apDiv11 {
    position: absolute;
    width: 190px;
    height: 180px;
    z-index: 2;
    background-image: url(_images/WomanPhone.png);
    background-position: 10px;
    background-repeat: no-repeat;
    margin-top: 240px;
#apDivSustainability {
    position: absolute;
    width: 200px;
    height: 420px;
    z-index: 3;
    background-image: url(_images/sustainabilitySB2.png);
    background-repeat: no-repeat;
#apDiv10 {
    position: absolute;
    width: 75px;
    height: 73px;
    z-index: 2;
    background-image: url(_images/PFTLogo.png);
    float: right;
    margin-left: 650px;
    margin-top: -110px;
#apDiv9 {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/slphoto1.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivslqphoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/slqphoto.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivdotlinephoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/dotlinephoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDiv15photo {
    position: absolute;
    width: 200px;
    height: 179px;
    z-index: 3;
    background-image: url(_images/15.0_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivTRphoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/TR_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivAWphoto {
    position: absolute;
    width: 200px;
    height: 150px;
    z-index: 3;
    background-image: url(_images/AWPhoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivASphoto {
    position: absolute;
    width: 200px;
    height: 134px;
    z-index: 3;
    background-image: url(_images/ASphoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivVRphoto {
    position: absolute;
    width: 200px;
    height: 150px;
    z-index: 3;
    background-image: url(_images/VR_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivIAphoto {
    position: absolute;
    width: 200px;
    height: 162px;
    z-index: 3;
    background-image: url(_images/IA_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivKemrokphoto {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/KEMROK%20pic.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivFirerokphoto {
    position: absolute;
    width: 200px;
    height: 248px;
    z-index: 3;
    background-image: url(_images/Firerok_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivtechsupportphoto {
    position: absolute;
    width: 200px;
    height: 248px;
    z-index: 3;
    background-image: url(_images/techsupport_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivKemrokVRphoto {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/Kemrok%20VR%20pic.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDiv8 {
    position: absolute;
    width: 180px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/SLbktandbag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 520px;
#apDivslq {
    position: absolute;
    width: 80px;
    height: 105px;
    z-index: 2;
    background-image: url(_images/SLQbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -125px;
    margin-left: 515px;
#apDivdotlinebag {
    position: absolute;
    width: 88px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/dotlinebag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -165px;
    margin-left: 280px;
#apDivkemrokbag {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/kemrok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -165px;
    margin-left: 570px;
#apDivPFT1 {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/PFTLogo.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -75px;
    margin-left: 470px;
#apDivkemrokVRbag {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/kemrokvr_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivFirerokbag {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 570px;
#apDivAWbucket {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivAWbucket {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivAWbucket {
    position: absolute;
    width: 80px;
    height: 96px;
    z-index: 2;
    background-image: url(_images/AWbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDiv15bag {
    position: absolute;
    width: 88px;
    height: 111px;
    z-index: 2;
    background-image: url(_images/15.0bucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -115px;
    margin-left: 260px;
#apDivTRbucket {
    position: absolute;
    width: 80px;
    height: 106px;
    z-index: 2;
    background-image: url(_images/TRbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -120px;
    margin-left: 370px;
#apDivAWbucket {
    position: absolute;
    width: 205px;
    height: 150px;
    z-index: 2;
    background-image: url(_images/AWArt.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -140px;
    margin-left: 420px;
    font-size: 120%;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
#apDivASArt {
    position: absolute;
    width: 205px;
    height: 150px;
    z-index: 2;
    background-image: url(_images/ASArt.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -140px;
    margin-left: 420px;
    font-size: 120%;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
#apDivVRbucket {
    position: absolute;
    width: 80px;
    height: 87px;
    z-index: 2;
    background-image: url(_images/VRbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -105px;
    margin-left: 470px;
#apDivIAbucket {
    position: absolute;
    width: 251px;
    height: 106px;
    z-index: 2;
    background-image: url(_images/IAbuckets.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -120px;
    margin-left: 400px;
body {
    background-color: #666;
    color: #000;
    text-align: center;
    background-image: url(_images/roadblurred.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    padding-top: 60px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
.formtext {
    font-size: 100%;
    text-align: left;
.bodyfootnote {
    font-size: 70%;
    margin-left: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
    font-size: 70%;
    color: #F00;
.popups {
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    text-transform: capitalize;
    text-decoration: none;
    list-style: none;
h1, h2, h3, h4, h5, h6, p {
    /* [disabled]margin-top: 0; */     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 23px;
    line-height: 25px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 100%;
    padding: 5px;
a:visited {
    color: #FFFFFF;
    text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    background-color: #03C;
    color: #FFF;
    height: 12px;
    alignment-baseline: text-after-edge;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
    width: 960px;
    background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(_images/Bridge4WebScreened.png);
    background-repeat: no-repeat;
    margin-bottom: 0;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0;
    text-align: left;
.containerTS {
    width: 960px;
    background-color: #FFF;
    margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(_images/US_Map.png);
    background-repeat: no-repeat;
    text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
    background-color: #000;
    background-image: url(_images/BannerBlured960.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerSL {
    background-color: #000;
    background-image: url(_images/PMND%20SL%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerPurchase {
    background-color: #000;
    background-image: url(_images/contact%20us%20pavemend%20header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerSLQ {
    background-color: #000;
    background-image: url(_images/PMND%20SLQ%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerDOTline {
    background-color: #000;
    background-image: url(_images/DOTLINE%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.header15 {
    background-color: #000;
    background-image: url(_images/PMND%2015.0%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerTR {
    background-color: #000;
    background-image: url(_images/PMND%20TR%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAW {
    background-color: #000;
    background-image: url(_images/anti_wear_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAS {
    background-color: #000;
    background-image: url(_images/anti%20scale%20pavemend%20header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerVR {
    background-color: #000;
    background-image: url(_images/PMND%20VR%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerIA {
    background-color: #000;
    background-image: url(_images/Instant%20asphalt%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerKemrok {
    background-color: #000;
    background-image: url(_images/KEMROK%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerKemrokVR {
    background-color: #000;
    background-image: url(_images/KEMROK%20VR%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerFirerok {
    background-color: #000;
    background-image: url(_images/FIREROK%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAntiWear {
    background-color: #000;
    background-image: url(_images/anti_wear_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerTechSupport {
    background-color: #000;
    background-image: url(_images/FEBlurred.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerResources {
    background-color: #000;
    background-image: url(_images/ResourceBanner.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.header h1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20pt;
    font-style: normal;
    font-weight: bolder;
    color: #FFF;
    padding-top: 150px;
    padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
    float: right;
    width: 180px;
    margin-left: 0px;
    margin-right: 30px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/Testimonialb.gif);
    background-repeat: no-repeat;
    height: 456px;
    text-decoration: none;
    z-index: 1000;
.sidebarPurchase {
    float: right;
    width: 200px;
    margin-left: 0px;
    margin-right: 20px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/purchaseSB.png);
    background-repeat: no-repeat;
    height: 420px;
    margin-top: 0px;
    text-decoration: none;
    background-color: #217CC0;
    background-position: 10px 10px;
.sidebarleft {
    float: left;
    width: 195px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 85%;
    font-style: oblique;
    height: 200px;
    text-decoration: none;
    padding-top: 8px;
    padding-left: 10px;
    margin-right: 5px;
    background-color: #217CC0;
    vertical-align: bottom;
    line-height: 30px;
    font-weight: bold;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
.sidebarleftlong {
    float: left;
    width: 195px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-style: oblique;
    height: 280px;
    text-decoration: none;
    padding-top: 20px;
    margin-right: 5px;
    background-color: #217CC0;
    vertical-align: bottom;
    line-height: 17px;
    font-weight: bold;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
    color: #FFF;
    font-size: 85%;
    text-align: left;
    padding-left: 10px;
.sidebargreen {
    float: left;
    width: 195px;
    height: 410px;
    text-decoration: none;
    padding-top: 20px;
    margin-right: 5px;
    background-color: #8CC63F;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
    padding-left: 10px;
.nav2 {
    font-family: bebas-neue;
    font-style: normal;
    font-weight: 400;
    color: #FFF;
.sidebarleft nav ul li a {
    text-decoration: none;
    color: #FFF;
.sidebarleftlong nav ul li a {
    text-decoration: none;
    color: #FFF;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-weight: bold;
.content {
    width: 730px;
    float: left;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    padding: 10px 0;
    text-align: left;
    font-size: 100%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
    padding: 0 15px 15px 40px;
    text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    text-decoration: none;
ul.nav li {
    border-bottom: 1px solid #666;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background-color: #DFEBF3;
    color: #FFF;
    text-decoration: none;
/* ~~ The footer ~~ */
.footer {
    padding: 10px 0;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both;
    background-color: #000000;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#apDiv1 {
    position: absolute;
    width: 900px;
    height: 94px;
    z-index: 1;
    margin-top: 80px;
    margin-left: 30px;
    white-space: 3;
    font-size: 100%;
    text-align: left;
sllogo {
    background-image: url(_images/SLwhitelogo.png);
    background-repeat: no-repeat;
.slLogo {
    background-image: url(_images/SLwhitelogo.png);
    background-repeat: no-repeat;
    height: 100px;
    width: 240px;
.productlogos {
    margin-left: 23px;
    margin-top: 10px;
.Bold {
    font-weight: bold;
.inherent {
    font-style: inherit;
sup {
    position: relative;
    top: -1ex;
    vertical-align:baseline;
    font-size: 75%;
#apDiv2 {
    position: absolute;
    width: 650px;
    height: 31px;
    z-index: 2;
    background-repeat: no-repeat;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 15px;
    margin-left: 15px;
    top: 369px;
    background-image: url(_images/homeheader.png);
.footer table tr td {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 75%;
    color: #FFF;
    height: 8px;
    width: 160px;
    margin-left: 10px;
    padding-left: 15px;
    border-collapse: collapse;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 5px;
.footer p {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 80%;
    color: #FFF;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 30px;
.footer table tr th h4 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 75%;
    color: #FFF;
    float: left;
    padding-left: 15px;
    height: 0px;
.footer table tbody tr td a {
    color: #FFF;
#wrapper {
     width:970px; /**adjust as needed**/
     margin:0 auto; /**centers page on screen**/
.flt_rgt {
    float: right;
    margin-top: 15px;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
.title {
    /* [disabled]margin-right: 30px; */
    margin-top: 35px;
    margin-left: 10px;
    background-image: ;
    background-repeat: no-repeat;
    /* [disabled]margin-left: 20px; */
    top: 30px;
    /* [disabled]margin-top: 30px; */
    left: 30px;
.flt_products {
    float: right;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
.container section nav {
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    height: 30px;
    width: 960px;
    padding-top: 3px;
#apDiv3 {
    position: absolute;
    width: 468px;
    height: 41px;
    z-index: 2;
    background-image: url(_images/savetimetext.png);
    background-repeat: no-repeat;
    margin-left: 15px;
#apDiv4 {
    position: absolute;
    width: 400px;
    height: 41px;
    z-index: 3;
    background-image: url(_images/ULTRAFLOR.png);
    background-repeat: no-repeat;
    margin-left: 10px;
    margin-top: 45px;
#apDiv5 {
    position: absolute;
    width: 250px;
    height: 103px;
    z-index: 4;
    background-image: url(_images/HI%20RES%20PRODUCT%20FAMILY%20w%20IA.png);
    background-repeat: no-repeat;
    float: right;
    right: auto;
    margin-left: 675px;
    margin-top: -22px;
#apDiv6 {
    position: absolute;
    width: 40px;
    height: 38px;
    z-index: 5;
    background-image: url(_images/PFT%20No%20Text%20No%20Flip.png);
    margin-top: -25px;
    margin-left: 83px;
#apDiv7 {
    position: absolute;
    width: 20px;
    height: 17px;
    z-index: 5;
    background-image: url(_images/twitter-bird-dark-bgs.png);
    margin-top: -15px;
    margin-left: 85px;
nav ul {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the space between the navigation on the content below */
    font-size: 90%;
nav ul li {
    text-decoration: none;
    color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    text-align: left;
    color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    color: #FFF;
    text-decoration: none;
.orange {
    color: #FAA634;
.white {
    color: #FFFFFF;
.red {
    color: #F00;
.red1 {
    color: #F00;
.toppanel {
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    height: 30px;
    width: 960px;
#apDiv12 {
    position: fixed;
    width: 960px;
    height: 30px;
    z-index: 5;
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    float: left;
    top: 229px;
.white {
.CeraTechLogo {
    background-image: url(_images/CTI_logo_white.png);
    background-repeat: no-repeat;
    width: 200px;
    height: 60px;
.apDivPFT {
    background-repeat: no-repeat;
    padding-left: px;
    padding-top: 0px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
#resources {
    background-image: url(_images/ResourcesType.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;

When using Live View, site looks great, browser testing goes crazy

I am creating a new website (and I am really unexperienced with Dreamwaver CS5). But when I check my site using "Live View" everything looks great, the way it is supposed to. Then when I go to test it in my browswer (Primary browser is Chrome) it goes crazy: I at first noticed that I had saved one copy as an .asp but then resaved it to .xhtml I did delete the first line of code already that the .asp file created as it kept giving me an error on line 1.
Then I tried to do a spry drop-down menu bar, which I have deleted since I thought I was doing something wrong with that and I should just stick to what I half-way know.
If I were to preview the template page it gives me this error:
This page contains the following errors:
error on line 150 at column 76: error parsing attribute name
Below is a rendering of the page up to the first error.
Here is line 150:
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
If I were to test the index.xhtml page in the browser, it ignores most images (all but one), and the first nav-bar (an editable region) appears to the left instead of under the header. The layout is totally ignored and everything is on the left-hand side of the screen instead of in a two column layout.
I am not testing this on a server just off of my computer.
I am assuming that the error has something to do with the .asp file I first did and when I resaved it, since I don't know what I would be looking for, is still in there screwing it up.
Here is the code from the template page:
<!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>Midwest Window Brokers | Page</title>



<style type="text/css">

</style>
<script type="text/javascript">
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_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_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/home2.jpg')">
<div class="container">
<div class="header"><a href="/index.xhtml"><img src="../images/heading.jpg" alt="Midwest Window Brokers, Windows, Siding, Roofing, 605-791-5352" name="Insert_logo" width="950" height="200" align="right" id="Insert_logo" style="background: #FFFFFF; display:block;" /></a>
    <div id="h-navbar1"><a href="/index.xhtml"><img src="/images/home.jpg" alt="home" width="159" height="51" id="Image1" onmouseover="MM_swapImage('Image1','','/images/home2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="/windows.html"><img src="/images/services.jpg" width="151" height="51" alt="services" /></a><a href="/freebay.xhtml"><img src="/images/specials.jpg" width="153" height="51" alt="specials" /></a><a href="/gallery.html"><img src="/images/gallery.jpg" width="152" height="51" alt="gallery" /></a><a href="/roofing.xhtml"><img src="/images/order.jpg" width="152" height="51" alt="order" /></a><img src="/images/blank.jpg" width="75" height="51" /><img src="/images/facebook.jpg" width="38" height="51" alt="facebook" longdesc="http://facebook.com/midwestwindowbrokers" /><img src="/images/twitter.jpg" width="37" height="51" alt="twitter" longdesc="http://twitter.com/midwestwindow" /><img src="/images/google.jpg" width="42" height="51" alt="google+" longdesc="http://https://plus.google.com/u/0/b/108071947231835835141/108071947231835835141/posts" /></div>
</div>

<div id="h-navbar">
    <div id="h-navbar2">  Content for id "h-navbar2" Goes Here</div>
</div>

<div class="sidebar1">
    <ul class="nav">
    </ul>
    <p> <div id="wufoo-z7x3k1">
Fill out my <a href="http://midwestwindow.wufoo.com/forms/z7x3k1">online form</a>.
</div>
<script type="text/javascript">var z7x3k1;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'midwestwindow',
'formHash':'z7x3k1',
'autoResize':true,
'height':'601',
'async':true,
'header':'show'};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { z7x3k1 = new WufooForm();z7x3k1.initialize(options);z7x3k1.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script></p>
    </div>

<div class="content">
    <h1>Instructions</h1>
    <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h2>Clearing Method</h2>
    <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
    <h3>Logo Replacement</h3>
    <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
    <p><span style="font-size: 18px; color: #C00; font-weight: bold; font-style: italic;">Logo Replacement</span></p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    <h4>Backgrounds</h4>
    <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
    
</div>

<div class="footer">
    <p class="footer"><strong>  <em>References Available!</em> We accept cash, check, Visa, Discover, MasterCard</strong></p>
      Copyright 2012 Midwest Window Brokers Inc. All Rights Reserved.
    </div>
</div>
</body>
</html>

I had saved one copy as an .asp but then resaved it to .xhtml
I'm assuming this is a static web site. Rename (F2) all your pages with .html or .htm extension.
.xhtml is not a valid extension.
Nancy O.

Live view putting a file with no name

So i have a problem (don't know if it's a problem really, but at least an annoyance) with the Live View and Preview in browser features.
When use them, the file transfer window pops up (even if i have told it to stay "hidden") showing the following:
Started: 29.5.2013 15.47
index.php - same - not transferred
Connections:Raspberrypi.php - same - not transferred
styles:common.css - same - not transferred
- error occurred - Access denied. The file may not exist locally, may be open in another program, or there could be a local permission problem.
File activity incomplete. 1 file(s) or folder(s) were not completed.
Files skipped: 3
Files with errors: 1
Finished: 29.5.2013 15.47
So the weird lines are those marked with red. It looks like its trying to put a file with no name or extensions at all - and i don't think i have such files on my site. Also the permissions are correct on both the server and my Mac.
My web browser opens up and shows the site perfectly, and if I'm using the Live View, the site shows up well too. The thing is every time I hit F5 to refresh, i have to close the file transfer window. Annoying.
I don't know if it matters but I'm using a Raspberry Pi as my home web server. It has Apache2, PHP 5, MySQL and vsftpd running, and I have been able to use them with no problem earlier.
Hopefully someone knows what I am doing wrong here...
Thanks in adnvance!

Have you enabled Automatic Upload on SAVE? I never FTP files on Save. Way too much risk of error and it takes focus away from my work which is very distracting. See screenshot.
Nancy O.

Problem with Live View being slow

Since the latest update it now takes up to 20 seconds for the live view to appear in Dreamweaver. Is this usual - anyone else having this problem, How can I solve it? it's like working in mud!

It may just be a temporary issue on their server. That's one of the main problems with referencing files you don't own, you are at the mercy of the owner's server status.
If you can, I would suggest getting a copy of the font files you are using and keeping them on your own server to reference instead, it may cost you extra, but it's worth it.
To be honest, I've never used Typekit and don't even know if that's possible, but I've had similar issues with Google Fonts in the past and will download fonts to be stored on my own systems now whenever it's critical that they are available whenever the website is (doesn't happen often, but).
You just need both a .ttf and .otf version of the font to ensure it works when using the @font-face css rule. Converting a .ttf to .otf is pretty simple and can be done in a lot of places online. You would need to check with Typekit's user agreements to see if that's possible, but Google's are all open source and can be modified however you see fit.

Div shifting down page in live view

I'm trying to create a website for a project I'm doing.I'm having a problem in live view where I the div with the id "imageholder" keeps shifting down the page. It looks fine in the editor but the browser and live view not so much. I want it to line up with the top div, not the bottom one.
Another problem I'm having is that I can't adjust the footers margin very well. it's not taking into account the div's directly above it. I've included a screenshot of the page as it hasn't been uploaded online yet. Thanks
Here is the code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="CSS/Project.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #E0EEEE;
</style>
</head>
<body>
<div id="container">
<header>
<h1 id="title">Limerick Running Club</h1>
<h2 class="subhead"><strong>L.R.C</strong></h2>
</header>
<br/>
<nav>
<nav id="nav_centre">
<ul>
<li><a href="#">Home</a></li>
<li></li>
<li><a href="#">History</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Results</a></li>
<li><a href="#">Useful Links</a></li>
<li><a href="#">Contact Us</a></li>
</ul><br/>
</nav>
</nav>
<section>
<h2 >History</h2>
<article></article>
<article class="mainpara">
<p>The limerick running club was founded in 2008. We are a community funded club with the sole aim of helping to make our community fitter and happier. Our main office is based in castletroy and you are welcome to drop in anytime and join up. </p>
<p>Since the LRC was founded we have had a number of members who have shared with us their feeling about joining the club. </p>
<p>You can read more about what their saying below</p>
</article>
<article id="testimonial"><h3>Member Testimonials</h3><h3 class="Name">John Byrne</h3>
<p>Since joining the LRC my health and fitness has improved greatly. I recommended the club to everyone.</p>
<h3 class="Name">Mary Smith</h3>
<p>I'm delighted I joined the LRC. I feel much fitter and healthier since joining and there is a great sense of community surrounding the club.</p>
<h3 class="Name">Tom Ryan</h3>
<p>Really enjoying my runs with the lRC. I'd recommend joining to anyone.</p>
</article>
</section>
<div id="imageholder"><img src="Images/edited.jpg" width="355" height="266" alt=""/></div>
<footer><span id="copyright">©2015 Limerick Running Club</span></footer>
</div>
</body>
</html>
CSS:
@charset "utf-8";
html{
background-color:#E0EEEE;
header{
width:100%;
nav {
width 100%;
height 55px;
#nav_centre {
text-align: center;
width: 1080px;
margin-right: auto;
margin-left: auto;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-bottom: 15px;
padding-top: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: small;
background-color:#4683ea;
nav ul{
list-style:none;
nav a{
display:inline;
float:left;
text-decoration:none;
font-weight:bold;
padding-top: 5px;
padding-bottom:5px;
padding-right: 45px;
padding-left: 45px;
height: 20px;
color:#CCC;
header {
text-align: center;
#container {
width: 1080px;
margin-left: auto;
margin-right: auto;
footer {
margin-top: 600px;
text-align: center;
height: 50px;
clear: both;
padding-top: 25px;
#copyright{
color:#a6a6a6;
article {
margin-top: 20px;
width: 650px;
margin-left: 5px;
margin-right: 0px;
#imageholder {
width: 360px;
float: right;
clear: none;
margin-top: 20px;
margin-right: 5px;
padding-right: 5px;
.mainpara {
float: left;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-left: 5px;
background-color: #F0F0F0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
width: 600px;
section {
margin-top: 75px;
left: 5px;
h1{
color:#4683ea;
#title{
font-weight: bold;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color:#FFA500;
.subhead{
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
h2{
letter-spacing: 2px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#testimonial {
float: left;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-left: 5px;
background-color: #F0F0F0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
padding-right: 5px;
width: 600px;
clear: both;
.Name {
color:#FFA500;

Try this -
<article class="mainpara">
<div id="imageholder"><img src="Images/edited.jpg" width="355" height="266" alt=""/></div>
<p>The limerick running club was founded in 2008. We are a community funded club with the sole aim of helping to make our community fitter and happier. Our main office is based in castletroy and you are welcome to drop in anytime and join up. </p>
<p>Since the LRC was founded we have had a number of members who have shared with us their feeling about joining the club. </p>
<p>You can read more about what their saying below</p>
</article>
Move the imageholder div so that it is the first child of the "mainpara" article.
Also, you probably want "...what they're saying below" in that last paragraph above. Finally, why do you have a nested <nav> tag in your code?

Jquery Mobile Website does not preview properly in Dreamweaver's Live View or in my web browser

I'm using Dreamweaver 12.0 Build 5861.
I can't figure out what I'm doing wrong. I go
File / New / Page from Sample / Mobile Starters / JQuery Mobile with theme (local).
I then save my page.
Then when I go to preview my new page in Live View, it shows a page without any styles, etc.
When I upload the page and additional files created by Dreamweaver to my server. I preview it and it will look like the default style JQuery page, but when I click on the button to see the content for that page, there is not a "back" button to come back to my home page.
Also, when I try to implement a JQuery mobile swatch, the Swatch window says "No Theme Applied."
I feel like I'm missing something really simple,,, but what? Is there a setting I need to change or am I missing a step? I have looked at many video tutorials online and I believe I am taking the same steps.

You're missing the viewport meta attribute. Add ths to your <head> section.
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
And add this to Line 13:
<div data-role="page" id="page" data-add-back-btn="true">
Do this for all page IDs.

13.1 update - lost live view + cant view page in chrome

just installed the new update, site displayed fine before update, now it appears it has lost all css links, it doesnt display correctly in live view, or google chrome, but works gine in other browsers

Can you please preview the page in Google Chrome, launch the Developer tools in Chrome (Ctrl+Shift+I on Windows or Cmd+Option+I on Mac). Click on the Console tab and tell us what error you are getting?

13.1 Update: Live View is Borked

My live view is borked as of 13.1 update. The design I was working with renders properly on my phone, properly in Chrome, but renders with a horizontal scroll bar in Dreamweaver CC live view. It's really quite annoying. Is there a fix coming?
-J

Unfortunately, I can't. I'm working on a localhost staging server. The deal is: the design I'm working on is a responsive design. I've tested the scrolling issues in all of the major browsers and none of them seem to be having a problem with this design. Just CC.
It seems to think my site is just 10-20px wider than it really is. I'm playing with some more CSS rules to see if I can find the one causing issues.

Auto show frame edges live view & scaling

I have just started using InDesign CS5 and I have found how to switch off live view for better performance, but CS5 also has the this thing where if you run the mouse pointer over objects, by default it highlights the frame edges of the object the pointer is on. It also has the icon that shows if it's an image or not. I prefer to work with a clean interface and switch stuff like that on if necessary. Can somebidy help be find where to disable that feature please.
One other thing is when I used to command/option/scale an object, in CS4 it would alway scale proportionately from whichever corner I grabbed. Now by default it scales from the centre of the object. How can I get it back to scaling from the corner I grab please.
Thanks!

Frame Edge Highlighting:
This is a oft hated feature that you can't turn off. Have a look at this Indesign Secrets post here, and here's a summary of some from this forum.
Content Grabber:
Thankfully Adobe made this new function able to be turned off, go View > Extras > Hide Content Grabber.
Scaling:
This thread here should answer your question.

Live View Window Reading Extra 20px

Similar Messages

Maybe you are looking for