I'm redesigning the web site where I work and it's been a long time since I've done any web development, so I'm playing catch-up with current technologies. I was originally trying for a 100% CSS layout, but ended up having to use some tables for compability with the different browsers I was testing on until I can do what I'm wanting to do in pure CSS.
Anyway, I have a menu that is based on a simple HTML list (<ul><li></li></ul>). With CSS and a smidgen of javascript to make it work in IE, the menu works as a drop down system. What I need to do is have this menu reside in my header page that is then dynamically included on all the content pages.
The header page accessed and viewed directly works great in IE and Opera and so-so in Mozila. But when I include the header page in another page, the drop-down menu breaks in all browsers. Some of the styles from the style sheet are applied, but others are not. I am using FrontPage 2002 and using the webbot include method to include the page. If I use the more standard "include virtual" method, the drop-downs work. But I really want all my pages to have a .html extension as opposed to a .shtml so I just don't want to use this method. I could include the code for the menu on every page, but then if the menu changes (and it will), I would have to go to every page to make changes to the menu and I don't want to have to do that either. I know it's accessing the style sheet because, as I said, some of the styles are applied to the list but some aren't. But I have double checked the paths, tried putting everything in the same directory, included the style info in the HTML file as I've done below and even tried different doctypes. Still, the menu works great when the header page is directly accessed in a browser, but the menu breaks when a page that has the header page included is accessed.
I really hope this is a problem with my CSS (I am still learning and don't feel like I have a real solid grasp on it yet) and someone here can point out where I've gone wrong. If it's a problem with the FrontPage webbot include that can't be worked around without changing the file extensions or putting the code for the menu on every page, then I'll have to totally rethink the menu design and that's something else I don't want to do.
Here is my CSS code and the html for the header file combined for easy reference. I know it's not perfect yet and there are some other adjustments that need to be made, but I'd really like to address this include issue first. Thanks in advance for taking a look and helping me out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>The Learning Center for Rapides Parish</title>
<style>
/* MAIN BODY STYLES */
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: normal;
font-size: 80%;
line-height: normal;
color: #000;
background: #FFF none;
margin-top: 0;
margin-left: 4;
margin-right: 4;
}
hr {
color: #C0C0C0;
height: 1px;
}
/* LINK STYLES IDENTICAL */
a:link, a:visited, a:hover, a:active {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
/* LINK STYLES DIFFERENT */
a:link {
color: #00C;
background: none;
}
a:visited {
color: #00C;
background: none;
}
a:hover {
color: #FFF;
background: #09F none;
}
a:active {
color: #000;
background: none;
}
/* HEADER STYLES */
/* Default Logo Image Width/Height is 169x93 */
#LCRPLogo {
position: absolute;
left: 10px;
top: 4px;
padding: 0;
border: 0px none;
}
#TitleText {
text-align: right;
text-transform: capitalize;
font-size: 190%;
font-weight: bold;
font-variant: small-caps;
}
#TitleAddressText {
text-align: right;
text-transform: capitalize;
font-size: 90%;
font-weight: normal;
font-variant: normal;
}
/* GOOGLE SEARCH STYLES */
#GoogleSearch {
font-family: verdana, helvetica, sans serif;
text-align: right;
font-size: 8pt;
position: absolute;
top: 80px;
right: 8px;
line-height: 2;
font-weight: normal;
color: #FFF;
}
#GoogleText {
font-family: verdana, helvetica, sans serif;
font-size: 100%;
border-style: solid;
border-color: #000;
border-width: 1px;
color: #000;
background: #D4D0C8 none;
}
#GoogleButton {
font-family: verdana, helvetica, sans serif;
font-size: 100%;
border: 1px #000 solid;
color: #000;
background: #D4D0C8 none;
}
ul.top { /*Basic top menu list style */
list-style: none;
display: block;
padding: 0;
margin: 0;
background: #C9B;
}
#topnav li.topnav0 { /* Top level menu styles */
padding: 0;
border-top: 0px;
border-right: 2px solid #000;
border-bottom: 0px;
border-left: 0px;
position: relative;
float: left;
text-align: left;
background: #009 none;
color: #FFF;
text-indent: .8em;
font-weight: normal;
width: 110px;
}
#topnav li.topnav0 a { /* Top level link styles */
color: #FFF;
text-decoration: none;
}
#topnav li.topnav0 a:hover { /* Top level hover styles */
background: #00C none;
text-decoration: none;
}
li.topnav0 ul.topnav1 {/* Drop down box style */
display: none;
background: #009 none;
padding: 0;
margin: 0 0 0 0;
list-style: none;
border-top: 0px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
width: auto;
position: absolute;
top: 100%;
left: 0;
}
#topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */
display: block;
padding: 2px 0 2px 0;
margin: 0;
border-top: 0px none;
border-right: 0px none;
border-bottom: 1px solid #000;
width: 130px;
}
#topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1 { /* Makes Drop down work in IE */
display: block;
background: #009 none;
}
li.topnav0>ul.topnav1 {
top: auto;
left: auto;
}
</style>
<script type="text/javascript"><!-
-//--><![C
DATA[//><!
--
startList = function() {
if (document.all&&document.ge
tElementBy
Id) {
navRoot = document.getElementById("t
opnav");
for (i=0; i<navRoot.childNodes.lengt
h; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function(
) {
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.classN
ame.replac
e(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div id="LCRPLogo"><img class="LCRPLogo" src="../images/LCRPLogo.gi
f" alt="Learning Center for Rapides Parish Logo" width="164" height="93"></div>
<div id="GoogleSearch">
<form action="
http://www.google.com/u/LCRP" method="get">
<input type="text" id="GoogleText" size="20" maxlength="255">
<input type="submit" id="GoogleButton" value="Search"><br>
<input type="hidden" name="domains" value="wwwthelcrp.net">
<input type="radio" name="sitesearch" value="
www.thelcrp.net" checked>Search LCRP
<input type="radio" name="sitesearch" value="
www.google.com">Sea
rch WWW
</form>
</div>
<table width="100%" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="80"><div id="TitleText">The Learning Center for Rapides Parish</div>
<div id="TitleAddressText">(318
) 484-2184 | 1410 Neel Kearby Blvd | Alexandria, LA | 71303</div>
</td>
</tr>
<tr><td style="background-color: #CCCCCC" height="20"> </td></t
r>
<tr><td style="background-color: #000099" height="22"><div> <ul class="top" id="topnav">
<li class="topnav0"><div><a href="#">Home</a></div>
</li>
<li class="topnav0"><div><a href="#">About Us</a></div>
<ul class="topnav1">
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Staff</a></li>
</ul>
</li>
<li class="topnav0"><div><a href="#">Education</a></di
v>
<ul class="topnav1">
<li><a href="#">Institutions</a><
/li>
<li><a href="#">Degree Programs</a></li>
<li><a href="#">Credit Courses</a></li>
<li><a href="#">Workshops</a></li
>
</ul>
</li>
<li class="topnav0"><div><a href="#">Facility Rental</a></div>
<ul class="topnav1">
<li><a href="#">Schedule An Event</a></li>
<li><a href="#">View Calendar</a></li>
<li><a href="#">Rental Fees</a></li>
<li><a href="#">Lease Office Space</a></li>
</ul>
</li>
<li class="topnav0"><div><a href="#">Contact Us</a></div>
<ul class="topnav1">
<li><a href="#">Contact LCRP</a></li>
<li><a href="#">Driving Directions</a></li>
<li><a href="#">Request Information</a></li>
<li><a href="#">Staff Directory</a></li>
</ul>
</li>
</ul>
</div>
</td></tr>
</tbody>
</table></body>
