ID inside of an ID

Hi all, i have a simple Syntax question regarding using an ID inside of an ID. i have an Unordered list and i want to single out one of the List items. the entire div that List is in has and ID already. i tried adding an ID and a class to one of the list items but have no success. ive searched the forums and google but cant seem to find an answer. any input would be greatly appreciated. Below is the code im using. Thanks.

<style type="text/css">
         #tabsH {
              float:left;
              width:100%;
              margin: -10 0 0 0;
              font-size:93%;
              line-height:normal;
              }
            #tabsH ul {
            margin:0;
            padding:10px 10px 0 0px;
            list-style:none;
              }
          
            #tabsH li {
              display:inline;
              margin:0;
              padding:0;
	     background-position:100% -42px;
			  }
			
            #tabsH a {
              float:left;
              background:url("images/tableftH2.gif") no-repeat left top;
              margin:0;
              padding:0 0 0 4px;
              text-decoration:none;
			  font-weight:bold;
              }
            #tabsH a span {
              float:left;
              display:block;
              background:url("images/tabrightH2.gif") no-repeat right top;
              padding:5px 15px 4px 6px;
              color:#FFF;
              }
            /* Commented Backslash Hack hides rule from IE5-Mac \*/
            #tabsH a span {float:none;}
            /* End IE5-Mac hack */
            #tabsH a:hover span {
              color:#FFF;
              }
            #tabsH a:hover {
              background-position:0% -42px;
              }
            #tabsH a:hover span {
              background-position:100% -42px;
              } 
			   
			
			  </style>

<div id="tabsH">

  <ul>
    <li><a href="/tabs.php?tab=1" title="Link 1"><span>ESH9</span></a></li>
    <li id="off"><a href="/tabs.php?tab=2" title="Link 2"><span>NQH9</span></a></li>
    <li id="off"><a href="/tabs.php?tab=3" title="Link 3"><span>6EH9</span></a></li>
    <li id="off"><a href="#" title=4"><span>ZWH9</span></a></li>
    <li id="off"><a href="#" title="5"><span>DXH9</span></a></li>
    
  </ul>
</div>

HTML:

 

You can't have more then one of an ID per html page. I would change those ID's to classes and it should work fine

~eric

 

Thanks i will give that a try.

 

It could also be specificity, change to classes as suggested but it might turn out that you need to be more specific and really tellt he browser what to style.

For example, you may have to do something like this:

ul#tabsH #off {your:style; }

 

I disagree. Just by looking at the code you can tell by the id names that the class inside them is most likely used only once. The id name is tabsH meaning that they are applied only to his tabs. While the principle is true, there should really be no need for what you are saying.

~eric