3 replies [Last post]
carylizable
carylizable's picture
Offline
newbie
durham, nc
Last seen: 5 years 29 weeks ago
durham, nc
Timezone: GMT-5
Joined: 2015-01-19
Posts: 3
Points: 4

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}

carylizable
carylizable's picture
Offline
newbie
durham, nc
Last seen: 5 years 29 weeks ago
durham, nc
Timezone: GMT-5
Joined: 2015-01-19
Posts: 3
Points: 4

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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 4 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

: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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

carylizable
carylizable's picture
Offline
newbie
durham, nc
Last seen: 5 years 29 weeks ago
durham, nc
Timezone: GMT-5
Joined: 2015-01-19
Posts: 3
Points: 4

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!