Help with CSS

heebiejeebieclu posted this at 19:21 — 22nd October 2006.

Joined: Aug 2004

This might take a long time to explain, but I'm desperately seeking an answer, so please bear with me.

At http://www.heebie.co.uk/proxy you'll notice I have tabs set up. At the moment the tabs only show when the text on them is a link, but I don't want it to be a link.
So, I created a class in the css called 'hello' with the same properties as the tabs with links and put a new tab in ("Fun") with class "hello", and with no link as an experiment. Somehow, the tabs aren't appearing.
The link to the webpage is http://www.heebie.co.uk/proxy/index.html , and the css is at http://www.heebie.co.uk/proxy/tabcontent.css , but I'll include snippets below.

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: 20px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li.hello{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li.non:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}

<ul id="maintab" class="shadetabs">
        <li class="selected"><a href="thexternal.htm" rel="ajaxcontentarea" onMouseover="dropdownmenu(this, event, menu1, '80px')" onMouseout="delayhidemenu()"> Surf</a></li>
        <li><a href="external.htm" rel="ajaxcontentarea">Search</a></li>
        <li class="non"><a href="directory/pod.cgi" rel="ajaxcontentarea">Browse</a></li>
        <li><a href="external3.htm" rel="ajaxcontentarea">Buy</a> </li>
      <li class="hello" onMouseover="dropdownmenu(this, event, menu1, '80px')" onMouseout="delayhidemenu()">Fun</li>
      </ul>

heebiejeebieclu posted this at 19:32 — 22nd October 2006.

They have: 527 posts

Joined: Aug 2004

Hang on - it seems to be working now. Sorry about that, don't know why it wasn't working before