Here is the current code:

/* For the DomTab */
div.domtab{
padding:0 0em;
width:100%;
/* background: Fuchsia; */
}
ul.domtabs{
float:left;
width:100%;
margin: 1em 0 0 0; /* does what? 1em 0 0 0 */
list-style: none;
margin-top: 0px !important;
display: block;
}
ul.domtabs li{
float:left;
padding:0 0.5em 0 0; /* does what? 0 0.5em 0 0 */
}
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover{
padding: .2em .5em; /* .2em 1em controls the spacing between tabs themselves */
display: block;
background: #999; /* controls the background colour of non active tabs 99CCFF */
color:#eee; /* controls the font colour of non active tabs */
font-weight:bold;
text-decoration:none;
}
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover{
height:auto;
min-height:2em; /* 2 em controls spacing between tabs and content */
}
ul.domtabs a:hover{
background: #6699CC;
text-decoration: none !important;
}
div.domtab div {
/* clear:both; makes the content float beaneath almost everything...*/
width: auto;
background: none; /* #ccc Controls the background colour of the big box */
/* color:#fff; */
padding: 1em 1em; /* 1em 1em;controls the width of the padding around content*/
margin-top: 0px !important; /* Fix for IE */
}
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover{
background:#ccc;
color:#fff;
text-decoration: none !important;
}
#domtabprintview{
padding:.5em 4em;
text-align:right;
}
#domtabprintview a:link,
#domtabprintview a:visited,
#domtabprintview a:active,
#domtabprintview a:hover{
color:#ccc;
}
div.domtab div a:link,
div.domtab div a:visited,
div.domtab div a:active
{
/* display:block;
padding:1em .5em;
font-size:1em;
text-decoration: none !important;*/
line-height: 1em;
}
div.domtab div ul li {
margin: 0;
/* padding: 1px 0;& */
line-height: 1em;
}
#domtabtagcloud {
background: #ccc url("sawchuk/tagcloudbackground.jpg") repeat-x top left !important;
}
#domtablatest {
background: #fff url("sawchuk/domtabgbackground.jpg") repeat-x top left !important;
}
#domtabfeatured {
background: #fff url("sawchuk/domtabgbackground.jpg") repeat-x top left !important;
}
#domtabquestion {
background: #fff url("sawchuk/domtabgbackground.jpg") repeat-x top left !important;
}
/*end Domtab */

Good karma spreads via the internet too.

This post has 5 comments.

  1. butter
    08 Mar 06
    12:00 am

    It’s hard to give you a suggestion without the actual HTML structure that the css is stylising. I am assuming (a) the navigation is tabbed (b) the width of the navigation change according to the browser. If you can provide in what context will this type of navigation be used, then I think the web design community can help you better.

  2. deepthought
    08 Mar 06
    1:20 am

    Butter,

    Thanks for your comments. In all honesty, this is a bad question because it is so open ended. That said:

    A) Yes, the navigation is tabbed, and;
    B) No, the theme uses a fixed width.

    Context, right here on this blog, the tabs are shown at the top of the sidebar on the right. They appear different in IE and FF / Opera etc. Not only that, I’m not too happy with the license the JavaScript employs, I think I will be switching horses for a more user friendly code: tabbifier

    Honestly, thanks for your thoughts! Do you recommend anything different?

  3. Butter
    15 Mar 06
    11:55 am

    oooh i see. I will take a look at it once I get home. Thank you.

  4. John Doe
    08 Jul 07
    4:55 pm

    Flexible WordPress Navigation

    I guess this is not the solution of all of your navigational problems .. but it does offer a flexible navigational mechnism for your wordpress blogs.

  5. Tommy M
    05 Jul 08
    1:18 pm

    I made a quick tutorial explaining how to use images quickly and easily in your Wordpress navigation. It’s also XHTML Strict and CSS valid. It explains how to use “active” and “hover” effects as well.

    http://thedailytut.com/wordpress/an-image-wordpress-navigation-with-hover-and-active-links#comments