Closed Bug 283486 Opened 19 years ago Closed 12 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)

Product:
Core
Component:
Layout: Form Controls
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 354502

People

(Reporter: ad, Unassigned)

Details

Attachments

(1 file, 1 obsolete file)

testcase
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.
Attached file testcase (obsolete) — 

    
    

    
  

      
      
      
      

        Attached file
          
        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).

    
    

    
  
(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.

    
    

    
  
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

    
    

    
  
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
Closed: 12 years ago
Resolution: --- → DUPLICATE

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: