okay, i'm not new to html or css, but i've had this problem since as long as i can remember...and i'm sure my syntax is wrong or something, but heck if i know what i'm doing wrong

so i've got a global stylesheet included on all my pages - the entire site is one big table (can't use frames because i need to be able to send people links to individual pages), and so the global stylesheet contains the settings for the page table, a:link/a:visited/a:hover/a:active, and all that stuff (does that make sense?)

here's the problem, though...let's say i want the links in different sections to look different (color, background, etc)...but they're all on the same page (remember, no frames), so what's happening is that all of the links on the page are ONLY taking the attributes of the last set in the stylesheet...does this make sense? let's say i have this at the top of the .css file:

a:link,a:visited {
color: blue;
background-color: yellow;
}
a:hover,a:active {
color: red;
background-color: orange;
}

but farther down the page i have this:

table#menu a:link,a:visited {
color: orange;
background-color: green;
}
table#menu a:hover,a:active {
color: pink;
background-color: black;
}

but all the links are taking on the attributes of the second set, even the ones that aren't in (either before or after) the <table id="menu"> grouping...someone let me know what i'm doing wrong...i need this to work in IE6 (and yes, i know firefox is better, but that does me no good for people who won't use FF

11/7/2005 9:57:17 PM

a:link a:hover are for every link (hence everything that uses <a> tag)

all you need

#menu {
color: orange;
background-color: green;
}

[Edited on November 7, 2005 at 10:04 PM. Reason : .]

11/7/2005 10:01:53 PM

^ but that will only specify the non-linked text within the #menu objects...i want the links specifically within the #menu object to be different from the global links

and yes, i've tried swapping out/adding classes instead of id's, but it doesn't make any difference...i've been using id's because they can only be used once on the page, and i thought it would cut down on confusion

[Edited on November 7, 2005 at 10:07 PM. Reason : class/id]

11/7/2005 10:06:22 PM

.menu a:link { color: blue}
.menu .section1 a:link {color: red}
.menu .section2 a:link {color: green}

------

<div class="menu">
   <a href="#">you</a>
   <a href="#">suck</a>
   <div class="section1">
      <a href="#">you</a>
      <a href="#">suck</a>
   </div>
   <div class="section2">
      <a href="#">you</a>
      <a href="#">suck</a>
   </div>
</div>

11/8/2005 1:45:19 AM

^ tried that...for some reason it still only takes the attributes of the selector farthest down the .css file

11/8/2005 8:07:19 AM

just post the code

11/8/2005 9:05:41 AM

/* GLOBAL SETTINGS */

body {
background-color: white;
margin: 0px;
text-align: center;
}
div.center {
text-align: center;
}
div.left {
text-align: left;
}
div.right {
text-align: right;
}
table {
background-color: white;
border-color: #006699;
border-spacing: 0px;
border-style: solid;
border-width: 0px;
text-align: left;
vertical-align: top;
}
td {
background-color: white;
border-color: #006699;
border-spacing: 0px;
border-style: solid;
border-width: 0px;
text-align: left;
vertical-align: top;
}
table#maintable {
width: 780px;
}

/* logo bar, search and home, collage */

table#logobar {
background-color: #006699;
height: 115px;
}
td#logo {
background-color: #006699;
padding: 8px 0px 2px 7px;
vertical-align: bottom;
width: 490px;
}
td#search {
background-color: #006699;
padding: 5px 7px 0px 0px;
text-align: right;
width: 100%;
}
td#collage {
background-image: url(../misc/images/collage.jpg);
background-position: top left;
background-repeat: repeat-x;
border-width: 0px 1px 0px 1px;
height: 55px;
width: 100%;
}

/* menu settings */

table#menu {
width: 100%;
}
table#menu td {
background-color: white;
line-height: 19px;
}
table#menu td a:link,a:visited {
background-color: #006699;
color: white;
font-family: "Verdana";
font-size: 12px;
font-weight: bold;
height: 100%;
padding: 2px 15px 4px 15px;
text-align: center;
text-decoration: none;
width: 100%;
}
table#menu td a:hover,a:active {
background-color: #FFC800;
color: white;
}

/* drop-down menu settings */

table.dropdown {
background-color: #006699;
border-color: white;
border-style: solid;
border-width: 1px 0px 0px 0px;
margin-top: 141px;
position: absolute;
width: 200px;
}
.dropdown a:link,a:visited {
background-color: #006699;
color: white;
font-family: "Verdana";
font-size: 12px;
font-weight: normal;
height: 100%;
padding: 2px 15px 4px 15px;
text-align: left;
text-decoration: none;
width: 100%;
}
.dropdown a:hover,a:active {
background-color: #FFC800;
color: white;
}
table.dropdown td {
background-color: #006699;
border-color: white;
border-style: solid;
border-width: 0px 1px 1px 1px;
color: #006699;
text-align: left;
}
table.dropdown#menu1 {
height: 140px;
margin-left: -350px;
}
table.dropdown#menu2 {
height: 80px;
margin-left: 10px;
}
table.dropdown#menu3 {
height: 140px;
margin-left: 20px;
}
table.dropdown#menu4 {
height: 80px;
margin-left: 30px;
}
table.dropdown#menu5 {
height: 120px;
margin-left: 40px;
}

11/8/2005 9:50:50 AM

the relevant html part, too?

11/8/2005 10:00:57 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>seo</title>
<script src="cssjs/ddmenu.js" language="javascript" type="text/javascript"></script>
<link href="cssjs/sitecss.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css" media="screen"><!-- @import url(cssjs/sitecss.css) screen; --></style>
</head>

<body>

<table id="maintable" cellpadding="0" cellspacing="0">
<tr>
<td>

<table id="logobar" cellpadding="0" cellspacing="0">
<tr>
<td id="logo">
<a href="#"><img src="misc/images/logo.jpg" alt="seo" border="0" /></a>
</td>
<td id="search">
<input type="text" name="search" size="15" maxlength="200" name="search">
Search  |  Home<br />
1-800-662-7131
</td>
</tr>
<tr>
<td id="collage" colspan="2"></td>
</tr>
</table>

</td>
</tr>
<tr>
<td>

<table id="menu" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" onmouseover="dropdownmenu(this,event,menu1)" onmouseout="delayhidemenu()">Programs</a></td>
<td><a href="#" onmouseover="dropdownmenu(this,event,menu2)" onmouseout="delayhidemenu()">Funding</a></td>
<td><a href="#" onmouseover="dropdownmenu(this,event,menu3)" onmouseout="delayhidemenu()">Resources & Media</a></td>
<td><a href="#" onmouseover="dropdownmenu(this,event,menu4)" onmouseout="delayhidemenu()">Energy Policy Council</a></td>
<td><a href="#" onmouseover="dropdownmenu(this,event,menu5)" onmouseout="delayhidemenu()">About Us</a></td>
</tr>
</table>

</td>
</tr>
<tr>
<td>

boo.

</td>
</tr>
</table>


</body>
</html>

11/8/2005 12:05:54 PM

here's the main part of the javascript that does the drop-down menus, linked in ddmenu.js:

// dropdown menu item 1 submenu
var menu1 = new Array();
menu1[0] = '<table class="dropdown" id="menu1" cellpadding="0" cellspacing="0">';
menu1[1] = '<tr><td><a href="programs/altfuels.html">Alternative Fuels</a></td></tr>';
menu1[2] = '<tr><td><a href="programs/awareness.html">Awareness & Education</a></td></tr>';
menu1[3] = '<tr><td><a href="programs/buildings.html">Buildings</a></td></tr>';
menu1[4] = '<tr><td><a href="programs/industry.html">Industry</a></td></tr>';
menu1[5] = '<tr><td><a href="programs/renewable.html">Renewable Resources</a></td></tr>';
menu1[6] = '<tr><td><a href="programs/residential.html">Residential</a></td></tr>';
menu1[7] = '<tr><td><a href="programs/usi.html">Utility Savings Initiative</a></td></tr>';
menu1[8] = '</table>';

// dropdown menu item 2 submenu
var menu2 = new Array();
menu2[0] = '<table class="dropdown" id="menu2" cellpadding="0" cellspacing="0">';
menu2[1] = '<tr><td><a href="funding/open.html">Open Solicitations</a></td></tr>';
menu2[2] = '<tr><td><a href="funding/rfps.html">Performance Contracting RFPs</a></td></tr>';
menu2[3] = '<tr><td><a href="funding/other.html">Other Opportunities</a></td></tr>';
menu2[4] = '<tr><td><a href="funding/tools.html">Finance Tools</a></td></tr>';
menu2[5] = '</table>';

// dropdown menu item 3 submenu
var menu3 = new Array();
menu3[0] = '<table class="dropdown" id="menu3" cellpadding="0" cellspacing="0">';
menu3[1] = '<tr><td><a href="resources/press.html">Press Releases</a></td></tr>';
menu3[2] = '<tr><td><a href="resources/news.html">News</a></td></tr>';
menu3[3] = '<tr><td><a href="resources/links.html">Links</a></td></tr>';
menu3[4] = '<tr><td><a href="resources/databases.html">Databases</a></td></tr>';
menu3[5] = '<tr><td><a href="resources/publications.html">Publications</a></td></tr>';
menu3[6] = '<tr><td><a href="resources/seologo.html">SEO Logo</a></td></tr>';
menu3[7] = '<tr><td><a href="resources/fuelprices.html">Fuel Prices</a></td></tr>';
menu3[8] = '</table>';

// dropdown menu item 4 submenu
var menu4 = new Array();
menu4[0] = '<table class="dropdown" id="menu4" cellpadding="0" cellspacing="0">';
menu4[1] = '<tr><td><a href="epc/members.html">Members</a></td></tr>';
menu4[2] = '<tr><td><a href="epc/documents.html">Documents</a></td></tr>';
menu4[3] = '<tr><td><a href="epc/policy.html">Policy</a></td></tr>';
menu4[4] = '<tr><td><a href="epc/sep.html">State Energy Plan</a></td></tr>';
menu4[5] = '</table>';

// dropdown menu item 5 submenu
var menu5 = new Array();
menu5[0] = '<table class="dropdown" id="menu5" cellpadding="0" cellspacing="0">';
menu5[1] = '<tr><td><a href="contact/mission.html">Mission Statement</a></td></tr>';
menu5[2] = '<tr><td><a href="contact/history.html">History</a></td></tr>';
menu5[3] = '<tr><td><a href="contact/staff.html">Staff</a></td></tr>';
menu5[4] = '<tr><td><a href="contact/info.html">Contact Information</a></td></tr>';
menu5[5] = '<tr><td><a href="contact/map.html">Map & Directions</a></td></tr>';
menu5[6] = '<tr><td><a href="contact/western.html">Western Office</a></td></tr>';
menu5[7] = '</table>';

you can see how it uses the .dropdown and #menux parts of the css

11/8/2005 12:07:46 PM