Template files display as code in the browser.

Question

I recently had to reinstall DW and delete my preferences from my machine.   I now have an odd issue.
When working in a template file (.dwt) If I do a "preview in browser" (Firefox, IE, or Chrome) the browser shows me the template as a text file (code view) not rendering it.
I have the newest browsers and DW CC 2014.2  - Windows 8.1
Any ideas?   This worked before I removed and reinstalled DW (except in IE).  Now it does not work in any of the browsers.
I have tried old sites and files... same for them all.
Using html5 files.
I know it is probably something simple... but I cannot seem to find it or and answer in the nets.
Thanks for your help!

Answer 1

Here is my basic css file.
@charset "utf-8";
/* ======================================================== */
/*  GENERIC RESETS  */
/* ======================================================== */
body, div, a, img, span, iframe, audio, video,
p, h1, h2, h3, h4, h5, h6, strong, small, ul, ol, li,
pre, code, blockquote, sub, sup,
table, th, td, tr, tbody, tfoot, thead,
form, fieldset, legend, label, input, textarea,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary  {
margin: 0px;
padding: 0px;
border: 0px;
img {
border: none;
max-width: 100%;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
nav ul {
    list-style:none;
table {
border-collapse: collapse;
border-spacing: 0;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section, summary {
display: block;
/* Corrects `inline-block` display not defined in older browsers */
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
/* Corrects issue for `hidden` attribute not present in older browsers */
[hidden] {
   display: none;
body {
/* Prevents iOS text size issues after orientation change */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
* Correct overflow not hidden in IE9
svg:not(:root) {
overflow: hidden;
/* ======================================================== */
/*   BASIC STYLES OF SITE - STANDARD STYLES FOR ALL SIZES */
/* ======================================================== */
body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
line-height: 1.3;
background-color: rgba(255,255,255,1.00);
header {
margin-left: auto;
margin-right: auto;
padding: 10px 2%;
nav {
padding-top: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-weight: bold;
background-color: rgba(255,255,255,0.85);
color: rgba(255,255,255,1.00);
font-size: 1.125em;
nav li {
display: block;
width: 100%;
nav li a:link, nav li a:visited  {
text-decoration: none;
color: rgba(255,255,255,1.00);
display: block;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(9,167,230,1.00);
nav li a:hover {
text-decoration: none;
color: rgba(0,0,0,1.00);
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(255,255,255,1.00);
#mainContent {
background-color: rgba(255,255,255,0.85);
padding: 10px 2%;
footer {
background-color: rgba(34,99,183,0.65);
margin-top: 10px;
padding: 10px 2%;
#copyright {
padding: 20px 1%;
font-size: 0.75em;
text-align: center;
/* ======================================================== */
/*  TEXT AND LINK SETTINGS   */
/* ======================================================== */
h1 {
font-size: 1.5em;
color: rgba(9,167,230,1.00);
h2 {
font-size: 1.375em;
color: rgba(43,43,43,1.00);
h3 {
font-size: 1.25em;
color: rgba(9,167,230,1.00);
h4 {
font-size: 1.125em;
color: rgba(238,22,150,1.00);
h5 {
font-size: 1em;
color: rgba(252,176,52,1.00);
h6 {
font-size: 0.875em;
color: rgba(115,158,1,1.00);
#mainContent a:link, #mainContent a:visited {
color: rgba(9,167,230,1.00);
text-decoration: none;
#mainContent a:hover {
color: rgba(238,22,150,1.00);
text-decoration: none;
#copyright a:link, #copyright a:visited  {
text-decoration: none;
color: #09A7E6;
#copyright a:hover {
text-decoration: none;
color: rgba(9,167,230,1.00);
#mainContent ul li {
margin-left: 30px;
line-height: 1.3em;
#mainContent ol li {
margin-left: 30px;
line-height: 1.3em;
.clearfix {
clear: both;
margin-left: auto;
margin-right: auto;