Problem with href

[swdweb]

I've got a header with two buttons in it like this:::

*tab*........*image*........*tab*

Each tab has its own class.

I have it set up as:

<ul>
<li class="home"></li>
 </ul>
 <bi>
<li class="bill"></li>
 </bi>
</div>

This works fine, no problem, both images show up.

then, when I use this:::

<ul>
<li class="home"><a href="marketing.html"></li>
 </ul>
 <bi>
<li class="bill"><a href="billing.html"></li>
 </bi>
</div>

my tab on the right disappears. No explanation why, everything in my .css is fine. Here it is::

#topPan ul{
width:298px;
height:32px;
position:absolute;
top:77px;
right:449px;
}
#topPan bi{
width:298px;
height:33px;
position:absolute;
top:77px;
right:0px;
}
#topPan ul li{float:left; width:115px; height:32px; padding:0 0 0 1px;}
#topPan bi li{float:right; width:115px; height:32px; padding:0 1px 0 0;}
#topPan ul li a{
display:block;
width:115px;
height:32px;
background:url(marketing2.gif) 0 0 no-repeat transparent;
color:#ffa513;
font-size:11px;
font-weight:bold;
line-height:39px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
}
#topPan bi li a{
display:block;
width:115px;
height:32px;
background:url(images/billing2.gif) 0 0 no-repeat transparent;
color:#ffa513;
font-size:11px;
font-weight:bold;
line-height:39px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
}
#topPan ul li.home:hover{
width:174px; 
height:33px; 
background:url(images/marketing2a.gif) 0 0 no-repeat transparent; 
color:transparent; 
text-decoration:none;
}
#topPan bi li.bill:hover{
width:175px; 
height:34px; 
background:url(images/billing2a.gif) 0 0 no-repeat transparent; 
color:transparent; 
text-decoration:none;
}
#topPan ul li.home {
display:block; 
width:151px; 
height:34px; 
background:url(images/marketing2.gif) 0 0 no-repeat #ffa513; 
font-size:11px; 
font-weight:bold; 
line-height:32px; 
color:#000000; 
text-decoration:none; 
text-transform:uppercase; 
text-align:center;
}
#topPan bi li.bill{
display:block; 
width:151px; 
height:33px; 
background:url(images/billing2.gif) 0 0 no-repeat #ffa513; font-size:11px; 
font-weight:bold; 
line-height:32px; 
color:#000000; 
text-decoration:none; 
text-transform:uppercase; 
text-align:center;
}

Can anyone explain to me why this is happening? It does not happen to the tab on the left and I can't figure out how to fix it.

Thanks.

[swdweb]

Here is the reason why I used bi (other than I'm still new to CSS) and had to find a different parent tag:

#topPan{width:747px; height:120px; position:relative; margin:0 auto; padding:0px;}
#topPan img{width:138px; height:175px; position:absolute; top:30px; left:300px; z-index:100;}
#topPan ul{
width:298px;
height:32px;
position:absolute;
top:77px;
right:449px;
}
#topPan bi{
width:298px;
height:33px;
position:absolute;
top:77px;
right:0px;
}
#topPan ul li{float:left; width:115px; height:32px; padding:0 0 0 1px;}
#topPan bi li{float:right; width:115px; height:32px; padding:0 1px 0 0;}

I couldn't use the same UL parent tag because it collided with my first UL parent...does anyone know where I can learn how to name parent tags? What's acceptable and what's not?

This is the only way I could get my header to look like I explained earlier....

*tab/button*......*image*......*tab/button*

you can view it here <snip>

Any help is really appreciated and sorely needed!

Thanks

[edited by: swa66 at 2:15 pm (utc) on April 14, 2009]
[edit reason] No personal URLs please see ToS and forum charter [/edit]

[swa66]

You can't just invent new html tags.

Say you have:

<ul class="menu">
 <li>primo
  <ul>
   <li>one</li>
   <li>two</li>
  </ul>
 </li>
 <li>secundo
  <ul>
   <li>three</li>
   <li>four</li>
  </ul>
 </li>
</ul>

The way to target the second level:
.menu ul {...}
.menu ul li {...}
for the problem area are the <li>'s of the first level:
.menu li {...}
as this targets both the first and second level in one go
so either:

• you undo the damage for the second level be resetting it all
  
• you use code that IE6 will have trouble with:
  .menu>li {...}
  This selector will only affect <li>s that are a direct child of somethign with a class="menu".
  I prefer this method as I know I will need something to fix the lack of :hover support in IE6 for drop down menus anyway and IE7.js fixes both in one go.
  
• you give the first level a class and target that:
  

  
  <ul class="menu">
   <li class="firstlevel">primo
    <ul>
     <li>one</li>
     <li>two</li>
    </ul>
   </li>
   <li class="firstlevel">secundo
    <ul>
     <li>three</li>
     <li>four</li>
    </ul>
   </li>
  </ul>
  

  
  and the CSS then becomes:
  .menu .firstlevel {...}
  ugly solution if you ask me.
  

hope this clarifies things a bit