[Solved] blocked the default focus style!

[carylizable]

Somehow I blocked the default browser focus styling (dotted square) around my nav links. Threw in several focus styles, none of which work. I think it’s the link or title class.

[MOD EDIT – Codedump Removed]

[shaneisme]

Please don’t dump code into the forum.

Use CodePen or provide a live URL.

[carylizable]

Sorry. Here’s the live URL but I can’t isolate the code to use code pen. Maybe it’s not an appropriate question for this forum? http://www.durhamtech.edu/

The problem is when I tab down to the nav menu in the black bar, the default focus browser styling (dotted white box) doesn’t show around the link.

[Shikkediel]

Looks like there’s a repeating typo for the outline rules :

outline: 1px dotted; #fff

No semicolon needed…

[carylizable]

Thanks so much for catching that. Didn’t fix the problem though. There’s a lot of repetitious CSS there since I was trying to get it to work different ways. None of them do. I can’t figure it out.

[Shikkediel]

I also see you are using :focus for links – which do not have any input. Could be worth trying :hover or :active instead.

Edit – reading up, right now it would only work with the keyboard.

[shaneisme]

I can’t isolate the code to use code pen

Why not? I bet it would solve your problem, or at least it would let you know that the problem was X instead of Y.

I took a quick glance at the website, but things are a bit messy with stuff being overwritten and over-specified… If you simplified the test a bit, we could all dig into it.

[carylizable]

You guys were right (are you always?). Thanks for pushing me. I stripped out all of the code and slowly built it back in. I need to use focus because I only want it to show on tabbing and not hovering or active for accessibility purposes. This is the code that worked (finally).

#main .cell .title:focus{outline: 1px dotted #fff}

Thanks again for catching the extra colon Shikkediel. That would have driven me nuts.

[shaneisme]

Hey I like to hear that @carylizable – keep at it and start a new thread if anything else goes haywire.

[Author]

Posts