CSS font style not recognized

orcasisl · Joined: 21 May 2008 Posts: 2

Hi--I am new to web design--this is my first attempt--and have been browsing your forums and site for over a week now and have learned a lot. I am trying to revamp (using Dreamweaver CS3) our department site that was created by a former employee. I want the font for the entire site to be Verdana, Geneva, Arial, helvetica, sans-serif and have indicated this in the style sheet. It appears properly in Dreamweaver design view. However, it appears as Times in both FF and IE. Can you please take a look at the code and see what's wrong? (I'm sure it's something really basic that I'm just not experienced enough to spot.) Thanks very much.

Here's the template:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>UC BREP - University of California, Biotechnology Research & Education Program</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="UC BREP" content="University of California Systemwide Biotechnology Research & Education Program">
<meta name="keywords" content="UC BREP, Systemwide, Biotechnology Training, Graduate Education, Graduate Training, Training Grant">
<cfinclude template="../Headers/menus.cfm">
<cfinclude template="../Headers/styles.cfm">
<link href="../Headers/styles.cfm" rel="stylesheet" type="text/css">
<style type="text/css">
</style>


</head>

<body>
<script language="JavaScript1.2">mmLoadMenus();</script>
<cfinclude template="../Headers/popups.cfm">
<cfinclude template="../Headers/poptext.cfm">
<cfinclude template="../Headers/dynapics.cfm">
<table bgcolor="#F7EAB6" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="navStuff" width="370"><div align="center"><img src="../Images/BrepTitle.jpg" width="370" height="125" border="0"></div></td>
<td class="navStuff"><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" nowrap><div align="center">
<script type="text/javascript">
document.write(beg + images[rannum1] + end);
document.write(beg + images[rannum2] + end);
document.write(beg + images[rannum3] + end);
document.write(beg + images[rannum4] + end);
</script>
</div></td>
</tr>
<tr>
<td height="5" nowrap><img src="../Images/speck.gif" width="1" height="1" border="0"></td>
</tr>
<tr>
<td nowrap><div align="center"><img src="../Images/TitleText.jpg" width="500" height="17" border="0"></div></td>
</tr>
</table></td>
</tr>
<tr>
<td class="navStuff" colspan="2"> </td>
</tr>
<tr>
<td class="navStuff" colspan="2" height="1" bgcolor="#042B64"><img src="../Images/speck.gif" width="1" height="1"></td>
</tr>
</table>


<table width="100% border="0" cellpadding="2" cellspacing="0">

<tr valign="top">
<td class="navStuff"><table border="0" cellpadding="0" cellspacing="0" bgcolor="#BCC2DE">
<tr valign="top"><td width="20%" align="left" class="style2"><a href="../index.cfm">About UC BREP</a></td></tr>
<tr valign="top"><td align="left" class="style2"><strong>GREAT Training Grants</strong></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Funding Opportunities</li></ul></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Grant Administration Guidelines</li></ul></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Funded Projects</li></ul></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Acknowledging GREAT</li></ul></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Success Rate Statistics</li></ul></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Campus Representatives</li></ul></td></tr>
<tr valign="top"><td align="left" class="style2"><strong>News & Events</strong></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>May 2008 Press Release</li></ul></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Annual GREAT Retreat</li></ul></td></tr>
<tr valign="top"><td align="left" class="style2"><strong>Governance</strong></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Executive Committee</li></ul></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>UC Office of the President</li></ul></td></tr>
<tr valign="top"><td align="left" class="style2"><strong>About the Director</strong></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Martina Newell-McGloughlin</li></ul></td></tr>
<tr valign="top"><td align="left" class="style4"><ul><li>Biotechnology Presentations</li></ul></td></tr>
<tr valign="top"><td align="left"><HR COLOR ="#042B64" WIDTH="80%" SIZE="2"></td></tr>
<tr valign="top"><td align="left" class="style4"><strong>Grant Administration Contact:</strong></td></tr>
<tr valign="top"><td align="left" class="style4"><p align="center"><a href="mailto:camilleratucdavis.edu">Cathy Miller</a>, Assistant Director<br>
Phone: 530-752-2221</p></td>
</tr></table></td>


<td valign="top" bgcolor="#FFFFFF" width="80%" background="../Images/UOC_logo.jpg">
<p>PAGE TEXT</p>
</td></table>


<table bgcolor="#F7EAB6" width="100% border="0" cellpadding="0" cellspacing="0">
<tr><td class="navStuff" colspan="2" height="1" bgcolor="#042B64"><img src="../Images/speck.gif" width="1" height="1"></td></tr>
<tr><td class="navStuff" colspan="2" height="5"><img src="../Images/speck.gif" width="5" height="10"></td></tr>
<tr><td class="navStuff" colspan="2" height="5" valign="top"><h5 align="center">UC BREP • University of California, Davis • One Shields Avenue • Davis, CA 95616</h5></td></tr>
<tr><td class="navStuff" colspan="2" height="5" valign="top"><h5 align="center">Phone: 530-752-8237 • Fax: 530-752-4125 • Email: <a href="mailto:ucbrepatucdavis.edu">ucbrepatucdavis.edu</a> • <a href="../BREP/map.cfm">Get Directions</a></h5></td></tr>
<tr><td class="navStuff" colspan="2" height="5" valign="top"><h6 align="center">Copyright © 2008 UC BREP </h6></td></tr>
</table></table>

</body>
</html>

and here's the CSS (style.cfm):

<link href="printerfriendly.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 1em;
background-color: #F7EAB6;
}
a:link {
color: #042B64;
font-weight: bold;
text-decoration: none;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #042B64;
}
a:hover {
text-decoration: underline;
color: #990000;
}
a:active {
text-decoration: none;
color: #042B64;
}
.style1 {
color: #042B64;
font-weight: bold;
}
.style2 {
color: #042B64;
}
.style3 {
color: #990000;
}
.style4 {
color: #042B64;
font-size: smaller;
}
#pup {
position:absolute; visibility:hidden; z-index:200; width:130;
}
.popupbox {
position: absolute;
left: -200px;
top: -200px;
background: #FFFFFF;
border: 1px solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
visibility: hidden;
}
</style>
[/url][/code]

sticks464 · Joined: 31 Dec 2006 Posts: 1179

It is displaying correctly for me. Try putting quotes around verdana which should over ride the default setting for your browsers.

orcasisl · Joined: 21 May 2008 Posts: 2

Thanks for the suggestion. I tried it but no luck--still Times. Any other ideas?

quartzy · Joined: 26 Dec 2007 Posts: 405

Add the font to each of your class=styles, for some reason that works.