I'm having a little trouble with page 137 item 7 from the Beginning Dreamweaver MX book.
I've been able to create the body style for just the news.htm file which worked as I can see the text changes in the browser. The problem I am having is with the h2 override that we are asked to perform.
I created the h2 sytle for just the news.htm document, making the text lime green as instructed. I can see the results in the file in Dreamweaver and can see the h2 under news.htm, but when I come to view the file in the browser for some reason it still adopts the cookingplacestyles.css h2 style. It was not overriden by my document only style for news.htm
I'm not sure what I am doing wrong and I've taken a look at the html file source as well and can see the entry.
I've attached the source below.. Please can someone help me out with this.
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Cooking Place</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="cooking, food, french cuisine, American cuisine, Italian Cuisine, recipes, recipe exchange, cooking techniques, cooking equipment" />
<meta name="Description" content="The cooking place is where you can come to find greap recipes, get some cooking tips, learn about various techniques, and share your recipes with friends from all over the world." />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #00FF33;
}
-->
</style>
<link href="stylesheets/cookingplacestyles.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Images/home_over.gif','Images/regions_over.gif','Images/contact_over.gif')">
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="Images/topbkg.gif">
<tr>
<td width="50%"><div align="left"><img src="Images/topleft.gif" width="290" height="51" /></div></td>
<td width="50%"><div align="center"><strong>The
Cooking Place</strong></div></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="257" valign="top" background="Images/sidebkg.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="Images/rightsidebkg.gif"><img src="Images/topleft2.gif" width="257" height="112"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top" background="Images/rightsidebkg.gif"><img src="Images/topleft3.gif" width="195" height="75"><br>
<a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('homeButton','','Images/home_over.gif',1)"><img src="Images/buttonblank.gif" alt="Home" name="homeButton" width="181" height="31" border="0"></a>
<br>
<img src="Images/news_over.gif" width="181" height="31"><br>
<a href="Regions.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('regionsButton','','Imag es/regions_over.gif',1)"><img src="Images/buttonblank.gif" alt="Regions" name="regionsButton" width="181" height="31" border="0"></a>
<br>
<a href="mailto:
[email protected]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contactButon','','Image s/contact_over.gif',1)"><img src="Images/buttonblank.gif" alt="Contact Us" name="contactButon" width="181" height="31" border="0"></a>
</td>
<td width="50%" valign="top"><img src="Images/page.gif" width="59" height="199"></td>
</tr>
</table></td>
<td width="99%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1%" valign="top"><img src="Images/leftcorn.gif" width="28" height="22"></td>
<td width="98%"><div align="center">
<h2>Cooking World News</h2>
</div></td>
<td width="1%" align="right" valign="top"><img src="Images/rightcorn.gif" width="28" height="22"></td>
</tr>
</table>
<table width="75%" border="0" align="center" cellpadding="5" cellspacing="0" bordercolor="#FF0000">
<tr align="center" bgcolor="lightgrey">
<td colspan="3"><b>
<div align="center"><strong>November Cooking News</strong></div>
</b></td>
</tr>
<tr bgcolor="white">
<td>11/07/02</td>
<td>France</td>
<td>Chef Andre Highhat has won an award for creating the world's highest
soufflé. Unfortunately, someone slipped with a fork and there
was a massive deflation</td>
</tr>
<tr bgcolor="lightgrey">
<td>11/10/02</td>
<td>Texas, USA</td>
<td>The annual Chili Contest took place. Contestants from all over the
world came to create the worlds hottest chili.</td>
</tr>
<tr bgcolor="white">
<td>11/18/02</td>
<td>New York City</td>
<td>The restaurant business is doing great in spite of an economic downturn.
People still love to eat out.</td>
</tr>
</table></td>
<td width="1%" background="Images/rightsidebkg.gif"><img src="Images/rightsidebkg.gif" width="24" height="31"></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="Images/botbkg.gif">
<tr>
<td width="50%"><img src="Images/botleft.gif" width="235" height="40"></td>
<td width="50%"><div align="right"><img src="Images/botright.gif" width="69" height="40"></div></td>
</tr>
</table>
</body>
</html>
Embedded CSS
