jquery tabbed interface breaks when using images

Question

hello all,

using jquery to create a tabbed interface. coding is 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 you can see, all this does is add the class 'active' to the li that is clicked, and this corresponds to whether a background is shown or not. this works perfectly with text, but i am required to use non standard fonts. when i try to side step the issue using transparent .png images, it is unreliable.

For instance, changing the HTML to:

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

Answer 1

If using non-standard fonts is your goal, I would avoid using inline images. The web has come a long way, and there are a number of less brittle and obtrusive solutions available to you.

There are currently three techniques (that I am aware of) for replacing browser fonts with fonts of your choosing:

• sIFR is a flash-based approach.
• cufon uses a combination of SVG and JavaScript to render text.
• CSS3 font replacement is a pure CSS approach to replacing fonts, and there are a number of articles that explain how to implement it cross-browser.

Each approach isn't without its drawbacks (for instance, cufon makes it difficult to copy-paste the heading text), but ultimately they're all a better alternative to dealing with static images.