Nested Fieldset Issue (IE vs. FF)
newbie
Posted: Thu, 2008-07-24 06:12
I am following a CSS forms layout tutorial at:
http://www.sitepoint.com/article/fancy-form-design-css/6
This mostly works for me however when trying to nest fieldset tags per the suggestion I discovered a strange issue in IE 6 & 7.
Below is the minimal test case I produced to demonstrate the issue.
<style>
fieldset {
margin: 0 0 -1em 0;
padding: 0 0 1em 0;
border: 1px solid #BFBAB0;
}
fieldset fieldset {
border-style: none;
}
</style>
<fieldset>
<legend>Legend 1</legend>
<fieldset>
<legend>Legend 2</legend>
</fieldset>
<fieldset>
<legend>Legend 3</legend>
</fieldset>
</fieldset>
From this code I expecting a border on the outer fieldset but no border on the inner fieldsets. In FireFox this works as I expect. In Internet Explorer the first fieldset does not have a border as expected but second nested fieldset has a border around it.
Please see the attached image for a visual of what I am describing. notice in the Internet Explorer version on the right of the image the top of the border is intercepting the Legend 3 text. However as expected Fire Fox has no border here.
Thanks for your suggestions.
JT
Moderator
Posts: 12081
Joined: 2004-06-06
Location: London
Why the negative margin
Posted: Thu, 2008-07-24 06:37
Why the negative margin bottom? without that IE renders as you wish.
Haven't time to compare browsers, but styling forms and their controls is generally a cross browser nightmare, never expect to be able to style whatever you wish, it simply doesn't work that way with some browsers applying properties to one control where another browser won't
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
newbie
Posts: 2
Joined: 2008-07-24
Solution and Reason for Negative Margin
Posted: Thu, 2008-07-24 13:36
The purpose for the negative margin really does not come out in the minimal test case I displayed. However when you add additional styling the purpose is to eliminate the white space between field sets. For a more detailed explanation see:
http://www.sitepoint.com/article/fancy-form-design-css/5
Since the margins were the problem I found that in my case I could resolve this issue adding margin: 0; and padding: 0; to the nested field set style.
The resulting code works as expected.
<style> fieldset { margin: 0 0 -1em 0; padding: 0 0 1em 0; border: 1px solid #BFBAB0; } fieldset fieldset { border-style: none; margin: 0; padding: 0; } </style> <fieldset> <legend>Legend 1</legend> <fieldset> <legend>Legend 2</legend> </fieldset> <fieldset> <legend>Legend 3</legend> </fieldset> </fieldset>Thanks Hugo!
James