All users were logged out of Bugzilla on October 13th, 2018

A long legend in a left float fieldset of fixed width increases the fieldset width almost uncontrollably

RESOLVED DUPLICATE of bug 354502

Status

()

RESOLVED DUPLICATE of bug 354502
14 years ago
7 years ago

People

(Reporter: ad, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

1.69 KB, text/html
Details
(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8a6) Gecko/20050109
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b2) Gecko/20050223 Firefox/1.0+

In the draft test cases below, the widths of the fieldsets should be unaffected
by the widths of their legends. In FF and Mozilla, they are pushed out when the
legends are wide.

Explicit breaks inside FF and Moz legends (not shown in the test cases) are
handled sensibly, vertically centring multi-line legends on the fieldset
boundary. This implies that allowing the legend to be styled with white-space
normal would be straightforward and would not cause problems. In combination
with the partial solution below (less the extra HTML), that should solve 80% of
the problem. 

The only workaround I have found is to:
- set the display of the legend to block (which does not act normally),
- set its max-width to the width of the fieldset and
- make the fieldset or a wrapper around it hide the overflow.
This only works properly for legend max-width equal to the fieldset width.
Smaller max-widths leave a trail of legend text on a transparent background
right of the proper limit.

In the draft test case, I have been forced - by the impossibility of styling a
legend in CSS - to curry the exemplar code. Even curried, it does not vertically
center multi-line legends.

Please excuse the lurid colours. I am old and my eyes are dim.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Draft test case for legend expanding fieldset</title>
<style type="text/css">
fieldset,div,legend,span.legend{
margin:0;
padding:0;
border:0;
}
fieldset,div{
display:block;
position: relative;
float: left;
}
fieldset,div.fieldset{
width:6em;
background:red;
padding-left: 1em;
}
div.container{
width: 7em;
padding: 1em;
background:cyan;
}
h2,h3,div.clearleft {
clear: left;
}
legend,span.legend{
background:lime;
}
span.legend{
position:relative;
float:left;
left:0;
top:-0.5em;
margin-bottom:-0.5em;
white-space:nowrap;
}
form.wrap legend, form.wrap span.legend{
white-space:normal;
}
</style>
<h1>Draft test case for legend expanding fieldset</h1>
<h2>white-space: nowrap</h2>
<h3>current results</h3>
<div class="container">
<form action="" method="get">
<fieldset>
<legend>LONG LEGEND</legend>
<div class="clearleft">FIELDSET</div>

</fieldset>
</form>
CONTAINER
</div>
<h3>expected results</h3>
<div class="container">
<form action="" method="get">
<div class="fieldset">
<span class="legend">LONG LEGEND</span>
<div class="clearleft">FIELDSET</div>
</div>
</form>
CONTAINER
</div>

<h2>white-space: normal</h2>
<h3>current results</h3>
<div class="container">
<form class="wrap" action="" method="get">
<fieldset>
<legend>LONG LEGEND</legend>
<div class="clearleft">FIELDSET</div>
</fieldset>
</form>
CONTAINER
</div>
<h3>expected results</h3>

<div class="container">
<form class="wrap" action="" method="get">
<div class="fieldset">
<span class="legend">LONG LEGEND</span>
<div class="clearleft">FIELDSET</div>
</div>
</form>
CONTAINER
</div>

Reproducible: Always

Steps to Reproduce:
1. Paste the examples into a formerly empty HTML page.
2. View the examples through a Gecko rendering browser.
3. Observe the differences in alignment between actual and exemplar right edges.

Actual Results:  
You see the actual right edges are pushed right of the exemplar edges by the
excessively wide legend text.

Expected Results:  
In the upper example it should have allowed the legend to extend beyond the
width of the fieldset, displaying the overflow as illustrated.

In the lower example, it should have wrapped the legend text within the width of
the fieldset, displaying it on a subsequent line, as illustrated.

This is really the combination of two bugs (261037 and one related to 205574 and
269908). Solving either one would make the problem mabageable. Not solving
either leaves Gecko looking poorer than it deserves. The suggested workaround
for 261037 seems ineffective in this case.

Comment 1

14 years ago
Created attachment 175476 [details]
testcase

Comment 2

14 years ago
Created attachment 175477 [details]
testcase
Attachment #175476 - Attachment is obsolete: true
Note that fieldset and legend are replaced elements in Mozilla, since their
default rendering cannot be described by CSS...  So there's a number of ways in
which they don't behave like CSS boxes (since they aren't CSS boxes).
(Reporter)

Comment 4

14 years ago
(In reply to comment #3)
> Note that fieldset and legend are replaced elements in Mozilla, since their
> default rendering cannot be described by CSS...  So there's a number of ways in
> which they don't behave like CSS boxes (since they aren't CSS boxes).

Thanks for the clarification. Does this mean my inference that allowing CSS to
enable text wrapping via {white-space: normal;} is incorrect? If so, it might be
better just to default legends to wrap, as Safari 1.2.4 (and - I presume -
Konqueror) does, but IE6 does not.

Comment 5

13 years ago
Just come up against this. It'd be nice if legends wrapped but I think we're
going to try and reduce the content instead. For what it's worth, there's a post
on WebAIM that lists which browsers wrap and which don't; there doesn't seem
like any clear consensus.

http://www.webaim.org/discussion/mail_message.php?id=6765

Wrap:
Opera (Mac only?), Safari, IE5/mac

Don't wrap:
Gecko browsers, IE/win

Comment 6

9 years ago
Fixed? The attached testcase is WFM in Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2) Gecko/20100115 Firefox/3.6
Yep, long since fixed.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 354502
You need to log in before you can comment on or make changes to this bug.