CSS styles disappear when previewed in browser.

I created a web site following the Getting Started tutorials in Dreamweaver CS6. However, when I preview in the browser, the main page shows properly but if i click a link, the other pages do not seem to attach to the style sheet - BUT the style sheet reference is present in the code. Any ideas?
thanks

You are close to correct, but not quite there.
If you have enabled the use of temporary files in PREFERENCES > Preview in browser, when you preview a page from DW, you will actually create a temporary page from the current one and it's that temporary page that is displayed in the browser. Why create a temporary page to preview? Well, if your page's code contains any root relative links (as opposed to document relative links) then those will not work if the page is previewed directly. When a temp file is built, those links in the actual page are converted to document relative links in the temp file, and this temp file is then handed to the browser to preview.
Why don't root relative links work in a preview? When the browser sees a link like '<link href="/path_to_file.css"', it interprets the "/" as meaning the root of the HARD DRIVE, not the root of the site (browsers know nothing about DW sites), and will not find the linked file at that location (for example, C:/DW_path_to_file.css"). When those links are rewritten in the temp file being previewed as '<link href="path_to_file.css"', it works fine since the browser knows that means to look for the *.css file in the same folder as the file it is previewing.
Make sense? By the way, this is how DW has *always* worked.

Similar Messages

Menu Widget: Text disappears when previewed in browser ?

Hi All,
I've created a site and have a top level page, with a sub-page.
The site uses the Menu widget in Muse to create a menu with dropdowns for the sub-pages. However, when I preview the site in the browser, the state on the menu for the top-level page 'Normal and 'Active' functions disspears.
It does re-appear on rollover, so the browser knows it's there, but it isn't being displayed.
Any idea why?
And how I can fix this?
(Ive attached screenshots of the page within Muse and then the same page once previewed within the browser)
As always, soloutions and replies most apprieciated!
Browser preview
Browser preview on rollover function
Cheers!
Robbie.

Hi Robsta,
Looking at your 1st posted image, above, I would say (recommend) that the 2nd blue guide, from the top (the header guide), should be moved down and put just below your menu ... do this on the 'master page' ... thats the header guide line ... everything 'below' that line is page content (a menu is not page content) hence content changes throughout your website ... everything 'above' that line is your header information and stays in the same place regardless which page you are on and is shown on ALL pages ...
Now, if that doesn't fix the problem (the blue guide that needs moving, should be moved nevertheless) ... is it possible that some of the 'active' states in your menu have got messed up when you were changing your button colours? ... this would only happen if you were editing the menu with the 'Edit Together', 'unticked' ... I can see that the active state is set to grey already hence just asking ... also, sometimes if the 'header' guide is not where it should be, it does hide things below it as it doesn't know what should be shown or not ...so it's just a thought ... ...
cheers,
GemBro

Apply certain css styles only when JS is enabled?

I'm wondering if there's a relatively simple way to apply certain CSS styles only when JavaScript is enabled in the browser (and thus, not applied when JS is disabled)... I've created a jQuery-based image gallery, and I'd like to modify how it degrades by selectively disabling certain CSS styles...
thanks for any direction here.

Hi
As your jQuery image gallery would not work correctly if javascript was disabled,. The better approach would be to enable the required css styles using jQuery, (the title says this, but your post says the opposite).
To do this see the jQuery documentation regarding css, at -http://api.jquery.com/css/.
PZ

Why are my styles disappearing when I cut and paste?

Why are my styles disappearing when I cut and paste?

Go to Preferences, and then into ClipboardHandling. Click a radio button choice for All Information instead of Text Only.

CSS styles disappear in new template-based pages

hello: having some trouble. i've created a template for a new website and everything looks ok, but when i attempt to create a new page based on the template, all the css styles i've created disappear. i have a hunch it has something to do with the "body" stlye overriding everything else.
any suggestions are much appreciated.

The first suggestion I would have is to make sure the css that is being linked is not in an editable region on the template. Next, make sure the paths are correct. If both are in order you may need to post the template code.

Automatic updating when preview in browser

Hi, could anyone tell me how to get DWCS3 to prompt me to save changes to a page when I go to preview in a browser? It always used to, but now it goes direct to the preview and I have to save changes manually. What did I do?
Jazzygeofft

Under Edit >Preferences > Preview in Browser, if you uncheck the option for: Preview using temporary file
you will be asked to save before you can preview in the browser of your choice.
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap

When previewed in browser or on the server the path of my web site repeats folders. However the "href" in the html code does not show the repetition in the path.

If someone could help me on this one, this would be great. I am creating a web site that has several departments. I have categorized and saved each department in a main folder called "departments" and a subfolder for each one. In the Dreamweaver code view the pop-up menu links seem to show up properly, but when I preview in browser or upload to server "page not found" comes up because for some reason the address changes. Some parts of the address seem to be appearing twice, sometimes the entire path will appear twice as shown below:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/departments/p arks-and-recreation/pr-arabiamtn-map.html
that is incorrect and it takes me to "web page cannot be found".
It is obviously repeating the folders (hence the "departments/parks-and-recreation" twice. The correct link is:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr-arabiamtn- map.html
The link issues are happening in the pop-up menu. For example if you go to http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr-arabiamtn. html and rollover the link called "Arabia Mountain" in the links to the left side of the page, then click the pop-up menu link entitled "Arabia Mountain Map" that's where the problem occurs.
Can anyone tell me how I can fix this problem. I don't know what I should do with the code since it already appears correct in html view.
Please help if you can...
Thanks in advance for any possible help you can provide...

XonoBoom wrote:
It is obviously repeating the folders (hence the "departments/parks-and-recreation" twice. The correct link is:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr- arabiamtn-map.html
The link issues are happening in the pop-up menu.
This problem usually happens when the menu is either a server-side include or a library item using links relative to the document. When you reference a page at a different level of the folder hierarchy, the document-relative links no longer point to the correct destination.
Change the links in the menu to be relative to the site root.
A document-relative link usually looks like this:
<a href="../products/index.html">Products</a>
A link relative to the site root begins with a forward slash like this:
<a href="/products/index.html">Products</a>

Site won't display correctly when 'Published' to Business Catalyst but does when 'Preview' in browse

Basically I have a subscription to Muse and with that the ability to host one site with Business Catalyst. When checking the first site I designed I'd use 'Preview in Browser' and the site occasionaly displayed incorrectly, so I changed my habits to publishing the work-in-progress site to the BC url with this current site.
Unfortunately there are multiple display problems with doing this; the two images below show the difference between 'Publish' to the BC domain and 'Preview site in browser'.
I've cleared the cache of the browser multiple times and used both Firefox and Safari and the problem still remains. I'm assuming it's a problem with Business Catalyst?
Does anyone have a solution for this? Has data become corrupted in BC, and if so is there a way of 'flushing' the data held on the BC site clean to start from scratch?
Would really appreciate some help here as it's impossible to show my client the current state of the site
Thanks in advance
Phil
http://httpwiles06businesscatalystcom.businesscatalyst.com/clients.html

Hi Phil
I checked the site and i can see all the images in page.
Can you try to check with a different browser or if possible on a different system or device ?
Thanks,
Sanjit

Why can't Chrome find the webpage when Previewing in Browser?

Hi -
This is thoroughly bizarre to me.
I can preview any site I'm working on using any browser I have except Chrome (current version 33.0.1750.152).
As an example - when I use Preview in Browser - Chrome says "the webpage is not found" - the path to the page is:
file://external-drive/_PROJECTS/CLIENT/_files-from-client/_SITE-031614/index.html
My next step is to manually navigate to the page using Chrome's File/Open. This works perfectly but when the page appears the path is different:
file:///Volumes/external-drive/_PROJECTS/CLIENT/_files-from-client/_SITE-031614/index.html
This second path is the same path in the Manage Sites/Site/Local Site Folder line. All other browsers (FFox, Safari, Opera) use this second path. But for some reason Chrome has shortened the path to an incorrect address. Weird!
I don't think this is related to Mavericks because it was happening before that upgrade.
Has anyone else had this happen? Can anyone explain how I can fix this?
TIA your insight.
JL2
BTW - other details:
Dreamweaver version 12 (CS6), Mac OS X 10.9.2.

Stanko07 wrote:
Hi jl200,
I have the same problem since few weeks, and I am absolutely sure that jdaco answer isn't correct. All my files are on a desktop (iMac hard drive) all times and Dreamweaver has a problem with a preview in the Chrome browser. Few weeks ago everything was OK, so there isn't a problem with the files location. I think the problem has started after the last Dreamweaver update. Unfortunately I don't have any idea what to do to resolve this issue.
You're right, the answer provided might be part of the problem but it's not the solution to the whole problem. My files are located on the computer too and Chrome will not preview them, sometimes, most of the time.
I can't be asked to find out exactly why so I use Firefox or Safari.

Error when previewing in Browser

I am using Captivate 8. My projects work as they should, but when I try to Preview in Browser, for some reason Captivate is triggering Microsoft Word to open. I am totally stumped on this and could really use some input.

Check the file associations on your computer. It sounds like you may have MS Word set up as the default app to open HTM files.

Spinning Beachball when Preview in Browser is selected

I've spent several hours looking at the threads for slow
Dreamweaver, and have yet to find anything that works for me.
Whenever I choose, Preview in Browser, I get a spinning beachball,
and the page finally loads after 30-60 seconds.
I'm using an Intel Mac on a localhost server. Everything was
OK until recently. Now it's just too time consuming to wait to see
previews. Any original thoughts from the forum or anyone at
Adobe?

"don_langevin" <[email protected]> wrote in
message
news:g64lec$2vi$[email protected]..
> I've spent several hours looking at the threads for slow
Dreamweaver, and
> have
> yet to find anything that works for me. Whenever I
choose, Preview in
> Browser,
> I get a spinning beachball, and the page finally loads
after 30-60
> seconds.
> I'm using an Intel Mac on a localhost server. Everything
was OK until
> recently. Now it's just too time consuming to wait to
see previews. Any
> original thoughts from the forum or anyone at Adobe?
I'm sorry that I don't know the solution to what you
describe. But I wanted
to mention that I have barely, if at all, used the Preview
feature in the
past year or two (and many web sites built).
Dreamweaver's Design View is pretty accurate in the later
versions, so I
tend to use it to get a general idea of the layout I'm
producing, uploading
the files to the server to check them in real browsers.
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

Dreamweaver CC Child Page not displaying CSS when previewed in browser

Forgive me as I'm completely new to Dreamweaver. I'm working through Dreamweaver CC Classroom in a book at the moment and I'm having issues with the browser preview of my child page. In dreamweaver everything appears as it should, (as far as I know), with my CSS stylesheet in the sources panel. It's connected to all my media types and displaying appropriately in my "live" view. But, when I go to "Preview in Web Browser", it's as if no stylesheet is attached. Can someone help? I have restarted Dreamweaver just incase it was a program issue, but the problem persisted.

It's linked to my site. See the underlined portion.
Code goes as follows:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/menu.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Meridien GreenStart Association – Green News</title>

<link href="/mygreen_styles.css" rel="stylesheet" type="text/css">


<meta name="description" content="Meridien GreenStart Association – add description here.">

<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n4:default;paytone-one:n4:default;kreon:n4,n7: default;patua-one:n4:default;cousine:n4:default.js" type="text/javascript"></script>
</head>

Styles Won't Preview in Browser

This must be something simple I haven't set up right...
(fairly new at this) ... but I've created a stylesheet for the site
I'm working on and the styles all show up fine in Dreamweaver, but
whenever I try to preview the pages in a browser, the styles are
all out of wack.
This happens in both IE and Safari.
Does anyone have an idea of what I'm doing wrong?
Any help is greatly appreciated.
dm

If you are building static pages (and it sure sounds like you
are) then you
do not need a testing server.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Bob from Alexandria" <[email protected]>
wrote in message
news:fpl698$n4l$[email protected]..
> DM,
> I was wondering if you might be able to assist with
essentially the same
> problem. Until recently, all worked fine. Now, and I am
not sure what I
> changed, the html shows up fine in the browser preview,
but the linked CSS
> does
> not (both in Firefox and Explorer) They are both
(index.htm and
> default.css)
> in the same folder called Silent Auction New Site (and
work fine in
> Dreamweaver
> itself). These are the settings:
>
> Local Root: C:\Inetpub\wwwroot\Silent Auction New Site\
> Default Images: C:\Inetpub\wwwroot\Silent Auction New
Site\images\
> Testing Server Folder: C:\Inetpub\wwwroot\
>
> The location when I hit F12 is :
http://localhost/TMPey3nnwm7hs.htm
>
> I did recently enable IIS, thinking that I needed to,
although it wasn't
> installed before when all worked. I have been moving the
files from
> htdocs to
> wwwroot, to try and solve the problem, and at this point
am at a loss as
> to
> where they should be.
> Thanks
> Bob Baird
>

Looks different when previewing in browser. Help?

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled
Document</title>
<style type="text/css">

</style></head>
<body>
<div
class="container">
<div class="header"><img
src="Templates/warranty_sticker_2004.jpg" width="902" height="302" /></div>

<div class="sidebar1">
    <ul
class="nav">
      <li><img src="links/home.jpg" width="181"
height="44" /></li>
      <li><img
src="links/ultraaircare.jpg" width="181" height="44" /></li>
<li><img src="links/pricing.jpg" width="181" height="44"
/></li>
      <li><img src="links/allergiesandasthma.jpg"
width="181" height="44" /></li>
      <li></li>
<img src="links/contact us.jpg" width="181" height="44" />
</ul>
    <p> </p>
<p> </p>
    <p> </p>
<p> </p>
    
</div>

<div
class="content">
    <h1>Instructions</h1>
    <p>Be
aware that the CSS frfjfyukuhjiklui9liol;ko;i90or 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 liquid 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> </h2>
    <p> </p>
<p> </p>
    <p> </p>

</div>

<div
class="footer">
    <p>Copyright UltraAircare
      
    </p>
</div>
</div>
</body>
</html>
So I just started a website for a project that I have to do. So far everything has been going well. Everything shows up perfect in liveview in Dreamweaver CS5, but now that I'm previewing it in internet explorer, this is how it shows up. Help anyone? Any ideas?

Link please.
Bob

CSS styles not displaying correctly in browser. CS4

I've come across a strang problem. When testing my project in a browser the CSS isn't showing at all. So, as a test, I published one of the DW preset templates (A two clm elastic jobbie) and that CSS doesn't show either.
Everything is aligned left. Boarders, gutters etc are ignored.
When I'm viewing it in design view everything looks fine.
Any ideas?

Makes no difference at all, Nancy.
OK. Just to clarify. If the HTML document isn't saved first, you're apt to get a link like this which points to the local hard drive.
<link href="file:///C|/Site-Name/Styles/Basic.css" rel="stylesheet" type="text/css" />
Assuming a Local Site Folder has been properly defined, DW should resolve the link to the proper path when the page is saved.
<link href="Styles/Basic.css" rel="stylesheet" type="text/css" />
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS styles disappear when previewed in browser.

Similar Messages

Maybe you are looking for