28867 2009-08-31 22:55:04 -0700 Presentation of fieldsets magically and irreversibly changes when the fieldset contains a legend 2018-08-16 12:19:23 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Mac (Intel) OS X 10.5 UNCONFIRMED P2 Normal --- 188643 0 justin webkit-unassigned justin max webkit zcorpan oldest_to_newest 143777 0 justin 2009-08-31 22:55:04 -0700 When you add a legend element as a child to a fieldset, the fieldset's appearance changes in a way which isn't reflected in the Inspector, doesn't appear to be done with styles, and can't be corrected or reversed by applying additional styles. I know and fully understand that this is the default presentation style for fieldsets with legends in many user agents, but my concern is that these visual changes do not appear to have been done with CSS, are not reflected in the Inspector pallet, and can't be reversed or altered by a stylesheet author who is aiming for a different presentation. The Safari HTML reference seems to describe the behavior (emphasis mine): "This tag specifies the label for a fieldset (specified by the <fieldset> tag). The caption specified by content is *merged with the box surrounding the fieldset.*" I'm not arguing that this should not be the default presentational style, but I am arguing that it should be achieved with regular styles and positioning, so that stylesheet authors can alter the presentation to suit their needs. The only choice I seem to have right now is absolutely positioning the legend within a relatively positioned fieldset. If it *is* possible to alter this default presentation (perhaps by altering a -webkit value somewhere, I'd love for it to be known and documented. For the record, when a fieldset has a legend child element added to it, the visual changes are best described as follows: * hovering over the element with the inspector seems to show the box with the same top position (where it would be located if there was no legend element) * the visual top edge of the fieldset box (where the border and background color starts) appears to shift down by half the line height of the legend element * the legend element is shifted up by half it's line height 166692 1 43913 max 2009-11-26 03:33:00 -0800 Created attachment 43913 fieldset/legend example/explaination and CSS equivalent 166693 2 max 2009-11-26 03:33:18 -0800 Two additional points about the visual affect of the legend: * The fieldset's border is masked out in the area beneath the legend's border box, but the fieldset's background is not. * The outer padding edge of the fieldset is aligned to the bottom edge of the legend. The background, however, still reaches to the edge of the border box. Neither of these effects are possible using CSS without additional markup and non-relative, pre-computed padding values. I have attached an HTML document which illustrates the problem in detail and suggests possible CSS equivalents. 1450791 3 zcorpan 2018-08-16 12:15:31 -0700 Proposal to be able to turn off magic for fieldset and legend at https://github.com/whatwg/html/issues/3912 43913 2009-11-26 03:33:00 -0800 2009-11-26 03:33:00 -0800 fieldset/legend example/explaination and CSS equivalent fieldset.html text/html 3756 max PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KIDx0aXRsZT5NYWdpY2FsIEZpZWxkc2V0IExl Z2VuZCBTdHlsaW5nPC90aXRsZT4KIDxzdHlsZT4KCS8qIGxheW91dCBDU1MgbW9kZWwgbmV4dCB0 byB0aGUgZmllbGRzZXQgZm9yIGVhc2llciBjb21wYXJpc29uICovCgkjZmllbGRzZXQsICNkaXZz IHsgZGlzcGxheTp0YWJsZS1jZWxsOyB3aWR0aDoxMGVtOyBwYWRkaW5nOjAgLjdlbTsgfQoKCS8q IGF2b2lkIGVtIHJvdW5kaW5nIGVycm9ycyBieSB1c2luZyBwaXhlbCB3aWR0aHMgKi8KCWJvZHkg eyBmb250LXNpemU6MTZweDsgbGluZS1oZWlnaHQ6MThweDsgIC8qIGFib3V0IDEycHQsIDEuMThl bSBsaW5lLWhlaWdodCAqLyB9CglmaWVsZHNldCwgLmZpZWxkc2V0IHsgYm9yZGVyLXdpZHRoOjJw eDsgfQoKCS8qIHJlZmVyZW5jZSBsaW5lIGZvciBmaWVsZHNldCB1cHBlciAibWFyZ2luIiAqLwoJ LmJvcmRlckxpbmUgeyBib3JkZXItYm90dG9tOjFweCBzb2xpZCBibGFjazsgfQoKCS8qIG1ha2Ug YmFja2dyb3VuZCBhcmVhIG9mIGZpZWxkc2V0IGFuZCBkaXYuZmllbGRzZXQgdmlzaWJsZSAqLwoJ ZmllbGRzZXQsIC5maWVsZHNldCwgLmJvcmRlck1hc2sgeyBiYWNrZ3JvdW5kLWNvbG9yOiNEREY7 IH0KCgkuZmllbGRzZXQgewoJCWJvcmRlci1zdHlsZTpncm9vdmU7IGJvcmRlci1jb2xvcjp0aHJl ZWRmYWNlOyAvKiBhY2NvcmRpbmcgdG8gdGhlIHdlYiBpbnNwZWN0b3IgKi8KCQlwb3NpdGlvbjpy ZWxhdGl2ZTsKCQkgLyogbWFyZ2luLXRvcCA9IGxpbmUtaGVpZ2h0LzIgLSBib3JkZXItd2lkdGgv MiAqLwoJCW1hcmdpbjo4cHggMnB4IDA7CgkJLyogcGFkZGluZy10b3AgPQoJCSAgICAgbGluZS1o ZWlnaHQvMgoJCSAgICAgKyBub3JtYWwgZmllbGRzZXQgcGFkZGluZyAoLjM1ZW0gYWNjb3JkaW5n IHRvIHRoZSB3ZWIgaW5zcGVjdG9yLCBvciApCgkJICAgICAtIGJvcmRlci13aWR0aC8yICAqLwoJ CXBhZGRpbmc6MTNweCAwLjc1ZW0gMC42MjVlbTsKCX0KCS5ib3JkZXJNYXNrIHsKCQlwb3NpdGlv bjphYnNvbHV0ZTsgdG9wOi0ycHg7IC8qIHRvcCA9IC0oYm9yZGVyLXdpZHRoKSAqLwoJCXBhZGRp bmc6MCAycHg7IGhlaWdodDoycHg7IC8qIGhlaWdodCA9IGJvcmRlci13aWR0aCAqLwoJCWNvbG9y OnRyYW5zcGFyZW50OwoJfQoJLmxlZ2VuZCB7CgkJcG9zaXRpb246cmVsYXRpdmU7CgkJdG9wOi04 cHg7IC8qID0gbGluZS1oZWlnaHQvMiAtIGJvcmRlci13aWR0aC8yICovCgkJY29sb3I6YmxhY2s7 Cgl9CiA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5Pgo8aDE+TWFnaWNhbCBGaWVsZHNldCBMZWdlbmQg U3R5bGluZzwvaDE+Cgo8aDI+RXhhbXBsZSBhbmQgIkVxdWl2YWxlbnQiIENTUyBNb2RlbDwvaDI+ CjxkaXYgaWQ9ImZpZWxkc2V0Ij4KCTxkaXYgY2xhc3M9ImJvcmRlckxpbmUiPnVzaW5nIGZpZWxk c2V0ICsgbGVnZW5kPC9kaXY+Cgk8ZmllbGRzZXQ+CgkJPGxlZ2VuZD5MZWdlbmQ8L2xlZ2VuZD4K CQk8c3Bhbj5jb250ZW50PC9zcGFuPgoJPC9maWVsZHNldD4KPC9kaXY+CjxkaXYgaWQ9ImRpdnMi PgoJPGRpdiBjbGFzcz0iYm9yZGVyTGluZSI+dXNpbmcgZGl2cyArIENTUzwvZGl2PgoJPGRpdiBj bGFzcz0iZmllbGRzZXQiPgoJCTxkaXYgY2xhc3M9ImJvcmRlck1hc2siPjxkaXYgY2xhc3M9Imxl Z2VuZCI+TGVnZW5kPC9kaXY+PC9kaXY+CgkJPHNwYW4+Y29udGVudDwvc3Bhbj4KCTwvZGl2Pgo8 L2Rpdj4KCjxoMj5WaXN1YWwgQXNwZWN0cyBvZiB0aGUgRmllbGRzZXQvTGVnZW5kIE1vZGVsbGVk PC9oMj4KPG9sPgoJPGxpPkxlZ2VuZCBpcyByZW1vdmVkIGZyb20gdGhlIGZpZWxkc2V0J3MgZmxv dyBjb250ZXh0LCBhbmQgcG9zaXRpb25lZCBvdmVyIHRoZSBmaWVsZHNldCBib3JkZXI8L2xpPgoJ PGxpPlRvcCBvdXRlciBib3JkZXIgZWRnZSBvZiB0aGUgbGVnZW5kID0gdG9wICJvdXRlciBib3Jk ZXIgZWRnZSIgKHdoZXJlIG1hcmdpbnMgc3RhcnQpIG9mIHRoZSBmaWVsZHNldDwvbGk+Cgk8bGk+ VG9wIGJvcmRlciAoPGVtPm5vdCBlZGdlPC9lbT4pIG9mIHRoZSBmaWVsZHNldCBpcyB2ZXJ0aWNh bGx5IGFsaWduZWQgd2l0aCB0aGUgbGVnZW5kJ3MgYm9yZGVyIGJveDwvbGk+Cgk8bGk+RmllbGRz ZXQgYm9yZGVyIGlzIHRyYW5zcGFyZW50IHVuZGVybmVhdGggdGhlIGxlZ2VuZCdzIGJvcmRlciBi b3g8L2xpPgoJPGxpPk91dGVyIHBhZGRpbmcgZWRnZSBvZiB0aGUgZmllbGRzZXQgPSBvdXRlciBi b3R0b20gYm9yZGVyIGVkZ2Ugb2YgdGhlIGxlZ2VuZDwvbGk+Cgk8bGk+RmllbGRzZXQgaGFzIGRl ZmF1bHQgc3R5bGUgPGNvZGU+bWFyZ2luOjAgMnB4OyBwYWRkaW5nOjAuMzVlbSAwLjc1ZW0gMC42 MjVlbTsgYm9yZGVyOjJweCBncm9vdmUgdGhyZWVkZmFjZTs8L2NvZGU+ICg8ZW0+YWRqdXN0ZWQg YWNjb3JkaW5nIHRvIGFib3ZlPC9lbT4pPC9saT4KCTxsaT5MZWdlbmQgaGFzIGRlZmF1bHQgc3R5 bGUgPGNvZGU+cGFkZGluZzoycHggMDs8L2NvZGU+PC9saT4KPC9vbD4KPHA+QWNjb3JkaW5nIHRv IFdlYmtpdCdzIHdlYiBpbnNwZWN0b3IsIHRoZXJlIGFyZSBubyBDU1MgYXR0cmlidXRlcyBvbiB0 aGUgZmllbGRzZXQvbGVnZW5kIHRoYXQgY2F1c2UgYXNwZWN0cyAxIHRocm91Z2ggNSAuPC9wPgoK PGgyPk5vdGVzPC9oMj4KPG9sPgoJPGxpPlJlYWQgdGhlIGNvbW1lbnRzIGluIHRoZSBDU1MgZm9y IG1hcmdpbi9wYWRkaW5nL3Bvc2l0aW9uIGZvcm11bGFzLjwvbGk+Cgk8bGk+RHVlIHRvIHJvdW5k aW5nIGVycm9ycyB3aGVuIGNvbnZlcnRpbmcgdG8gcGl4ZWwgdmFsdWVzLCBpdCBpcyBub3QgcG9z c2libGUgdG8gdXNlIHJlbGF0aXZlLXdpZHRocyB0byBjcmVhdGUgdGhlIENTUyBtb2RlbC48L2xp PgoJPGxpPlRoZSByZWFsIGxlZ2VuZCBoYXMgaXRzIGZ1bGwgPHZhcj5ib3ggaGVpZ2h0PC92YXI+ IGNlbnRyZWQgb24gdGhlIGZpZWxkc2V0IGJvcmRlciBpbiBvcmRlciB0byBhcHByb3ByaWF0ZWx5 IGhhbmRsZSBjb250ZW50IHdpdGggbXVsdGlwbGUgbGluZXMuIEV4YW1wbGU6Cgk8ZmllbGRzZXQg c3R5bGU9IndpZHRoOjEwZW07Ij48bGVnZW5kPk11bHRpLTxicj5saW5lPGJyPmxlZ2VuZDwvbGVn ZW5kPjxzcGFuPmNvbnRlbnQ8L3NwYW4+PC9maWVsZHNldD4KCVRoaXMgZWZmZWN0IGlzIG5vdCBw b3NzaWJsZSB3aXRoIENTUyB3aXRob3V0IGtub3dpbmcgdGhlIDx2YXI+Ym94IGhlaWdodDwvdmFy PiBhIHByaW9yaS4gVGhlIENTUyBtb2RlbCBnaXZlbiBhc3N1bWVzIHRoYXQgdGhlIGxlZ2VuZCB3 aWxsIGFsd2F5cyBiZSBvbmUgbGluZSwgaW4gd2hpY2ggY2FzZSB0aGUgPHZhcj5ib3ggaGVpZ2h0 PC92YXI+IGlzIHRoZSBzYW1lIGFzIHRoZSA8dmFyPmxpbmUtaGVpZ2h0PC92YXI+LjwvbGk+Cgk8 bGk+QSBjb21iaW5hdGlvbiBvZiB0aGUgQ1NTIGNhbGMoKSBhbmQgYXR0cigpIGZ1bmN0aW9ucyBj b3VsZCBzb2x2ZSB0aGUgYWJvdmUgdHdvIHByb2JsZW1zLCBhc3N1bWluZyBhdHRyKCkgcmV0dXJu cyBwb3N0LXJvdW5kaW5nIHBpeGVsIHZhbHVlcy48L2xpPgoJPGxpPlRvIG15IGtub3dsZWRnZSwg dGhlcmUgaXMgY3VycmVudGx5IChOb3YsIDIwMDkpIG5vIHN1cHBvcnQgb3IgcHJvcG9zZWQgZXh0 ZW5zaW9ucyBpbiBDU1MgZm9yIHByb2R1Y2luZyB0aGUgbWFza2VkLWJvcmRlciBlZmZlY3Qgd2l0 aG91dCB1c2luZyBhbiBhZGRpdGlvbmFsIG1hc2tpbmcgZWxlbWVudCBhbmQgaGF2aW5nIGEgcHJl LWRldGVybWluZWQgYmFja2dyb3VuZC48L2xpPgo8L29sPgo8L2JvZHk+CjwvaHRtbD4K