Legendary

I promised a test case for my latest problem and here it is: Gecko’s stubborn legend.

A few things worth noting:

1. In reality the yellow background will be a gradiant background image within each box, so I can’t just apply the background to the form.

2. Opera starts out displaying the upper form as FireFox does. The addition of position: relative (with no top, left, etc.) to the styles for legend magically changes that.

3. IE7 breaks the * html hack so some further work will be needed to align the legend horizontally without breaking things in any other browser.

4. Gecko doesn’t seem to apply float or display (except display: none;) to legend elements at all.