Hi guys,

After a whole day of working on this I have all my tabs at the top of the page how I want them.. BUT I feel I have cheated the system, rather than done what is a stable fix. It works fine on firefox and IE8 but is no good on anything else as everything is thrown out.

I believe I'm fighting the PHP file with the stylesheet because I want to position all the tabs in an 'absolute' fashion. My PHP statement in the tpl_header is this:


<li<?php echo (($current_page_base == 'contact_us') ? ' class="current">' : ' class="contact">');?><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><?php echo '<span>' . BOX_INFORMATION_CONTACT . '</span>'; ?></a></li>

and my stylesheet definition is:

#navMain ul li.contact a {
margin:0;
position: absolute;
top: 10px;
right: 778px;
padding: 0 5px 0 4px;
float:left;
background: url(../images/tableft.gif) no-repeat left top;
color:#854401;
text-decoration:none;
}
#navMain ul li.contact a span {
display:block;
background: url(../images/tabright.gif) no-repeat right top;
padding:2px 14px 2px 5px;
color:#854401;
}
#navMain ul li.contact a:hover {
background-position:0% -42px;
}
#navMain ul li.contact a:hover span {
padding:2px 14px 2px 5px;
background-position:100% -42px;

I don't know what to remove/add to allow for smooth display in less intelligent browsers as I just about know enough to experiment but I don't understand fully...

Is it a 5 minute project or a big overhaul?

Any advice would be appreciated

Steve