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.
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?
i played around with the fieldsets and legends trying to get rid of that background that appears above the fieldset border in IE. couldnt figure anything out, AT ALL!
so my thinking is that that color outside of the border is totally unaceptable to me, i did something that gave me a background within the fieldset and that didnt show outside of the border. i made a gradient image (fades bottom to top) and the top of the image is the same as the bgcolor of my site. then i position this at the top of the fieldset. that way i still get the bg i want to use without the IE overflow.
i know it doesnt solve the problem technically, it looks better than any thing else i could do, though my css skills are pretty weak.
I am seriously considering taking a different approach. But have one inherent personality flaw; I need to understand what's going here before putting it to bed.
Btw
Your eCardster site is beautiful. Very elegant and simple!
Bookmarks