Css shows in live view, not in design view

Hi all-
I'm new to dreamweaver and was trying to move a site I have already coded into dreamweaver, hopefully to be able to find errors but mostly to be able to update more quickly in the future.
I've noticed one pecularity (at least to me!) - I have some basic "rounded corners" with css that show up properly in the "Live View" or in a browser, but in design view they are just standard boxes with no css attributes added.
Is this normal, or is it something in my code?

It's most likely completely normal. I know in my DWCS4, it doesn't recognize any CSS3 items in Design View.
As long as your pages are validating and previewing in the browsers correctly, you're good to go.
You can run the validators here to check for errors...
CSS: http://jigsaw.w3.org/css-validator/
HTML: http://validator.w3.org/

Similar Messages

Design View not matching Browser View

I mostly work in Design View and sometimes I notice there are extreme differences in what I am seeing in Design View and what I see when I preview the site with various browsers.
I now have a footer that I can't even see in design view but when I preview in a browser it's placed perfectly at the bottom of my main div. I later noticed that it's at the very top of the design view
out of view so that the very bottom of my footer div is barely showing on the very top of my design view window. Do I have code issues that are interfering? I am a complete newbie with code by the way.
My site is at: dev.soundscapemedia.com
Many thanks

Design view should never be considered accurate. It is Dreamweaver's rough guestimation of how things will look if rendered in a browser. The only "view" that may be considered accurate is the "Live" view - because it actually is rendered using a browser engine. Even with Live view though, one should always test against several major browsers.
So my suggestion/solution would be to ignore whatever crazy stuff Design view shows and just make sure you code to web standards and preview in a browser (or use Live view).
Remember: Design view is only a rough guestimate by Dreamweaver and should not be considered accurate.

It's in the code, but not in Design View...

I'm making a few small changes to the template of my site, and an odd problem has cropped up...
Here's the front page of the site: http://www.nemesis.to
The whole site has the same basic layout (only the "maincontent" div, the big space with a black background, has different stuff from page to page).
I'm trying to make some changes to the links in the grey panel at the top of every page - this is a div named "header2".
Somehow, I've managed to make the entire "header2" div vanish from Design View. But its code is still present and correct in Code View.
In Design View, I just see the white panel at the top of the page (the div named "header") with all its content, then the big area with the black background (the "maincontent" div), also with all its content. The grey panel which should sit between them has gone. But its code is all there!
I have no idea what caused this, or how to get Design View to show everything. I don't dare save the template, or upload any of my changes, in case the links panel disappears from my site, but I've undone all my changes so the code I'm looking at in Dreamweaver is exactly as it appears if you look at 'View Source' on the uploaded pages...
Unless, of course, I've missed something. All wise words gratefully received, because I 'm lost!

This is the style sheet for the problem page....and I think I may have spotted an error. "header2" is only 300 pixels wide by 50 pixels tall. That's way smaller than it should be!
Having said that, I have no idea how that could've changed, since I didn't (knowingly) alter anything...
I'm also not sure why I have so many font declarations. Again, I didn't knowingly do it that way. I was under the vague impression that Dreamweaver flagged up redundant code...
Anyway, here comes the CSS. "header 2" should be the same width as "header" so I think that's where the problem lies...
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #333; text-align: center; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; height: 40px; width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; } #container { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #000; text-align: left; width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 20px; margin-left: auto; border: 4px solid #FFF; padding: 0px; } #header { background-color: #FFF; width: 940px; height: 268px; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } #header2 { text-align: left; width: 300px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 4px; border-left-width: 0px; border-bottom-style: solid; border-bottom-color: #FFF; background-color: #CCC; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: #000; border-top-color: #FFF; float: right; height: 50px; } #maincontent { font-family: Arial, Helvetica, sans-serif; color: #FFF; background-color: #000; text-align: left; width: 920px; overflow: hidden; padding-top: 10px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } #footer { background-color: #CCC; text-align: center; padding: 10px; width: 940px; border-top-width: 4px; border-top-style: solid; border-top-color: #FFF; overflow: hidden; } #footer2 { color: #000; width: 920px; border-top-width: 4px; border-top-style: solid; border-top-color: #FFF; background-color: #CCC; height: 90px; overflow: hidden; padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } a { font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 24px; font-weight: bold; } #container #header #masthead { background-color: #FFF; text-align: left; float: left; height: 260px; width: 550px; padding-left: 15px; } #container #header #topadbox { background-color: #FFF; border: 4px solid #666; } #container #header #topadbox { background-color: #FFF; float: right; height: 250px; width: 300px; padding: 0px; margin-right: 0px; border-top-width: 6px; border-right-width: 20px; border-bottom-width: 6px; border-left-width: 20px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #CCC; border-right-color: #CCC; border-bottom-color: #CCC; border-left-color: #CCC; } #container #footer #bannerbox { height: 90px; width: 728px; overflow: hidden; float: none; margin-right: auto; margin-left: auto; } #container #footer2 #creditsbox { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; color: #000; background-color: #CCC; text-align: left; float: left; height: 90px; width: 250px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 15px; } #container #footer2 #creativecommonsbox { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000; background-color: #CCC; text-align: left; float: left; height: 90px; width: 500px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; line-height: 14px; } #container #footer2 #backtotopbox { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; background-color: #CCC; text-align: left; float: left; height: 80px; width: 100px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; } .floatleft { float: left; margin-right: 8px; margin-top: 0px; margin-bottom: 8px; margin-left: 0px; } #container #footer2 a { } #container #footer2 a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px; } .overalltitle { font-family: Arial, Helvetica, sans-serif; font-size: 38px; font-weight: bold; color: #FF0; } .headlineband { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #FFF; } .supportband { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFF; } .datedetails { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: italic; font-weight: bold; font-variant: normal; color: #FFF; } .maintext { font-family: Arial, Helvetica, sans-serif; font-size: 17px; font-weight: normal; line-height: 19px; } .floatright { margin-top: 6px; margin-bottom: 6px; margin-left: 8px; } #container #maincontent #archiveboxleft { font-family: Arial, Helvetica, sans-serif; float: right; width: 400px; margin-right: 40px; } #container #maincontent #archiveboxright { font-family: Arial, Helvetica, sans-serif; float: left; width: 400px; padding: 0px; margin-left: 40px; } #maincontent #archiveboxright p a { font-family: Arial, Helvetica, sans-serif; color: #F00; } #container #footer2 #creditsbox a { } #container #header2 a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } #container #maincontent #archiveboxright p a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFF; } #container #maincontent #archiveboxleft a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFF; } #container #maincontent .maintextbigger a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; } #container #maincontent .maintextbigger a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; } .centreimage { text-align: center; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #container #maincontent .linkbox { background-color: #000; height: auto; width: 500px; margin-top: 0px; margin-right: 210px; margin-bottom: 0px; margin-left: 210px; padding-left: 20px; } #container .searchsection { text-align: center; height: 30px; width: 660px; border-top-width: 4px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; background-color: #CCC; padding-top: 10px; padding-right: 150px; padding-bottom: 10px; padding-left: 150px; margin-right: auto; margin-left: auto; overflow: inherit; } .specialheading { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-style: normal; line-height: normal; font-weight: bold; color: #FF0; } .specialheading2 { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; } .searchtext { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .frontpagecreditstext { font-family: Arial, Helvetica, sans-serif; font-size: 10px; } .maintextbandname { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #FF0; font-weight: bold; } #navigationbox { background-color: #CCC; float: left; height: 50px; width: 550px; }

Ever since I turned on ITunes match, album art shows in coverview but not in other views on my iphone. Anyone else having this problem?

ever since I turned on ITunes match, album art shows in coverview but not in other views on my iphone. Anyone else having this problem?

jsavage9621,
It pains me to hear about your experience with the Home Phone Connect. This device usually works seamlessly and is a great alternative to a landline phone. It sounds like we've done our fair share of work on your account here. I'm going to go ahead and send you a Private Message so that we can access your account and review any open tickets for you. I look forward to speaking with you.
TrevorC_VZW
Follow us on Twitter @VZWSupport

How do I view content in Design view once everything is grayed out?

I was building a web site. When I switched from horizontal view to vertical view I was no longer able to view content in design view. The entire page was grayed out. I'm also not able to view content in design view in other web sites too. How do I fix it?

Well, yes the rest of the phone works, but the sole reason I got it was to able to view these files. I had a Blackberry and I wanted a bigger screen. Work allowed me to choose the iPhone or the latest Galaxy phone. I chose the iPhone because I was told "it just works".
I know the Galaxy reads the .txt files because coworkers have it. If the iPhone wont allow me to read the file then it doesn't matter if "it just works" because it can't do what I need it to do.

Why does images in preview are in a different position and resolution than in design view? In design view I have to place the images of screen to fit in preview.

Why does images in preview are in a different position and resolution than in design view? In design view I have to place the images of screen to fit in preview.

Already changed in different settings. Here is a screenshot when set to "Original Size".

Live View worse than Design view, both bad, CSS & layout not applying

Howdy,
So I'm trying to do some work on the the page seen here:
http://www.juniper.net/us/en/products-services/network-management/
(I've attached a screenshot of it.)
I view the source for that page and copy it into a new blank page in code view using DW CS4.
I copy all the relevant related files, as far as I know, including at least all the CSS and image files.
I view the page in Design View, and some of the styles, primarily on the text are clearly being applied. The layout, though, is all wrong, with the navigation spread out over the top without any text styling or background images, tho a few other images do show up (one in the header area and some in the body, ones that should all be about in the same directory), and the content area pushed waay out the right.
Live View is even worse, no styling at all on any of the text, and it doesn't seem to be able to locate any of the images, so it's all plain default HTML-styled text.
This is a fresh installation of CS4.
DW 8 seemed to have a similar problem rendering this layout in design view, but appplying a few design-time stylesheets, ones that should have been applying, but somehow weren't, seemed to do it, or at least pretty close. That same strategem did not seem to work here. Plus, doesn't the fact that the correct stylesheets show up as "related files" in the related files bar mean that DW knows about them and are/should be doing its level best to be applying them already?
I'm not sure how much more I can share, but does anyone have any thoughts about how to make DW render correctly?

So here's a little more info for a more complete picture of the problem...
I do have access to the original CSS, JS, and image files...When I said that I copied all the files that I believe to be relevant, I mean that I downloaded all the files from the \assets and \shared directories from the content management system, which should contain all the CSS, JS, and image files that the page uses.
When I view the file into which I saved the page's View Source on my testing server via an actual browser window, the page looks as expected.
So, to sum up:
All the support files and "related files" seem to be in place.
When viewed through a browser fed by a web server, the file/page looks as expected. Checked in Firefox v3.5.3, IE 8, and Chrome v3.0.195.24.
When viewed in Design View, the layout looks wonky, some of the styles seem not to be applied to the navigation/header area (notably, I guess, the positioning of the navigation and content area relative to the navigation, as well as some of the text styling on the navigation), and most if not all the styling (text formatting, layout) seems to be applying in the content area. The Related Files bar seems to list all the expected related files.
When viewed in Live View, no styling is being applied anywhere. Live View is based on an integrated WebKIT browser, so it should render most closely to Chrome, right?
I know little to nothing about relevant web server configuration. Could it be possible there's some web server configuration that's set up on Juniper's web server that Dreamweaver doesn't mimic, at least by default? Are there web server configuration settings for the integrated Live View "server" that I could check?

CS3 will not show CSS3 and HTML5 in WYSIWYG "design view"?

So, just got a mobile site template that is CSS3 and HTML5. When I open it to work on it in Dreamweaver CS3, the CSS is not displayed in the "design view" but yet, when you preview in browser, all is perfect. In the WYSIWYG design view, I see the content, but styling is missing. Preview in browser, it is all there.
Is this just a limitation in the CS3 WYSIWYG design view function and I am out of luck? Is there a "fix" - other than a costly upgrade - for it in CS3?

yuytjtdh wrote:
So, just got a mobile site template that is CSS3 and HTML5. When I open it to work on it in Dreamweaver CS3, the CSS is not displayed in the "design view" but yet, when you preview in browser, all is perfect. In the WYSIWYG design view, I see the content, but styling is missing. Preview in browser, it is all there.
Is this just a limitation in the CS3 WYSIWYG design view function and I am out of luck? Is there a "fix" - other than a costly upgrade - for it in CS3?
Dreamweaver's design view isn't perfect WYSIWYG even for CSS2.1. Also, I believe you are using a very old DW (CS3) so you are definitely out of luck. Have you tried using the trial version of CS 5.5? It is worth a try but I am not recommending you to buy it now because CS6 is expected to be released in the second half of this year if not before.
Please note DW isn't a WYSIWYG editor so I won't rely on it at all. Always view your page in the two main browsers - FF and IE8/IE9
Good luck.

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.

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.

Is there anyway to lock CSS rules? What's happening in design view?

Hi,
I have no idea what I've done, but I've accidentally deleted some CSS rules. Now my design view shows almost a random pattern, yet most things seem to still be working when I view it in a browser.
So,
Is there a way to lock CSS rules so that you don't accidentally loose them? Is there a way to toggle them on and off? Why does my design view suddenly look all whacked out?
The jpg shows my design view and here is the link to the page.
http://test.taffyproductions.com/reservations.htm

You have an id set on one of the divs, but there is no rule for that ID selector:
<div id="sidebar2-1"><img src="_images/sidebar2.jpg" alt="sidebar2" width="180" height="479" /></div>
Change the id to sidebar2 and see what happens. The page should fall back into place correctly.
There is no way to 'lock' in styles, you just need to be careful on editing the style rules as you go
You could always keep a backup copy of a stylesheet that works correctly and if you then want to play around with the rules, do so, but knowing that you have a backup copy if you need it.
I'd also take a look at the naming convention you use for file names. I'd not start a file name or folder with and underscore... some browsers may choke. always better off starting a name with a letter, no characters, or numerals etc.,to be on the safe side.
Nadia
Adobe Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap

When i connect iphone 3g to itunes the device shows up, but im not able to view the summary?, When i connect iphone 3g to itunes the device shows up, but im not able to view the summary?

How do i restore my phone? Im not capable of viewing the summary. When i click the iphone device nothing shows up in the window. It just says Iphone.

i need to know this too :/

Viewing Images in Design view

Well I've been working on my site prior to getting
dreamweaver, and I open the .html of one of my pages, but it
doesn't show anything but the images in a grey box and text in
tables. When I preview in a browser it looks perfect though, is
design view supposed to be like this? Also whether it makes a
difference or not, the .html is already uploaded on my site so my
image links are www.website.com/img/image.gif
I also included a screenshot, just incase I don't make sense.
http://img297.imageshack.us/img297/3197/dreamweaverdesignviewerni4.jpg

Which DW and which OS?
Is VIEW | Display External Files checked?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"terry_cpac" <[email protected]> wrote in
message
news:fc9f90$dp6$[email protected]..
>I too have been experiencing this problem only recently.
I have been using
>DW
> to create eNewsletters, so all images are located on a
web server. I use
> the
> whole file path including the
http://www. etc. for all images and
> graphics. The
> Design view pane used to display these images with no
problems until
> recently.
> Now, no matter what I do, I can't get it to access any
image to display in
> the
> design view pane. This has been causing DW to hang every
time I try to
> open a
> file with images referenced this way. I hope there is a
solution to this
> problem.
>

Gantt Chart View not listed in View Selector

View Selector is missing view of type “Gantt” for List based on list template “171” i.e. “TasksWithTimelineAndHierarchy”
Missing Gantt View
Visible in Ribbon
What we have done to create the Gantt view is as follows
We are working with remote provisioning pattern to provision the site and required lists
A Task List is provisioned using CSOM (Managed .Net) via a Provider Hosted App that is hosted as Azure Web Site
We are creating a view based of type “Gantt”
Sample ViewXml used for creating the view. Highlighted below is the property we have set for the same
<View>
<Title>Tasks_View_GanttChart</Title>
<DefaultView>false</DefaultView>
<PersonalView>false</PersonalView>
<RowLimit>30</RowLimit>
<Paged>true</Paged>
<Scope>DefaultValue</Scope>
<ViewType>Gantt</ViewType>
</View>
Standard View Menu (View Selector) does not show Custom Gantt chart (created via CSOM) in the menu list. Refer screenshot mentioned earlier
Custom Gantt chart view is available in ribbon menu though
The same custom Gantt chart is visible in the standard menu if we are in “out of the box Gantt chart View” (Below ‘OOTB Gant chart’ is created from front end using the template ‘Gantt chart view’)
Sample Code used to create the view
ViewCreationInformation viewInfo = new ViewCreationInformation()
Title = listViewTemplate.Title,
ViewFields = viewFields,
SetAsDefaultView = isDefaultView,
PersonalView = isPersonalView,
Query = query.ToString(),
RowLimit = rowLimit,
Paged = paged,
ViewTypeKind = viewType
View view = list.Views.Add(viewInfo);
web.Context.ExecuteQuery();
Any clue on this behavior? We have the same issue with Calendar View Type as well for the Calendar List.

I found solution:
You need modify XsltListViewWebPart tool bar option from one value to another, and then back. That solves that bug in SharePoint.
public static void FixGanttIssue(SPList list, string ViewName)
SPSite site = list.ParentWeb.Site;
SPLimitedWebPartManager AllItemsMan = site.RootWeb.GetFile(list.Views[ViewName].Url).GetLimitedWebPartManager(System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared);
XsltListViewWebPart wp = (XsltListViewWebPart)AllItemsMan.WebParts[0];
wp.Toolbar = "Summary Toolbar";
AllItemsMan.SaveChanges(wp);
wp.Toolbar = "Full Toolbar";
AllItemsMan.SaveChanges(wp);

Viewing Stylesheet in Design view

HI,
Two of us are working on the same website, sharing the same files. In our site set up we both are using the same shared drive with the files.
When I view a page in design view it looks fine. When the other person views the page in design view its as if the view cannot see the style sheet so its just a long list of of text and images. We are both using Dreamweaver CS3 vers 9. Is there something in the setting for Dreamweaver that we are not setting to view the style sheet correctly?

Sorry been gone. Thanks for you help along the way.
OK I think what you want is Q:\Website - New SNR Mock Site\ That is what it is for both us except for the drive letter since we are in a shared drive system and it just depends on how many drives we have been assigned.
Yes he does have "Preview with Temp Files" enabled.
Once again the reason we are using root relative links, is not some we decided on. We are using a template from our university that we are required to use. This area when we point to a style sheet is in part of the template that we cannot edit. We are pulling the style sheets to our server daily to grab any updates that the university IT group is making to style sheets. Not something we can control. But if you have a suggestion on how they should be coding this, any thing would be great. That group is in the middle of a new template design process.
A side note. When my colleague was working another site using the same templates he started having this problem. We were told by the IT group to always download a copy of the UCOMM folder to our working area of a website so that Dreamweaver could properly display the design. Even though we never put these files back to the server. Its only for viewing on our local site. COuld it be that somehow Dreamweaver is trying to find UCOMM from somewhere else, that it no longer exists?

Css shows in live view, not in design view

Similar Messages

Maybe you are looking for