Question

I have a basic HTML page which has Twitter Bootstrap, I am using the Tabs element which works to a point however I have images wrapped in a tags which denote the different tabs, when a tab is clicked the image intercepts the click and navigates the user to an “undefined” page hoever clicking around the image activates the tabs as normal.

<ul class="nav nav-tabs" id="myTab" style="margin-left: 0px;">
    <li><a data-toggle="tab" href="#fr" > <img src="img/flags/fr.png" alt="Françaises" title="Françaises" width="16" height="16" align="middle" style="margin-top: -4px;" /></a></li>
</ul>

Is there a way to stop this without setting the image as a background in CSS?

Answer 1

OK Solved with css

CSS:

.frFlag {background-size: 16px 16px;background-image: url(img/flags/nl.png);background-repeat: no-repeat;background-position: center center;}

html

<li><a data-toggle="tab" href="#fr" style=" class="frFlag">&nbsp;&nbsp;</a></li>

Thanks for the time stackers!