Firefox (OS X) Tip-Of-The-Day: Hacking the tab focus on form elements

This is not CSS, but it does drive me batty when I’m creating forms.

Does this bother you, too? When you tab a form in Firefox (on a Mac) it skips the radio buttons, checkboxes, and select drop-down fields. Hate that!

I recently found the hack to fix this:

1. Type about:config in the URL bar.
2. In the Filter field, type tabfocus.
3. Double-click on the accessibility.tabfocus preference.
4. Change the value to 7.
5. Restart your browser and tab away.

If accessibility.tabfocus isn’t in the list (it wasn’t in mine):

1. Right-click on Firefox.app and select Show Package Contents
2. Open /Contents/MacOS/greprefs/all.js
3. Insert pref("accessibility.tabfocus", 7); (I put it where all the other accessibility prefs were declared)
4. Restart your browser and tab away.

~

BREAKING NEWS:
It turns out this tabbing thing is handicapped by default in Mac OS X. However, changing it is simple through System Preferences > Keyboard & Mouse > Keyboard Shortcuts. At the bottom of that window, it says:

Full keyboard access
In windows and dialogs, press Tab to move the keyboard focus between:

[ ] Text boxes and lists only
[ ] All controls

So there. Just check and you’re done. So my question is, why is it handicapped in the first place??

Margin Inheritance Bug in IE 5/6

This is documented in a number of blogs, including Quirksmode, but I wanted to repeat it here as a memo to me.

Some people refer to this as the Margin Doubling Bug, but I think inheritance is what’s really happening so it depends whether you prefer to name by cause or by effect.

The Problem

• Some form elements (esp inputs) inherit the margin of their parent container when you float them. Especially if one uses a fieldset container with margins set.
• This also happens with some non-form elements in particular circumstances (I haven’t made an exhaustive study to determine precisely when this occurs, but if I run across examples, I’ll post them here).
• Trying to set margin:0 on the inheriting element does nothing.
  

The Solutions
Try one of these solutions, in this order, until the problem goes away:

• Set overflow: hidden on the child element
• Set display: inline on the child element
• Wrap the child element in a div and set the float, padding, margin on the div

In my struggles with a floated submit button inheriting a right margin, I had to use the last solution, which is the least preferred since it adds more markup than is really necessary. But even trying to use IE conditional CSS wouldn’t work.

IE disregards </li> (list closing tags)

I’ve been making modified Suckerfish (and Son of Suckerfish) Drop-Down Menus with background colours and border separated. The trouble is IE ignores closing list tags, meaning the carriage return in the HTML gets rendered as a space between the list items (below the bottom border of my list element). This tiny gap makes me nuts. The only way to get rid of it is to close the gaps in the HTML between </li> and the next <li> or </ul>.

So instead of this easy-to-read markup:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

… you need to make it:
<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>

This person has a JavaScript for removing the white space, but it didn’t work for me. I’ll have to crack open the JavaScript text to figure out why not.

Negative margins/indents bug in IE 5/6

I read someone else’s post about this bug last week, but I ignored it because it had never come up for me. Well, guess what? It’s a new week.

So here it is: if you try to apply a negative margin (and others report it happens with negative indents as well) to an element whose parent hasLayout, the element’s outer bits get cropped by the parent’s borders.

Eg.

1. The parent grey box has width:300 and float: left declared.

2. This paragraph has a left and right margin of -10px. You should be able to see the red border extend outside the grey box and read all of the text.

3. I include this to point out the importance of retaining the order of these three paragraphs.

In IE, the parts of the red-bordered paragraph beyond the grey box are cropped off.

1. This time, the parent grey background div has no width or float applied to it.

2. This paragraph has a left and right margin of -10px. You should be able to see the red border extend outside the grey box and read all of the text.

3. I include this to point out the importance of retaining the order of these three paragraphs.

This time, IE renders the red-bordered paragraph entirely (or would, if the grandparent column didn’t have layout, which it does, meaning the right edge of the paragraph gets cropped).

Peter-Paul Koch at Quirksmode.com noted:

IE 7 crops the right margin of the first example, but not the left. IE Mac ignores the margin-right: -10px in the first example.

Solutions, AFAIK:

1. Remove the hasLayout trigger for the parent (width, height, float, plus others). Not much of a solution when the reason you needed the negative margin in the first place probably had something to do with the parent’s dimensions and positioning.
2. *UPDATE*: If you don’t mind adding another div layer, you can use a grandparent element (between the great-grandparent and parent) and declare padding to give enough room around the negative margined child. However, this won’t work when there is another (aunt) element floated beside the parent. I’m still looking into all the possible rearrangements…
   

If anyone knows of a work around that preserves the element order, please shoot.

******UPDATE (2009.06.24):
Solution is here.