The form elements present a major challenge in IE. Apparently, IE
renders the legend element in odd way. In IE, the legend falls in the
middle of the fieldset border; the background falls outside the
border. When one set position: relative, IE chokes and does not
always displays the legend element; or pushes it off the page.
Negative margins do not help either since the background falls outside
the border.
In addition, the behavior propagates to my fieldset.Radio legend
style. I place a purple border around to illustrate the behavior.
Again, this specific occurrence does not allow me to line up the
legend labels (Firefox handles correctly).
After rereading the form article on the following site, the author
mentioned that this technique has this apparent limitation. Even
though he states this point, I need to understand this behavior and
summarize it. This point will help avoid similar situations in the
future. Obviously, I could include additional markup to get around the
problem, yet this solution become less attractive. Hopefully, somebody
has found a solution or could explain the situation.
Search for Block fieldset
http://www.aplus.co.yu/css/styling-form-fields/
I simplified my page, yet this page still emulates the position fixed.
http://neville.f2o.org/Template_TEMP1.html
The following page removes the OuterWrapper; and assigns { position:
relative; } to the legend element. Bam, the legend elements fall in
place; yet push off the screen.
http://neville.f2o.org/Template_TEMP2.html
The Fieldset.Radio group has several unusually behaviors as well.
First, the Fieldset has some phantom padding; thus pushing the legend
element 4px to the right; Second, the legend element pushes the labels
to the next line. Third the radio labels have larger line heights than
in Firefox. What's going on here? Can we have more control in IE
anywhere along these scenarios?
