PDA

View Full Version : DW 8 on Mac Pro - CSS won't preview in browser


mmermaid
02-06-2007, 04:31 PM
Hello,

I am a newbie to DW8 and this forum which I am pleased to have found. Anyway, I am stepping through some CSS in DW tutorials and when I try to preview in any browser (firefox, camino, safari, opera, shiira) I am not seeing the CSS rules which I have created and applied in DW and which I see plainly within DW. I tried trashing the .plist file, emptying my browser caches, and repaired my Mac's permissions - still I cannot see the CSS when in preview in browser. I am only trying to do this locally as I am working within a tutorial. Can anyone help me with this? BTW I am using DW 8.0.2.2809 and Mac OS 10.4.8.

Much thanks.

domedia
02-06-2007, 05:19 PM
I'm guessing the path to the CSS file is wrong, but unless you can give us the actual code, it's just guessing :)
http://www.dreamweaverclub.com/forum/showthread.php?t=23515

Welcome to the Forums btw!

mmermaid
02-06-2007, 05:44 PM
It is not an external CSS style sheet - I will copy and page the code of the index.html file below with the CSS rules within (as a side note - the links were set in the Page Properties box and though they did not work at first in preview in browser - they do now.) The class rules for .maintext, .section, .subsection, .subhead and .subnav all do not show up in preview in browser. Thanks.

<head>
<title>Welcome to teacloud.com</title>
<csscriptdict>
<script type="text/javascript"><!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImagesArray(array) {
if (preloadFlag == true) {
var d = document; var img;
for (var i=0; i<array.length; i+=2) {
img = null; var n = array[i];
if (d.images) {img = d.images[n];}
if (!img && d.getElementById) {img = d.getElementById(n);}
if (img) {img.src = array[i+1];}
}
}
}

function changeImages() {
changeImagesArray(changeImages.arguments);
}


// --></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
if (document.images) {
pre_aboutus_down = newImage('../images/nav/aboutus_down.gif');
pre_brewing_down = newImage('../images/nav/brewing_down.gif');
pre_drinking_down = newImage('../images/nav/drinking_down.gif');
pre_catalog_down = newImage('../images/nav/catalog_down.gif');
pre_contact_down = newImage('../images/nav/contact_down.gif');
preloadFlag = true;
}
}

// --></script>
</csactiondict>
<style type="text/css">
<!--
.maintext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
color: 484B3A;
}
.section {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: 737A51;
}
.subsection {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: 664322;
}
.subhead {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: 664322;
}
.subnav {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
line-height: 7px;
font-weight: bold;
color: 664322;
padding-left: 78px;
}
a:link {
text-decoration: underline;
color: #006633;
}
a:visited {
text-decoration: underline;
color: #006633;
}
a:hover {
text-decoration: none;
color: #660000;
}
a:active {
text-decoration: underline;
color: #FFFFFF;
}
-->
</style>
</head>

<body onload="preloadImages();" bgcolor="#a3a987" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<table width="752" border="0" cellspacing="0" cellpadding="0" align="center">
<tr height="0">
<td rowspan="2" align="center" valign="top" width="16" background="../images/elements/leftedge.gif"></td>
<td align="center" valign="top" width="720" height="0" background="../images/elements/green-tile.gif"><img src="../images/elements/header-top.gif" alt="" width="720" height="58" border="0" /><img src="../images/nav/nav_left.gif" alt="" width="54" height="32" border="0" /><a onmousedown="changeImages('aboutus','../images/nav/aboutus_down.gif');return true" onmouseup="changeImages('aboutus','../images/nav/aboutus_over.gif');return true" onmouseover="changeImages('aboutus','../images/nav/aboutus_over.gif');return true" onmouseout="changeImages('aboutus','../images/nav/aboutus.gif');return true" href="#"><img id="aboutus" src="../images/nav/aboutus.gif" alt="" name="aboutus" width="98" height="32" border="0" /></a><a href="#"><img id="abouttea" src="../images/nav/abouttea_down.gif" alt="" name="abouttea" width="104" height="32" border="0" /></a><a onmousedown="changeImages('brewing','../images/nav/brewing_down.gif');return true" onmouseup="changeImages('brewing','../images/nav/brewing_over.gif');return true" onmouseover="changeImages('brewing','../images/nav/brewing_over.gif');return true" onmouseout="changeImages('brewing','../images/nav/brewing.gif');return true" href="#"><img id="brewing" src="../images/nav/brewing.gif" alt="" name="brewing" width="98" height="32" border="0" /></a><a onmousedown="changeImages('drinking','../images/nav/drinking_down.gif');return true" onmouseup="changeImages('drinking','../images/nav/drinking_over.gif');return true" onmouseover="changeImages('drinking','../images/nav/drinking_over.gif');return true" onmouseout="changeImages('drinking','../images/nav/drinking.gif');return true" href="#"><img id="drinking" src="../images/nav/drinking.gif" alt="" name="drinking" width="100" height="32" border="0" /></a><a onmousedown="changeImages('catalog','../images/nav/catalog_down.gif');return true" onmouseup="changeImages('catalog','../images/nav/catalog_over.gif');return true" onmouseover="changeImages('catalog','../images/nav/catalog_over.gif');return true" onmouseout="changeImages('catalog','../images/nav/catalog.gif');return true" href="#"><img id="catalog" src="../images/nav/catalog.gif" alt="" name="catalog" width="100" height="32" border="0" /></a><a onmousedown="changeImages('contact','../images/nav/contact_down.gif');return true" onmouseup="changeImages('contact','../images/nav/contact_over.gif');return true" onmouseover="changeImages('contact','../images/nav/contact_over.gif');return true" onmouseout="changeImages('contact','../images/nav/contact.gif');return true" href="#"><img id="contact" src="../images/nav/contact.gif" alt="" name="contact" width="114" height="32" border="0" /></a><img src="../images/nav/nav_right.gif" alt="" width="52" height="32" border="0" />
<table width="100%" height="34" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" background="../images/elements/header-bottom.gif">
<span class="subnav">history <a href="fields.html">from the fields to your cup</a></span> </td>
</tr>
</table>
</td>
<td rowspan="2" align="center" valign="top" width="16" background="../images/elements/rightedge.gif"></td>
</tr>
<tr>
<td align="center" valign="top" width="720" background="../images/elements/background.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125" class="section"><img src="../images/elements/spacer.gif" alt="" width="125" height="32" border="0" /></td>
<td valign="top" class="section">
<h1>about tea: <span class="subsection">history</span></h1>
<h2 class="subsection">The Legendary Origins of Tea</h2>
<hr>
<p><img src="../images/inset/history.jpg" alt="" width="96" height="140" align="right" border="0" /><span class="maintext">The history of tea extends so far into the past that its very origins are shrouded by legend. It is said that Emperor Shen Nung, who ruled China in 2700 BC, used to enjoy relaxing in his garden with a cup of hot water. It was during one of these respites that a tea leaf happened to float down from a nearby bush, and land directly in the Emperor's cup. The new drink quickly became the Emperor's favorite, and a taste for tea quickly spread throughout the aristocracy, and it wasn't long before tea was the favored drink throughout all of China.</span></p>
<p class="maintext">It was in the 16th century that Portuguese missionaries were seduced by tea's flavor and the intricate customs which surrounding it. A demand for the drink quickly arose, and the Dutch East India Company began importing it into Europe.</p>
<p class="maintext">It's most likely that it was the Japanese green teas which were first to arrive in the west, owing to Japan's liberal trade policies with the Dutch. Initially, tea was chiefly recommended to Europeans for its purported medicinal qualities; it was claimed by the Dutch that tea was a cure for nearly every disease imaginable.</p>
<h2 class="subhead">CommonaliTea</h2>
<hr />
<p class="maintext">Due to the expense of bringing tea halfway across the globe, it was initially consumed primarily by aristocrats and the rich. Over time the cost of tea fell enough for people from all walks of life to be able to enjoy it. By 1717 Thomas Twining's English coffee house became a tea shop; and unlike the ubiquitous London coffee houses of the era, the doors of Twining's were open to both men and women. Meeting friends over tea became a staple of British life, and afternoon tea became a lasting tradition that still continues today.</p> </td>
<td valign="top"><img src="../images/elements/spacer.gif" alt="" width="100" height="32" border="0" /></td>
</tr>

mmermaid
02-06-2007, 05:46 PM
Had to cut that short due to length restrictions but you can get the gist.

domedia
02-06-2007, 06:57 PM
That all looks pretty fine actually. The only thing you forgot was to add the pound sign in front of all the color declarations, #.

Can you upload to server so we can look at the rendered source?

mmermaid
02-06-2007, 10:55 PM
Thanks, that was the problem - no # sign before the color code. I thought that DW put the # in automatically when you put the color code in the Type Catagory with the the CSS Rule definition dialog box. Do I specify that somewhere?

domedia
02-06-2007, 11:09 PM
No you have to specify a valid color value, because hex is not the only way to specify color, you could for instance put in 'blue'

mmermaid
02-07-2007, 12:21 AM
But if I choose a hex value and I see the # and 6 digit hex value in the dialog box of the CSS Rule definition - why wouldn't it show that same hex value with # and 6 digit hex value in the code?