Closed
Bug 283486
Opened 20 years ago
Closed 13 years ago
A long legend in a left float fieldset of fixed width increases the fieldset width almost uncontrollably
Categories
(Core :: Layout: Form Controls, defect)
Core
Layout: Form Controls
Tracking
()
RESOLVED
DUPLICATE
of bug 354502
People
(Reporter: ad, Unassigned)
Details
Attachments
(1 file, 1 obsolete file)
|
1.69 KB,
text/html
|
Details |
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.
Attachment #175476 -
Attachment is obsolete: true
|
||
Comment 3•20 years ago
|
||
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•20 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•20 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•15 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
|
|
||
Comment 7•13 years ago
|
||
Yep, long since fixed.
Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•