5

I want to set in % the height of a div included in a fieldset, but browsers don't calculate the same way the inside height of the fieldset when you use legend !

Firefox: height: 100% consider the height of the legend: it's ok.
enter image description here

Chrome: height: 100% does NOT consider the height of the legend: it overflows.
enter image description here

Internet Explorer: height: 100% does NOT consider the height of the legend: it overflows.
enter image description here

1. Do you know a clean solution to have the same result in the 3 browsers?

2. Which is right compared to W3C recommendations?

Here is the code used to make the test: 

<html>
<body>
  <fieldset style="height:60px;width:150px;">
    <legend>Legend</legend>
    <div style="height:100%;width:100%;margin:0;padding:0;background-color:#FF0000;">
DIV : height 100%
    </div>
  </fieldset>
</body>
</html>
Volker E.
  • 5,911
  • 11
  • 47
  • 64
M Denis
  • 138
  • 7

3 Answers3

1

This is an interesting case.
To your 2nd question: It might arise out of W3C HTML5 standard spec being very vague of the visual representation of <legend> element. There has been a long history of browser inconsistencies around <legend>.

To answer your question 1. and come up with a cross-browser consistent position of legend:
In order to get the miscalculation resolved, you have to remove legend from the content flow, for example by adding float to it. Then you need to reposition it relatively and 456bereastreet.com came up with a sibling selector clearing the float immediately after.

Demo:
https://codepen.io/Volker_E/full/zqPjrK/

CSS code on top of your inline styles:

fieldset {
  position: relative;
  margin: 0;
  border: 1px solid #000;
  padding: 0;
}
legend {
  float: left;
  margin-top: -1em;
  line-height: 1em;
}
legend + * { /* @link: http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/ */
  clear: both;
}

It is indeed browser differences (bugs?) or vague spec, which don't allow to style it consistently without taking legend out of flow.

Volker E.
  • 5,911
  • 11
  • 47
  • 64
  • Glad that I could help! If I had more time I'd put it as bug report into Chromium Bug Tracker and see what developers are responding about the spec interpretation: https://crbug.com/new – Volker E. Apr 07 '16 at 16:22
1

This is an old topic, but still can be useful to someone (my solution is below).

I searched all day for a solution and did not find it. I want to display it correctly in chrome, firefox, edge, opera and IE11 (which will probably also work on IE10).

"Float" or "position: absolute;" does not solve the problem for me, because it removes the transparent background of the legend. I want to keep it on the fieldset 's border and also keep its transparent background (so as one does not see the border beneath it).

I tried with negative top/bottom margins, but then I have a problem in firefox (which infact is the only one who displays the legend correctly).

How I solved it:

I just put "line-height: 0;" (no unit) on my legend and now it displays it correctly. This way I managed to get the full height of the filedset, from top to bottom border (without the bottom overflow), with overlapping the content with the legend. Now this can be solved with filedset's padding (detach the content from the label and/or vertically center it with top/bottom padding on the fieldset etc.).

If you need a border on the legend, you can do it with an absolutely positioned pseudo-element (width 100%, height in px/em/rem, top 50%, left: 0, translateY -50%), because padding on legend (even with negative margins) will bring back the same problem.

I tested this in all above-mentioned browsers, on Windows 8.1.

I have not tested it on mobile or safari. I will test it on several mobile browsers (android), but if there's someone to check it on safari, it would be nice.

vIGGS
  • 51
  • 5
0

I was going crazy with the same issue and I've found a css snippet for normalizing fieldsets, And it goes right, in my case I had to remove some properties that are unnecesary, I've removed the old IE versions support too.

this is what I've used to solve my problem commenting unnecesary lines and IE support:

fieldset {
    margin: 0px; padding: 0px; display: block; position: relative; width: 100%;
    //%border-top: none !important; /* for IE7, does not work with Webkit */
    //_padding-top: 3em; /* for IE6 */
}
fieldset > * {
    width: auto;
    //%width: auto !important; /* for IE7 */
    // margin-left: 1.5em; /* emulating fieldset padding-left */
    // margin-left: 1.5em !important;  /* for IE7 */
}
fieldset *:first-child + * {
    // margin-top: 3em; /* emulating fieldset padding-top */
}
fieldset:last-child {
    margin-bottom: 1.5em; } /* emulating fieldset pading-bottom */
legend {
    width: 100%;
    //%width: 100% !important; /* for IE7 */
    position: absolute;
    top: -1px; left: -1px; /* hide the fieldset border */
    margin: 0px !important; /* suppress all margin rules */
    line-height: 2em; /* emulating padding-top/bottom */
    text-indent: 1.5em; /* emulating padding-left */
    //%left: -8px; 
} /* for IE7 */


/* user format */
fieldset, legend {
    border: 1px solid #ddd;
    background-color: #eee;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
legend {
    font-weight: normal;
    font-style: italic;
    font-size: 1.2em;
    text-shadow: #fff 1px 1px 1px; }
fieldset {
    background-color: #f7f7f7;
    width: 360px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px; }

This is the first time I try to help on stackoverflow, usually I only read the answers. Well the original and Snippet is on https://gist.github.com/paranoiq/827956/31303920733a98805cd46915c249ec788cfca6a6

Really, really usefull to understand how fieldsets works around different browsers, hope it can save others from frustration.

Pd: Sorry if my english isn't good enough, but hope you can understand it perfectly

Alan Castellón
  • 1
  • Thank you Alan for your answer... But that's not really what I search for : It's not standard, and the top of the inside DIV is under the legend and not after the bottom of the legend... Your solution need to modify a lot of pages of the existing pages... – M Denis Oct 22 '15 at 22:26