ul styling in firefox and IE

Question

I have this fiddle http://jsfiddle.net/rd2Hc/11/

when clicked in IE gets a dotted border around the li in IE but does not happen in Firefox..Is there a way we can get that in firefox.

<ul>
    <li>
     <a tabIndex="-1" class="ui" id="ui-id-17"  href="#tabs-1">
         Content
         </a>
    </li>
    <li>
        <a tabIndex="-1" class="ui" id="A1" href="#tabs-1">
            People
         </a>
    </li>
    <li>
        <a tabIndex="-1" class="ui" id="A2" href="#tabs-1">
            Test
         </a>
    </li>

score 1 · Accepted Answer · answered Oct 22 '13 at 17:11

1

Yes there is a way. With the property outline and the states for your a tag active or focus just put this lines in your Css

a:active, a:focus {
   outline:#00FF00 dotted thin; /*Change the values that you want*/
}

You can see this running here http://jsfiddle.net/rd2Hc/7/

answered Oct 22 '13 at 17:11

DaniP

37,813
8
65
74

Thank u ..that's what I wanted – user505210 Oct 22 '13 at 17:16

Terry · Answer 2 · 2013-10-22T17:11:24.340

0

The dotted border is because of the default outline property in CSS. You can modify the outline property to do so:

a:active, a:focus {
    outline: 1px dotted #ccc;
}

http://jsfiddle.net/teddyrised/rd2Hc/12/

edited Oct 22 '13 at 17:11

answered Oct 22 '13 at 17:05

Terry

63,248
15
96
118

1

Sorry for not being clear ..I have edited my question..I actually want the dotted line to come up in firefox like it comes up in IE – user505210 Oct 22 '13 at 17:08

ul styling in firefox and IE

2 Answers2