Having trouble styling a span within an anchor tag in IE6 CSS

Question

The company I work for still uses IE6 therefore I am required to make sure that my site works in IE6 browsers. I'm having trouble styling due to the constraints of the code design done through SharePoint 2007.

When you hover over a non-active tab, the text should change color from blue to orange.

<div class="webpartBody">
<div class="tabsWrapper">
    <a class="quickLinkTabs activeTab" href="#">
        <span class="tab0">Clinical</span>
    </a>
    <a class="quickLinkTabs" href="#">
        <span class="tab1">Business Services</span>
    </a>
    <a class="quickLinkTabs" href="#">
        <span class="tab2">Employees</span>
    </a>
    <a class="quickLinkTabs" href="#">
        <span class="tab3">Projects</span>
    </a>
    <a class="quickLinkTabs" href="#">
        <span class="tab4">Web Links</span>
    </a>
</div>
<!-- links -->
</div>

jQuery is utilized to create classes for the quickLinkTabs so that the firstTab and lastTab are labeled as such and that the tab that is currently selected is the activeTab.

Using just this code outside of the SharePoint environment, I apply the following CSS to achieve the effect I'm looking for.

.quickLinkTabs:hover
{
    color: #ff6600;
}
.quickLinkTabs span:hover
{
    color: #ff6600;
}

As soon as I apply this to the development environment and try this on SharePoint generated code, it no longer works. I cannot figure out what the hindrance is - is it SharePoint? is it my CSS?

Answer 1

There is no purpose for the SPAN to be there in the first place. You should adjust the styling of the A-tag to perform the same functionality.

then use:

.tabsWrapper a { .... }
.tabsWrapper a:hover { ... }