Hi! For my theme I did dynamic highlighting so that when you are viewing a page the link will have its own class. For some reason it is not working on my website: http://mikewgd.net - Im using image rollovers and for the current state I just changed the background position and it was working when I did plain old CSS and XHTML but when I put it into WordPress its not working. Here is what I have in my header and the css information:
<div id="searchnav">
<div id="search">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<ul id="nav">
<li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="http://localhost:8888/" class="home" title="Home">home</a></li>
<li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="http://localhost:8888/about/" class="about" title="About">about</a></li>
<li<?php if ( is_page('portfolio') || is_page('websites') || is_page('motion') || is_page('video') || is_page('graphics') ) { echo ' class="current"'; } ?>><a href="http://localhost:8888/portfolio" class="portfolio" title="Portfolio">portfolio</a></li>
<li<?php if ( is_page('contact') ) { echo ' class="current"'; } ?>><a href="http://localhost:8888/contact" class="contact" title="Contact">contact</a></li>
</ul>
</div> <!--end of searchnav-->
#nav {padding:8px 50px 0 0;margin:0;list-style-type:none;float:right; }
#nav li {background: none;padding: 0;outline:none;float: left;border:0px solid black;}
#nav a {width: 99px;height: 46px;outline:none;text-indent: -900em;display: block;}
#nav .current {background-position:0 -100px;outline:none;border:0;}
#nav a:hover {background-position:0 -50px;outline:none;border:0;}
#nav .home {background: url(images/nav-home.gif) no-repeat;outline:none;}
#nav .about {background: url(images/nav-about.gif) no-repeat;margin:0 22px 0 0;outline:none;}
#nav .portfolio {background: url(images/nav-portfolio.gif) no-repeat;margin:0 28px 0 0;outline:none;}
#nav .contact {background: url(images/nav-contact.gif) no-repeat;outline:none;}
So if someone could help me out that would be great and also if someone could tell me why there is a break in IE - for some reason the padding does not work and the center align does not work, I put margin: 0 auto; and that is suppose to center everything but in IE it doesnt do it.
Thanks!