Open Bug 315474 Opened 19 years ago Updated 2 years ago

<legend> repositioned vertically within <fieldset> when alternate stylesheets selected

Categories

(Core :: Layout, defect)

x86
Windows XP
defect

Tracking

()

UNCONFIRMED

People

(Reporter: js_greenwood, Unassigned)

References

Details

(Keywords: testcase)

Attachments

(3 files)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7

By default, the <legend> element appears at the top left of a containing <fieldset>.  If you apply a standard stylesheet declaration:
  <link rel="stylesheet" type="text/css" href="..." title="Default CSS" />)

This works fine (well, apart from the myriad of known issues with legends and fieldsets not being styleable correctly with CSS - please sort these - it's really affecting usability!)

However, if you add an alternate stylesheet:
  <link rel="alternate stylesheet" type="text/css" href="..." title="Another CSS" />

And it has any absolute positioning of the legend, the legend is moved vertically down the page when switching to the alternate CSS from the View | Page Style menu option.  Creating two stylesheets (a default and an alternative) both with the sole contents of:
  legend { position: absolute; left: 0px; }

Will demonstrate the issue.  Switching back to the default CSS file does not resolve the issue.  Hitting refresh does (but this always reloads the page back with the default CSS).

*** Please don't fix this issue by removing absolute positioning using some nasty "!important" hack in the embedded resources.  Firefox's fieldset/legend support is woefully lacking as it is; this is the only way there currently is of  getting reasonably control back of how/where the legend's rendered. ***

Reproducible: Always

Steps to Reproduce:
1. Create an HTML file with the contents:
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="default.css" title="Default CSS" />
    <link rel="alternate stylesheet" type="text/css" href="alt.css" title="Alt CSS" />
  </head>
  <body>
    <fieldset>
      <legend>Test</legend>
      ...
    </fieldset>
  </body>
</html>

2. Create a "default.css" and "alt.css" files with the contents:
legend { position: absolute; left: 0px; }

3. Open up the HTML file in Firefox.
4.Selecte "View | Page Style | Alt" from the menu
Actual Results:  
The <legend> is rendered part way down the fieldset, with other inappropriate rendering artefacts

Expected Results:  
The <legend> should be rendered at the top of the fieldset, as per the original view.

As above: PLEASE DON'T FIX THIS ISSUE BY REMOVING ABSOLUTE POSITIONING USING SOME NASTY "!IMPORTANT" HACK IN THE EMBEDDED RESOURCES.
Attached file alt.css
Attached file default.css
Attached file testcase
Works for me with Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8) Gecko/20051107 Firefox/1.5

Can you try with Firefox 1.5 RC1?
Digging a bit, it seems they did add a position = static !important.  See bug 263406.
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
Having tested against Firefox 1.5 RC1, it appears the bug as described has been resolved.  HOWEVER, this appears to have been done using a "position: static !important" declaration, as warned about.  Hence the bug isn't so much resolved (or not testably), it's just not reproducible due to the removal of functionality.

I'd strongly suggest not having this !important declaration in 1.5; it'll break many, many sites (including that of the world's leading Internet bank).  Treatment of legends as standard elements, with a default styling of the when within a fieldset of approx 16px left margin and approx -16px top margin would seem a bit more appropriate as a really simple model.  Or, preferably, having the standard group-box style behaviour discarded when float/position/etc. CSS attributes are set (hence keeping the vertical middle-alignment when the fonts shrink/grow).

Either way, the current !important declaration is a major step backwards, moving out of alignment with both Opera and IE (not in a good way!), and creating a far bigger problem than the one solved.
NOTE: After additional testing, adding a "display: block" declaration appears to retrieve a little of the functionality lost in 1.5 RC1 (i.e. the ability to set a width on the legend - typically equal to that of the fieldset).  This only works using absolute sizes (e.g. not "100%"), and only using the "min-width" attribute, not "width".

With such tweaks/hacks in place, pages still render without the graphical glitches present in earlier releases.  Styling of the element is still overly restrictive, however, and will require re-working of sites for the cases where a work-around is possible, and leaves several situations where it's not possible to achieve the layout previously possible.
Keywords: testcase
Depends on: 340063
No longer depends on: 340063
Depends on: 269908
I can't reproduce the original bug, and we've enabled position: absolute on legends, can we mark this bug resolved?
This should not yet be closed. Absolute positioning of legends does not appear to take them out out of the normal flow of the document. So if top padding is added to the fieldset (to prevent the absolutely positioned legend from obscuring form elements), the legend gets pushed down.
I think what you are describing is bug 450418.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: