Mon, 2015-01-19 19:28
I must have blocked the default browser focus styling (dotted outline) on my nav links but I can't figure out where. I threw in more focus styling to try and override it but it's not working. Any suggestions?
HTML:
-
About Durham Tech
CSS:
a:focus { outline: 1px dotted; #fff}
focus { outline: 1px dotted; #fff}
#main{box-shadow:0 5px 0 rgba(0,0,0,0.15);height:50px;position:relative;z-index:6}
#main .row{height:50px;width:100%}
#main .container{display:table;height:50px;margin-bottom:0;position:relative;width:100%}
#main .cell{background:transparent;display:table-cell;height:55px;padding:0}
#main .cell.active{background:#999}
#main .cell .link{background:#262626;display:block;height:50px;line-height:50px;width:100%}
#main .cell .link:focus{ outline: 1px dotted; #fff}
#main .cell .title{color:#fff;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:1.2;margin-top:-2px;padding:0 10px;vertical-align:middle;width:100%;}
#main .cell .title:focus{ outline: 1px dotted; #fff}
#main .cell .dropdown{background:#fff;display:none;left:0;position:absolute;top:55px;width:100%}
#main .cell.last .dropdown{left:auto;right:0}
#main .cell:hover{background:#00843D}
#main .cell.hover .dropdown{display:block}
Mon, 2015-01-19 19:38
#1
Maybe I should read the directions first ...
Sorry, here's the html code ... again. I got rid of the extra coding. I'm focusing mainly on the link or title classes.
<nav id="main"> <div class="row"> <ul class="container"> <li class="cell"> <a href="about/index.htm" class="link"> <span class="title">About Durham Tech</span> </a>
Mon, 2015-01-19 22:28
#2
:focus is often ephemeral
If you use your mouse, you will not see the :focus as it appears and is immediately overridden by :active. To test, right click the link and open in new tab. Then switch back to the original tab. If :focus is working correctly you should now see the dotted outline. You should also test by tabbing through the various links and other focusable elements. The focus style should follow the tabbing.
cheers,
gary
Tue, 2015-01-20 12:27
#3
It's always what you least expect...
Yes Gary, that's just what I want. For accessibility purposes, if someone was using the keyboard instead of a mouse, I wanted them to visually see which link they were at as they tabbed through the page. Browsers have a default built in that does this, but my CSS was covering it up. I finally figured out where.
And this was the style that worked after I removed the semi-colon before the color: #main .cell .link:focus{ outline: 1px dotted; #fff}
Thanks!