shows CSS mode live view, not in design mode

Hi all -

I am new to dreamweaver and tried to move a site I already coded in dreamweaver, if all goes well to be able to find errors, but above all to be able to update more quickly in the future.

I noticed a characteristic (at least for me!) - I have some basic "rounded corners" with css that display correctly in the 'Live' view or in a browser, but in design, they are just standard boxes without added css attributes.

Is this normal or is something in my code?

It's normal.  Don't trust mode Design for something else than a gross approximation of your design. With the help of Live View or a local test server is almost more reliable.

Tags: Dreamweaver

Similar Questions

  • DW CS4 - Design/Live view not available with PHP

    I work with documents PHP but Live View and Design view are grey and not available with PHP documants open. I use MAMP and have set up local news and the test in the site server in place dialogue several times myself and with the help of some research on the web without any difference. Any thoughts on what may be things to check would be greatly appreciated.

    Have you changed your preferences to open the PHP pages in Code view?

    In the category of Types of files/editors preferences, if you add .php to the list of file name extensions in "Open in code view", it disables the Design view and Live View for that file type.

  • Live View not rendered Page correctly

    Can someone explain why the LIVE view in DW5.5 would not display the page correctly?  I have a site I developed, and when I see her in all browsers... FF, IE, Opera, Safari, etc., there is no error and the page renders correctly.  However, when I find a page in the Live view, my page footer section (which is done by a server-side include) makes skewed far right.  It must have something to do with the SSI, because I have other SSI on the page and they are very good. It is just only one (the footer).

    As I said, the site renders perfectly in all browsers, but not in Design mode.  I'm DW5.5 evaluation for use using the trial period, then perhaps there is a feature that is turned off?  The code for the site is a little too much to put here, but right now I'm looking for reasons that there is such a radical difference.

    Thank you.

    Fixed.

    Need to add a div with a clear just before the footer and just after.  This makes the page correctly.

  • Very different design than Live view mode

    Am I missing something?

    Live view mode displays a page perfectly, design view it presents in a way that it can barely be edited correctly.

    Just the nature of the program?

    Design mode is ideal to add lots of content, but it does not support the many modern aspects of CSS. Live View mode uses an embedded version of Chrome, so it is very accurate. Adobe plan is to phase out the Design view eventually.

  • Text fields show only not in Design or in Live View mode

    Hi all

    I ran into a problem when trying to create a simple through Dreamweaver CS6 contact form.  I have two text fields for the name & Email and 1 text box for comments.  The question that I am running is that text fields are not displayed in Design or in Live view mode.  I have installed all the required variables for the server for the form to work... but that shouldn't have any effect on the demonstration of text field...  I tried to download my contact page with the same result of no list of text fields...

    What is really laughable, it is that the "text box", that I placed in my form for comments appears in Design mode & Live very well.  I think I'm missing something, but don't know what exactly.  The form is rendered by CSS.

    Here is the code for the form:

    < div id = "CRDForm" >

    " < form action =" http://www.sweetformimi.com/FormMail/formmail.php "method ="post"enctype =" application/x-www-formulaires-urlencoded"name ="contact"target ="_self"id ="contact"> "

    < input type = "hidden" name = "env_report' value ="REMOTE_HOST REMOTE_ADDR, HTTP_USER_AGENT, REMOTE_USER and AUTH_TYPE">

    " < input type ="hidden"name = 'recipients' value = ' [email protected] "/ > "

    < input type = "hidden" name = "subject" value = "Contact form" / >

    Your full name p > < label > <

    < input name = "Name" type = "text" id = 'Name' size = "40" / > < / p >

    < / label >

    < label > < p > Email

    < input name = "email" type = "text" accesskey = "2" tabindex = "2" title = "Email" value = "Email" > < / p >

    < / label >

    < Label > comments < br / >

    < = cols 'comments' textarea name = "40" lines = "10" accesskey = "3" tabindex = "3" title = 'Comments' > < / textarea >

    < / label >

    < name of entry = 'submit' type = 'submit' accesskey = "4" tabindex = "4" title = "submit" value = "submit" >

    < / make >

    < / div >

    There are other variables that I should think in the rest of my site?  I use a checkerboard to fluid.  I have CSS for office, Tablet and phone devices.  I also have a primary CSS file that imports all three.  Structure sites was conducted through the use of < header >, < article >, < footer > and of course the < div > tags.

    Has anyone already has the "text fields" does not come before? Is this a simple fix like reinstalling Dreamweaver CS6?  Finally, another thing I should mention is that I had a previous version of Dreamweaver on my computer, which was of CS3.  I have do not uninstall before installing the latest version.  I assumed (and I could be wrong here) that it would automatically replace the old version.

    I apoligize for what it is long-winded, but I am looking for help on this issue...

    Thank you

    Take the code you have posted and insert it into a new document in Dreamweaver as it is, record and watch. The fields on the form show? If they do there is something else in your code or the css that is responsible does not appear in this case, we would need to see the entire page and css.

    For me the code in design mode and live mode view shows your form fields.

  • CSS works in design mode and mode live view but not preview browser

    Hello

    My web page looks great in Design view - just where I want to. When I click on Live View, things have really foires air upwards and nowhere near as good and I'll have to fix this somehow. But the main problem I have is when I saw the page in a browser. Firefox or Internet Explorer, it just seems like it's not finding the CSS file. So I manually typed in the code in the header, and that has not worked. So I clicked on the 'link' button and come to find that the CSS file and that did not work. So I opened just the CSS file, saved as a CSS document, and it still doesn't work. So I opened a page that I know works correctly and compared the two and it's not just a difference. Everything is fine with the paths or the code. In fact, I was getting so frustrated that I picked up at the regular "index.html" to a website online that I have access and has replaced it with one I have problems with. I downloaded my new css file and all my images, and even this Web page looks like it does not find the CSS. www.semaltra.com here are the screenshots of what I see and I also stuck my code. Can someone figure this puzzle? It has been very frustrating!

    designview.jpg

    liveview.jpg

    browserpreview.jpg

    Here is the HTML code...

    <! DOCTYPE HTML >

    < html >

    < head >
    < meta http-equiv = "Content-Type" content = text/html"; charset = utf-9 "/ >"
    < meta http-equiv = "Content-Type" content = "hidden" / >
    < name meta = "robots" content = "INDEX, FOLLOW" / >
    < name meta = "keywords" content = "Enter keywords" / >
    < name meta = "description" content = "Description here" / >

    < title > Conrad - music, life, thoughts < /title >


    <! - Google Analytics code below goes here - >


    <! - end of the Google Analytics Code - >
    < link href = "styles/styles.css" rel = "stylesheet" type = "text/css" / > "
    < / head >

    < body >

    < div id = "logo" >
    < img src = "images/ConradLogo01.jpg" / > "
    < / div >

    < div id = 'outside' >

    < div id = 'wrapper' >

    < div id = "Visibility" >
    < ul >
    < li > < a href = "index.html" > HOME < /a > < /li >
    < li > < a href = "music.html" > MUSIC < /a > < /li > ""
    < li > < a href = "videos.html" > VIDEOS < /a > < /li > ""
    < li > < a href = "bio.html" > BIO < /a > < /li > ""
    < li > < a href = "photos.html" > PHOTOS < /a > < /li > ""
    < /ul >
    < / div >

    < div id = "banner" >
    < img src = "images/ConradBanner01.jpg" / > "
    < / div >

    < div id = "leftnav" > < hhhhhhhhhhhhh h1 > < / h1 > < br >
    < p > it is a text which should be indented and other things... < /p >

    < / div >

    < div id = "content" >

    < / div >

    < div id = "right" >

    < / div >

    < div id = "footer" >

    < / div >

    < / div >

    < / div >
    < / body >
    < / html >

    and here's the CSS code...

    @charset "utf-8";
    / * CSS document * /.



    H1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike)
    do-family: Arial, Helvetica, without serif.
    do-size: 100%;
    make-weight: normal;
    make-style: normal;
    line-height: 100%;
    text-indent: 0;
    text-decoration: none;
    text-align: left;
    Color: #000;
    }

    OL, ul {list-style: none ;}}

    / * Global * /.

    HTML {}
    Body {background-image: url (.. / images/background04.jpg); background-repeat: no - repeat}


    / * Titles * /.

    H1, h2, h3, h4, h5, h6 {make-weight: bold; color: #FFF ;}}

    H1 {make-size: 24 PX ;}}
    H2 {make-size: 20px ;}}
    H3 {make-size: 16px ;}}
    H4 {make-size: 14px ;}}
    H5 {make-size: 14px ;}}
    H6 {make-size: 14px ;}}

    IMG, H1, h2, h3, h4, h5, h6 img img, img img, img {margin: 0 ;}}


    / * Elements of text * /.

    p {color: #FFF; do-size: 14px; line-height: 150%;}  }
    .the p {margin: 1.5em 1.5em 1.5em 0; padding: 0 ;}}
    .right p {margin: 1.5em 1.5em 0 1.5em; padding: 0 ;}}

    a {color: #FFF; text-decoration: none ;}}
    a: link {color: #FFF;}  }
    a: visited {color: #FFF;}  }
    a: active {color: #FFF;}  }
    a: focus {color: #666;}  }
    a: hover {color: #03F;}  }

    BLOCKQUOTE {color: #000; do-size: 12px ;}}

    strong {make-weight: bold ;}}
    em {make-style: italic ;}}

    / * Images * /.

    / * Lists * /.

    UL {}
    OL {list-style-type: decimal ;}}

    ul li {color: #FFF; do-size: 16px ;}}
    ul li {color: #FFF; do-size: 16px ;}}

    DL {}
    DT {}
    DD {}

    / * Containers * /.

    #logo {width: 586px; margin: 150px 170px 0px 10px; float: right ;}}

    {#sprybanner}
    {#sprybar}
    position: relative;
    }
    {#check_menu}
    position: absolute;
    left: 95px;
    top: 580px;
    right: 0px;
    Bottom: 0px;
    }


    #outer {width: 1100px; auto margin: 400px; background-color: #838383; background-image: url (.. / images/wrapper6.jpg);}

    #wrapper {width: 910px; auto margin: 0 ;}}

    {#social} - media - icons

    #topnav {clear: both ;}}
    #topnav ul {border-top: 1px #000 solid; border-bottom: 1px #000 solid;}
    margin: 10px 0; padding: 3px 0; }
    #topnav ul li {display: inline ;}}
    #topnav ul li a {padding: 0 20px;}

    #topnav a: link {color: #FFF; make-weight: bold ;}}
    #topnav a: visited {color: #FFF;}  }
    #topnav a: active {color: #FFF;}  }
    #topnav a: focus {color: #666;}  }
    #topnav a: hover {color: #03F;}  }
    #topnav {background-color: #000 ;}}

    #banner {margin: 40px auto ;}}

    {#rightside}

    #content {width: 750px; auto margin: 100px ;}}

    #footer {clear: both ;}}

    {#leftnav}

    {#box1}

    {#box2}

    {#box3}

    {#box4}

    {#box5}

    {#box6}

    Any help would be appreciated, thanks in advance.

    You have errors in your CSS code.

    semaltra.com%2f http://Jigsaw.w3.org/css-validator/Validator?Profile=CSS21&Warning=0&URI=http%3A%2F%2Fwww.

    Nancy O.

  • The style changes show in Design view, but not in Live View mode or online.

    I'm using CS5. I modified a style sheet and the changes appeared in design exactly as I wanted them. I went to the Live View and they do not. I put the new stylesheet to the server and it changes do not appear online. The basic change was to add a border around the text that serves as a link to another page in the site. The source code can be found here: The Akshaya Home | Akshaya USA. The lines of relavent are 71 and 72 at the bottom of the banner div The CSS code is:

    {.button_donate}

    do-family: Arial, Helvetica, without serif.

    font size: 24 PX.

    padding: 0px 8px 0px 8px;

    border-top: 3px;

    border-top-style: solid;

    border-top: #1C778C;

    border-left: 3px;

    border-left-style: solid;

    border-left: #1C778C;

    border-bottom: 3px;

    border-bottom-style: solid;

    border-bottom: #0A2B33;

    border-right: 3px;

    border-right-style: solid;

    border-right: #0A2B33;

    position: absolute;

    right: 50px;

    top: 139px;

    }

    {.button_volunteer}

    do-family: Arial, Helvetica, without serif.

    font size: 24 PX.

    padding: 0px 8px 0px 8px;

    border-top: 3px;

    border-top-style: solid;

    border-top: #1C778C;

    border-left: 3px;

    border-left-style: solid;

    border-left: #1C778C;

    border-bottom: 3px;

    border-bottom-style: solid;

    border-bottom: #0A2B33;

    border-right: 3px;

    border-right-style: solid;

    border-right: #0A2B33;

    position: absolute;

    left: 40px;

    top: 140px;

    }

    Any help will be greatly appreciated.

    Ed

    Try this:

    {.button_donate}

    do-family: Arial, Helvetica, without serif.

    font size: 24 PX.

    padding: 0px 8px 0px 8px;

    border: 3px start #1C778C;

    position: absolute;

    right: 50px;

    top: 139px;

    }

    Repeat with .button_volunteer.

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/

    http://Twitter.com/ALTWEB

  • Problem with styles Css does not display mode live view or when I browse

    I use Mac OS x 10.6 and construction Web site with Dreamweaver CS5.  I sometimes create div tags no styles or rendering mode display live view or when I browse but showing in design mode. I looked in dreamwever faq and they speak not no projection in Design view to toggle the display styles. This isn't the problem because it is checked, and I tried to turn on and off and made no difference. I use the firefox browser.


    It happened before the other day too. But all my other pages of this website that I created in the same way the construction with DIV tags and css styles So, not sure what is the problem. Maybe someone has a suggestion here.


    Johanna

    http://johannabresnahan.com/CSS/jbstyles.CSS

    {Line 420 is missing a closing brace} for the rest of the style sheet is either misinterpreted, including rules #mm1thumb and #mm2thumb.

    #footer {}
    background-color: #263f64;
    Clear: both;
    float: left;
    height: 150px;
    Width: 881px;
    position: relative;
    do-family: "Lucida Sans Unicode", "Lucida Grande", without serif.
    do-size: 9pt;
    make-style: normal;
    line-height: 9pt;
    make-weight: normal;
    do-variant: normal;
    text-transform: none;
    color: #FFF;
    text-decoration: none;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    text-indent: 525px;
    } / * THIS CLOSING BRACE IS MISSING * /.

  • My page display mode live view, but not in design mode.

    In DW CC 2014 and 2015 CC DW, my page display mode live view, but not in design mode. When I switch to Design view, I see only the grid and nothing else. ????

    DW, especially the latest version, requires a clean code and valid for many functions to work correctly. Chances are, there are a few code errors in your HTML view Design of the data warehouse can not handle, but browsers and the Live View can.

    Run the validator at http://validator.w3.org/nu for a list of errors and correct all found your page.

    If you have a clean and valid code, but the problem persists, post a link to your current page, or all of the code and css here in the forum (don't use e-mail, it will not come through) so we can take a look at what's going on.

  • How is it, I can see my div in design mode, but not in mode live view

    Hello

    I have a div ID called "portfolio" I see in Design view but not mode live view or on a browser. It's a small pink square and I want that round square also.

    I ran through validator. He picked up a few things in the style.css which I changed and the boilerplate.css I did not. I thought auto DW creates code for mat because I don't fit this code myself.

    She also rejected a lot of code in webkit, but this seems to be the standard webkit code that works elsewhere on the page.

    BTW: has when is this hand brutal coding pay off in money and less heartache when Wordpress air cleaner and is easier to use? I feel that I know only HTML or CSS in terms of translating the vision to reality and with browser features everything after months and months of online courses. How long are the pros home until they reach a point of the watershed?

    Here is my address: http://www.adjacentdimensionsmedia.com/home.html

    Here is my html code:

    < body >

    < div class = "gridContainer clearfix" >

    < div id = "div1" class = "fluid" > < img src = "adtitle2.png" width = "700" height = "80" alt ="" / > < / div > "

    < div class = "fluid" > < div class = "box-shad" > < a href = "index.html" > < / has > < / div > ""

    < / div >

    < div id = 'portfolio' > portfolio < / div >

    < / body >

    Here is my CSS:

    Shad-.box {}

    top of the margin: 200px;

    margin left: 100px;

    Width: 900px;

    height: 700px;

    display: block;

    background-image: url("images/Big-tree-trans1.png");

    background-size: 900px 700px.

    -webkit-box-shadow: 15px 15px 15px insert #000000;

    box-shadow: 15px 15px 15px insert #000000;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    position: fixed;

    }

    . Box-shad a {}

    Display: block;

    Width: 900px;

    height: 700px;

    }

    {#portfolio}

    Width: 100px;

    height: 100px;

    margin-top: 0px;

    right margin: 200px;

    margin left: 200px;

    margin-bottom: 0px;

    border-radius: 75%;

    -webkit-border-radius: 75% 75%;

    background: pink;

    top:-300px;

    position: relative;

    }

    High:-300 puts this div over the top of the browser window. Fix that and you'll see the div.

  • Images of sliding doors CSS does not display mode live view

    Background images are in the design view, however, when I go to live view and mode web the origins disappear. The button keeps all other formatting. Must be an error in my css, so I hope that it is... haha. Any help would be appreciated. Thank you.

    The code that that concerns me is in the end (sorry on this subject):

    HTML: < a class = "button" href = "#" > < span > < /a > </span > buttons



    CSS code:

    {body
    do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background: #f2f2f2;
    margin: 0;
    padding: 0;
    Color: #000;
    do-size: 14px;
    text-align: justify;
    }

    span. MenuHead
    {
    do-family: 'Trebuchet MS', Helvetica, without serif.
    padding: 5px 5px 5px 15px;
    color: #888686;
    font-size: XL;
    }
    span.bodyheader1
    {
    do-family: 'Trebuchet MS', Helvetica, without serif.
    color: #888686;
    }
    span.bodyheader2
    {
    do-family: 'Trebuchet MS', Helvetica, without serif.
    color: #db1928;
    }
    / * ~ ~ Tag of the element selectors ~ ~ *.
    UL, ol, dl {}

    padding: 0;
    margin: 0;
    color: #383838;
    }
    H1, h2, h3, h4, h5, h6 {}
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    color: #383838;
    text-align: left;
    }

    p
    {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    color: #383838;
    }

    an img {}
    border: none;
    }

    a: link {}
    color: #414958;
    text-decoration: underline;
    }
    a: visited {}
    color: #c03;
    text-decoration: underline;
    }
    a: hover, a: active, a: {emphasis

    text-decoration: none;
    make-weight: bold;
    color: #db1928;
    }

    . Container {}

    Width: 800px;
    Background: #FFF;
    margin: 0 auto;
    }

    . Header {}
    Background: #FFF;
    }

    {.sidebar1}
    float: left;
    Width: 20%;
    Background: #FFF;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    . Happy {}
    padding: 10px 0;
    Width: 80%;
    float: left;

    }

    . Content ul, ol {} content
    padding: 0 15px 15px 40px;
    }

    UL. NAV {}
    list-style: none;
    margin-bottom: 15px;
    }

    UL. NAV, the ul.nav: visited {}

    padding: 5px 5px 5px 15px;
    display: block;
    text-decoration: none;
    Background: #FFF;
    Color: #000;
    }
    UL. NAV a: hover, ul.nav a: active ul.nav, one: {emphasis

    background: #f2f2f2;
    color: #888686;
    }

    .footer {}
    Padding: 15px 0;
    Background: #FFF;
    do-size: 12px;
    position: relative;
    Clear: both;
    }

    {.subheading}
    color: #db1928;
    make-weight: bold;
    do-size: 16px;
    }
    .logo {}
    display: block;
    Width: 95%;
    margin-right: auto;
    left margin: auto;
    padding-bottom: 20px;
    }
    {.logopadding}
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    }

    list {}
    do-size: 16px;
    color: #db1928;
    }

    .picright
    {
    float: right;
    Width: 105px;
    margin: 0 10px 10px 10px;
    }

    .picleft
    {
    float: left;
    Width: 170px;
    margin: 0 5px 5px 5px;
    }

    .uppertext
    {
    float: left;
    Width: 510px;
    }

    .lowertext
    {
    float: right;
    Width: 460px;
    }

    . Center
    {
    text-align: center;
    }

    / * - THIS IS THE CODE THAT I CUT AND PASTED-* /.

    . Clear {/ * generic container (i.e. div) for floating buttons * /}
    overflow: hidden;
    Width: 100%;
    }

    {a.Button}
    background: transparent url('images\bg_button_a.gif') top no-repeat scroll right;
    color: #444;
    display: block;
    float: left;
    font: 12px arial normal, without serif.
    height: 24 PX.
    right margin: 6px;
    padding-right: 18px; / * sliding doors padding * /.
    text-decoration: none;
    }

    a.Button span {}
    background: transparent url('images\bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 5px 0 18px;
    }

    Now, I see something obvious.  You used REVERSE slashes in the path to the images.  There is NO backslashes on the web.  They should be oblique.

    background: transparent url('images/bg_button_span.gif') no-repeat;

  • Looks great in mode live view, but not in Design view after adding php code

    Can anyone help with this?  I have a php with HTML5 page that looks much like the design view, live view and in the browser. I add php code above <! doctype html > and the page goes in all directions in design mode. If I switch to live view, the page looks a lot like new. The above code <! doctype html > is php with zero html completely. It's as if design mode try to read php despite start-up code and tags php in place.

    The only work around, I have found is to place <! doctype html > at the top of the page and view design looks great again, but this cannot be used in the browser as I have the php code that requires it to be the first items found.

    I use Dreamweaver CC 2014

    Any help greatly appreciated,

    Dave

    Nancy, just to update you I had a bit of success by changing my invisible elements preferences.

  • (Graphics) CSS styles do not render in Live view mode

    I can't find any tutorials on this particular issue. I guess I hit a button somewhere and off for the Live view rendering in DW CS4. I see very well in the Design view, this isn't a coding problem. When I want to watch in Live view mode, only the text appears.

    HEEELP!

    Samantha

    This happened to me today because I have copied a page in a page and ended up with two DOCTYPE in the same page.  Everything I have said, it could be to do with the way you have written to the page.

    Martin

  • How to pass the album Live view mode Design while working on a fluid page? The drop down option isn't there as if it was on other pages.

    How to pass the album Live view mode Design while working on a fluid page? The drop down option isn't there as if it was on other pages.

    You can not.  If you want to work with FGLayouts, I recommend drop back to the Release of June 2014 CC before they took the Design of FGLayouts mode.

    You can get the version of June 2014 DW direct links below:

    Win: http://download.adobe.com/pub/Adobe/Dreamweaver/WIN/CC/Dreamweaver_14_LS20.exe

    Mac: http://download.Adobe.com/pub/Adobe/Dreamweaver/Mac/CC/Dreamweaver_14_LS20.dmg

    Solution #2: Modify your CSS FGLayout file by adding an X to the code as shown below.  This trick DW into thinking that it is a normal page, so you can use the new Design view.   NOTE: Do not change the CSS in design Panel.  Do it in Code view.  Record.  Close DW.  New launch DW.

    /*

    Properties Grid Dreamweaver fluid

    ----------------------------------

    DW-num-CLO-mobile: X4;

    DW-num-CLO-Tablet: 8;

    DW-num-OCOL-Office: 12;

    DW-gutter-percentage: 25;

    =====================================

    Nancy O.

  • DW CS5 - police displayed in the mode display/Live Design is spec'd like us. The police when Live View is turned off is radically different. Why?

    Subject line says it all. In nine pages, the police specify us for the page appears correctly, regardless of whether the Live View is active or inactive. But we have an existing site, where this is not the case - the fonts non - Live View is very different from what we spec'd (and what we see) when Live View is on... Someone you will suggest where to look for a cure? Maybe a problem of .css file? Thank you. -Jim

    Non-Live View = design mode or in preview in browsers.

    Use Firefox or Chrome to listen to samples.  Right click > inspect element to see what CSS styles are to make your text.

    Nancy O.

Maybe you are looking for