tabs, css

[ShawnDT]

Good Morning Gents and Ladies.

I have a little problem which I believe is simple to fix. Yet, it eludes me so.... My problem is when I click on my tabs the color changes to active before the layer is actually displayed. The color should not change unless I release the mouse. Also, I cannot get the tabs to be active on load of the document. Example, I would like for tab A to be active when the page loads.
I hope that makes sense. I have included my style and UL's Thank you for your kind attention.

CSS
<style type="text/css">
ul.primary {
border-collapse: collapse;
padding: 0 0 0 1em;
white-space: nowrap;
list-style: none;
margin: 5px;
height: auto;
line-height: normal;
border-bottom: 1px solid #bbb;
}

ul.primary li { display: inline; }

ul.primary li a {
background-color: #ddd;
border-color: #bbb;
border-width: 1px;
border-style: solid solid none solid;
height: auto;
margin-right: 0.5em;
padding: 0 1em;
text-decoration: none;
}

ul.primary li a:hover {
background-color: #eee;
border-color: #ccc;
border-bottom-color: #eee;
}

ul.primary li a:active {
background-color: #FFFF33;
border: 1px solid #bbb;
border-bottom: #fff 1px solid;
}

</style>

UL
<ul class = "primary">
<li class ="a:active"><a href = "#" onclick="MM_showHideLayers('layProducerData','','show','layProducerContacts','','hide','layProposals','','hide','layNotes','','hide')" class = "primary">Producer Data</a></li>
<li><a href = "#" onclick="MM_showHideLayers('layProducerData','','hide','layProducerContacts','','show','layProposals','','hide','layNotes','','hide')">Producer Contacts</a></li>
<li><a href = "#" onclick="MM_showHideLayers('layProducerData','','hide','layProducerContacts','','hide','layProposals','','show','layNotes','','hide')">Proposals</a></li>
<li><a href = "#" onclick="MM_showHideLayers('layProducerData','','hide','layProducerContacts','','hide','layProposals','','hide','layNotes','','show')">Notes</a></li>
</ul>

 

[traingamer]

You cannot make an item 'active' with html. That being said, one way to what you want is to correctly style the 'active' tab. e.g.

<li class ="activetab"><

instead of

<li class ="a:active"><

then add that class to the stylesheet

ul.primary li a:active[b], .activetab[/b] {
    background-color: #FFFF33;
    border: 1px solid #bbb;
    border-bottom: #fff 1px solid;
}

or (not tested)

ul.primary li a.activetab

or you could use ids, etc.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ChrisHunt]

The problem is that [tt]:active[/tt] doesn't mean what you think it means. See my post halfway down thread215-1272084 .

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd