html outline issue in IE Browser

The HTML structure looks something like this. There are lot of javascript functions that are applied on it though and styles are being set from javascript files as well.

But the main concern here is the default highlight that comes on keyboard focus through tabbing is not getting set on the anchor tag within the li only in IE browser, even though i am trying to apply the outline explicitly it still doesn't show up. Any work around could be done for this?

<ul id="colorDropDown" class="colorDropDownBox" style="height: 128px; overflow: hidden; padding: 0px; display: none; width: 351px;">
<div class="jspContainer" style="width: 351px; height: 128px;">
<div class="jspPane" style="padding: 0px; top: 0px; width: 351px;">
<li tabindex="0" class="colorDropDownRows">

<div>
<img alt="Naturally Pretty Eyeshadow Trio, Pretty in Amber" src="src1">
</div>
<div class="distinctionName">Pretty in Amber</div>

</li>
<li tabindex="0" class="colorDropDownRows">

<div>
<img alt="Naturally Pretty Eyeshadow Trio, Pretty in Nudes" src="src2">
</div>
<div class="distinctionName">Pretty in Nudes</div>

</li>
<li tabindex="0" class="colorDropDownRows">

<div>
<img alt="Naturally Pretty Eyeshadow Trio, Pretty in Plum" src="src3">
</div>
<div class="distinctionName">Pretty in Plum</div>

</li>
<li tabindex="0" class="colorDropDownRows">

<div>
<img alt="Naturally Pretty Eyeshadow Trio, Pretty in Smoke" src="src4">
</div>
<div class="distinctionName">Pretty in Smoke</div>

</li>
</div>
</div>
</ul>