FLUID-3880: FSS reset causes borders to appear on elements in IE8

Description

If using FSS reset, black focus outlines will appear in IE8 on elements not intended to receive focus. For example, table cells and even the body element will receive a 2pc black outline.

To work-around this issue, the following can be added to CSS:
:focus { outline: none; }

However, this solution may not be ideal because it affects the global namespace.

If using this workaround, you will then have to specify focus styling for the elements you intend.

Environments

Windows, Internet Explorer 8 (possibly other versions)

Attachments

Comments

• heidi valles commented 2011-01-07T11:20:06.945-0500

  uPortal's preference: let the browser handle focus styling.

• Justin Obara commented 2011-03-04T13:51:00.749-0500

  Fluid-work list thread on Reset file
  http://old.nabble.com/FSS-reset-to31062158.html

• Justin Obara commented 2011-03-07T09:56:59.176-0500

  Some notes from our FSS talk

  ⁃ we can remove the focus styling or scope it to more specific cases
  ⁃ could be part of the themes or it's own fss file

• Justin Obara commented 2011-04-04T14:14:40.635-0400

  At the second FSS talk, we decided that the borders should be handled by scoping it to a class name.
  http://old.nabble.com/Let's-talk-about-FSS-td31035264.html#a31289536

  e.g. ".fl-focus :focus {}"

• Justin Obara commented 2011-04-04T17:10:01.097-0400

  I've implemented the scoping of :focus in a branch on my github account https://github.com/jobara/infusion/tree/FLUID-3880

• heidi valles commented 2011-04-07T15:33:21.546-0400

  Justin I've updated the theme styles and pushed them here: https://github.com/heidiv/infusion/tree/justin-FLUID-3880

• heidi valles commented 2011-04-14T17:49:55.455-0400

  1) Missing fl-focus in:
  all the demo.html files in /demos

  demos/fss/reset/reset.html
  demos/fss/reset/withReset.html

  2) Weird div focusing in demos/fss/themes/html/themes.html
  -The divs are getting the dark outline, but their contents the focus of the theme
  -The menu items take two tabs to focus. Not sure what's going on here...

  3) Uploader focus not on all parts. Ex. files within queue. demos/uploader/html/uploader.html
  No focus on components/uploader/html/Uploader.html

• Justin Obara commented 2011-04-15T15:51:29.448-0400

  Heidi, here are my comments for the points you raised above.

  1) added fl-focus to the individual demo.html files and withReset.html. I didn't add it to reset.html as this just contains iframes

  2) This is likely an FF4 issue with their bug which causes items with overflow:auto to be tabbable

  3) 'm pretty sure the uploader has it's own focus styling already.. so i just added fl-focus to those extra buttons that switch between the types of uploader that are instantiated

• Justin Obara commented 2011-04-18T17:50:09.440-0400

  pushed to the project repo at 44b701cf96d76a9434551b48312499a93b92cce0

• Justin Obara commented 2011-04-27T13:58:29.344-0400

  component and demo css that overrode the :focus to remove focus styling, should be removed now that :focus has been scoped to fl-focus.

• heidi valles commented 2011-04-29T09:52:55.122-0400

  I'm noticing files like gridReorderer.css for example has .demo-gridReorderer-alphabetGrid div :focus ...where we could just put fl-focus on that div instead.
  Searching in webapp for :focus finds a lot of similar situations. Worth cleaning up? I'm not sure it's a big deal, when time is of the essence but it would reflect the switch to using fl-focus on specific items better.

• Justin Obara commented 2011-04-29T13:51:24.643-0400

  Where applicable i've changed the demos to use fl-focus. The changes were made in my FLUID-3880 branch in my github repo https://github.com/jobara/infusion/commit/e49593a49f7bd4ccbaa6bf67d447332747796c42

• Justin Obara commented 2011-05-02T17:51:46.015-0400

  Merged into the project-repo at 599dab9d15e334b6ba0d492262c41416f23c40e8