png - jquery tabbed interface breaks when using images -

using jquery create tabbed interface. coding quite typical:

html:

<div id="tabbed-interface"> <ul> <li><a href="#option1">option1</a></li> <li><a href="#option2">option2</a></li> <li><a href="#option3">option3</a></li> </ul> </div> 

jquery:

$(document).ready(function(){ $('#tabbed-interface li:first').addclass('active'); $('#tabbed-interface div').not(':first').hide(); $('#tabbed-interface>ul>li>a').click(function(event){ $('#tabbed-interface>ul>li').removeclass('active'); $(event.target).parent().addclass('active'); $('#tabbed-interface>div').fadeout().filter(this.hash).fadein(250); return false;});}); 

css:

ul li {background: #232323; list-style: none; border: 1px solid #616161; } ul li.active {background: none; list-style: none; border: 1px solid: #616161; border-bottom: 1px solid #121212; z-index: 1; } 

as can see, add class 'active' li clicked, , corresponds whether background shown or not. works text, required use non standard fonts. when try side step issue using transparent .png images, unreliable.

for instance, changing html to:

 <div id="tabbed-interface">  <ul>  <li><a href="#option1"><img src="option1.png" /></a></li> 

if using non-standard fonts goal, avoid using inline images. web has come long way, , there number of less brittle , obtrusive solutions available you.

there 3 techniques (that aware of) replacing browser fonts fonts of choosing:

• sifr flash-based approach.
• cufon uses combination of svg , javascript render text.
• css3 font replacement pure css approach replacing fonts, , there a number of articles explain how implement cross-browser.

each approach isn't without drawbacks (for instance, cufon makes difficult copy-paste heading text), they're better alternative dealing static images.