CSS sprite in wordpress

HTML & CSS
1

So, I had my sprite working just fine outside of WP, but the nav structure changed once I put it in WP.

Site that it worked on
http://deva.bambl.clients.blinkss.com/index.html

Site it isn’t working on
http://devb.bambl.clients.blinkss.com/

Look at the MMA link on the main nav.

My Wordpress code

<div id=“MainNavigation”>

	&lt;ul id="MainNav"&gt;



    &lt;div class="menu-mainnavigation-container"&gt;&lt;ul id="menu-mainnavigation" class="menu"&gt;&lt;li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"&gt;&lt;a title="About us" href="http://devb.bambl.clients.blinkss.com/about-us/"&gt;About us&lt;/a&gt;&lt;/li&gt;

<li id=“menu-item-47” class=“menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-38 current_page_item menu-item-47”><a href=“http://devb.bambl.clients.blinkss.com/personal-training/”>Personal Training</a></li>
<li id=“menu-item-183” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-183”><a href=“http://devb.bambl.clients.blinkss.com/schedules/”>Schedules</a></li>
<li id=“menu-item-45” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-45”><a href=“http://devb.bambl.clients.blinkss.com/contact-us/”>Contact us</a></li>
<li id=“menu-item-118” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-118”><a href=“http://devb.bambl.clients.blinkss.com/group-fitness-classes/”>Classes</a></li>
<li id=“menu-item-69” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-69”><a href=“http://devb.bambl.clients.blinkss.com/mma-classes/”>MMA Classes</a></li>
<li id=“menu-item-68” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-68”><a href=“http://devb.bambl.clients.blinkss.com/trx-training/”>TRX Training</a></li>
<li id=“menu-item-67” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-67”><a href=“http://devb.bambl.clients.blinkss.com/spin-classes/”>SPIN Classes</a></li>
<li id=“menu-item-111” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-111”><a href=“http://devb.bambl.clients.blinkss.com/cross-fit/”>Cross Fit</a></li>
</ul></div>

    &lt;!--
		&lt;li&gt; &lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt; &lt;a href="#"&gt;Personal Training&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt; &lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt; &lt;a href="Classes.html"&gt;Classes&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a href="Contact_us.html"&gt;Contact us&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a class="MMA" href="#"&gt;MMA&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt; &lt;a class="TRX" href="#"&gt;TRX&lt;/a&gt;&lt;/li&gt;
       	&lt;li&gt; &lt;a class="SpinClass" href="#"&gt;Spin Class&lt;/a&gt;&lt;/li&gt;
      	&lt;li&gt; &lt;a class="CrossFit" href="#"&gt;Cross Fit&lt;/a&gt;&lt;/li&gt;

        --&gt;

	&lt;/ul&gt;

</div> <!–MainNavigation–>

Current CSS

#menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69 {
display:inline-block;
width: 101px;
height: 70px;
background:url(/wp-content/themes/Newport_Sports_Club/IMAGES/Mixed_Martial_arts.png) 0 0;
text-indent: -99999px;
}

#menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69:hover a {
background-position: -100px 0px;
}

2 
#menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69 {

is targeting the LI, rather than the <a>, so try adding a at the end:

#menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69 [COLOR="#FF0000"]a[/COLOR] {
3

Yea I tried that before and just now again so that you can see it. I don’t know what the trick is but its annoying.

4

Ah, silly me, I didn’t notice how invalid your code was. You should have this:

#menu-mainnavigation li.menu-item-69 a{

instead of this:

#menu-mainnavigation li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69 a {

You can’t select somethng like this in CSS:

li.menu-item menu-item-type-post_type menu-item-object-page menu-item-69

See all those gaps? If you wanted a rule specific to a LI with all those classes, you’d have to join them with dots. I.e.

li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-69

This is horrifically ugly code, though—the penalty for using a system like WordPress.

5

Thx. Yea wordpress really adds a lot of items or whatever you call it. thx its working great!

6

So why do we ignore the other portion of the class name?

7

Each of those are separate class names. You only need to target one to get the job done. If you want to target them all, you have to tie them together like I showed. If you leave gaps between, that gives the wrong message to the browser. E.g. with this

li.menu .somethingelse {}

the browser tries to apply the style to an element inside the LI with a class of “somethingelse”. If you meant to target a LI that had two classes—“menu” and “somethingelse”, you’d do this:

li.menu.somethingelse {}

If you just do this:

li.menu somethingelse {}

with no dot before “somethingelse”, the rule won’t work, as there is no element called <somethingelse>. A class name must have a dot before it.