"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand

An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox:

fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}
<fieldset>
  <legend>Legend</legend>
</fieldset>

Outcome in Chrome

Outcome in Firefox

Potential Fixes Alternative Solutions

Various suggestions have been put forward, however, none have provided a satisfactory resolution:

/* intended styling */
fieldset>legend {
    display: table;
    float: none;
    margin: 0 auto;
}

<fieldset.absolute-fix {
    position: relative;
}
fieldset.absolute-fix>legend {
    position: absolute;
    left: 50%;
}

<fieldset.margin-fix>legend {
    margin-left: 50%;
    margin-right: 50%;
    width: auto;
    transform: translate(-50%, 0)
}

<fieldset.width-fix>legend {
    width: 100%;
    text-align: center;
}
<fieldset class="absolute-fix">
    <legend>Fix with absolute</legend>
    <p>Not centered and inconsistent styling</p>
    <a href="http://stackoverflow.com/a/4006871/1185053">Source</a>
</fieldset>

<fieldset class="attribute-fix">
    <legend align="center">Fix with attribute</legend>
    <p>Requires use of deprecated HTML and strongly ties presentation to content.</p>
    <a href="http://stackoverflow.com/a/19969606/1185053">Source</a>
</fieldset>

<fieldset class="margin-fix">
    <legend>Fix with margin</legend>
    <p>This is unsatisfactory because there is a misaligned gap in the border and long legends go over several lines.</p>
</fieldset>

<fieldset class="width-fix">
    <legend>Fix with width</legend>
    <p>This is unsatisfactory because there is a significant gap in the border.</p>
</fieldset>

Inquiry

Is there a method to consistently center legend in Firefox while preserving styling for other browsers?

htmlcssfirefox

Answer №1

This solution utilizes a specific selector for Firefox, eliminating the need to adjust styling for other browsers. It incorporates absolute positioning while making use of the transform property for precise centering.

/* intended styling for other browsers */
fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}

/* FF only */
@media screen and (-moz-images-in-menus: 0) {
  fieldset {
    position: relative;
  }
  fieldset>legend {
    position: absolute;
    left: 50%;
    top: -12px; /* depends on font size and border */
    background: white; /* depends on background */
    transform: translate(-50%, 0);
  }
}
<fieldset>
  <legend>Fix using absolute and transform</legend>
  <p>This seems to work a bit better.</p>
</fieldset>

Result in Chrome

Result in Firefox

Answer №2

In the year 2023, it's disappointing that Firefox still hasn't resolved this issue. (Such a shame)

Here's a simpler solution that worked for me, compared to other suggestions.

If you're looking for full flexibility in positioning the legend tag, using absolute positioning is effective. However, in my scenario, I simply needed the legend to be on the right side of the fieldset. Here's what I did:

.firefox-legend-fix {
  legend {
    margin-left: auto;
  }
}

Although this may not directly address the original question, since this was the top result on Google, I wanted to assist others facing challenges with aligning the legend tag in Firefox.

To center it, you can use margin-inline: auto;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble inserting an image using Vue?

I am having trouble understanding why only the first image loads, while the others do not. 1. <img :src="require('../assets/batatas.jpg')" :alt="item.title" /> 2. <img :src="'../assets/batatas.jpg'" ...

javascripthtmlvue.jsvuejs3

Enhance phonegap functionality by incorporating jQuery autocomplete for extensive result sets

I am looking to implement autocomplete functionality for an input field in my phonegap app. My plan is to utilize the autocomplete widget provided by jQuery and have it search for strings based on queries from a SQLite database installed on my tablet. $(" ...

jqueryhtmlsqlitecordovaautocomplete

TemplateUrl malfunctioning

While experimenting with basic Angular code, I encountered an issue where everything was functioning correctly when using template, but not when switching to templateUrl. I did not provide the previous code as it was working fine except for this specific c ...

javascripthtmlangularjs

Applying a CSS class to a newly generated row with JavaScript

I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...

javascripthtmlcss

Ways to center elements horizontally without relying on Flexbox layout?

Is there a way to arrange the web elements side by side without relying on Flexbox? Although an effective tool, Flexbox does not function properly with IE 9 or 10. I am aiming for the text inside the link to be displayed immediately next to the images. The ...

htmlcsscross-browserinternet-explorer-9internet-explorer-10

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...

htmlcsscss-position

Is there a method to identify if the dark theme is enabled in iBooks while working within an EPUB file?

Is there a specific code or feature that iBooks uses to enable the customization of certain sections within the book, such as changing to lighter colors when night mode is on? ...

htmlpublishingepubibooks

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

javascripthtmlcssmenusticky

Ways to implement collapsible functionality into table rows

I have a table on my website and I want to initially display only 3 rows. When the user clicks on the 'more' button, I want the rest of the rows to be displayed. However, when I tried implementing this with code, I encountered rendering issues. I ...

javascriptjqueryhtml

The fixed background-attachment feature does not function properly in Chrome when it is contained within a scrolling div

Essentially, if a background image is placed within a scrolling div, it will no longer remain fixed and will revert back to scrolling: CSS: <div class="wrapper"> <span></span> </div> HTML: html, body{ width: 100%; height: ...

cssgoogle-chromebackground-imagebackground-position

Adjusting background size using jQuery as the window is resized

Exploring ways to dynamically resize the background image of my website based on the current window dimensions using jQuery. At the moment, I have tried the following approach: $(window).resize(function() { $("body").css({"background ...

javascriptjqueryhtmlcssresize

Assigning a height of 100% to a div element results in the appearance of

In a div within the body, there are only 3 lines of text. The background color was only filling up to those 3 lines of text. To make the color fill up the entire vertical space of the browser, I adjusted the CSS height properties of html & body to be ...

htmlcss

Discovering elements using Selenium in a JavaScript popup box

The issue at hand is rather straightforward. I am faced with the task of clicking on an element within a popup that has been dynamically generated by JavaScript code. The challenge arises as the page is solely accessible in Internet Explorer and the elemen ...

javascripthtmlseleniumxpath

I'm curious if there is a contemporary alternative to "Deep Zoom Composer" in Silverlight that enables the creation of panoramic images by stitching multiple images together

There was a time when Silverlight offered a feature known as "deep zoom", which cleverly adjusted bandwidth usage as the user zoomed in and out. Recently, I discovered a unique application for this technology - by incorporating images taken from a hot air ...

c#htmlxamarinpanoramasdeepzoom

How can Angular be used for live search to provide precise search results even when the server does not return data in the expected sequence?

Currently, I am in the process of constructing a website for one of my clients. The search page on the site is designed to update search results as you type in the search bar - with each keystroke triggering a new search request. However, there's an i ...

javascriptangularjsajaxhtmlasp.net-ajax

Enhance PHP search functionality by showcasing hidden auto-complete suggestions in real-time

I am attempting to showcase unlisted search results that can be clicked on to redirect the user to a specific HTML page based on data retrieved from a MySQL database. My development environment is PhoneGap. Thus far, I have successfully set up a basic PH ...

javascriptphpjqueryhtmlcordova

Clicking on React Js reverses an array that had previously been unreversed

My issue involves an array pulled from a database that I have reversed so that the newest entry is displayed at the top when a button is clicked, opening a modal-style window. However, when the array is displayed in the modal window, it appears to be flipp ...

javascripthtmlarraysreactjsjsx

Adjust the dimensions of the thead, tbody, and td elements on the fly

I've implemented this property in a .css file on the table shown below and there are 9 records. .fixed tbody td, thead th { width: 5.2%; float: left; } In my scenario, when there are 4 columns, the width should be 23.2%; for 5 columns ...

javascriptjquerycss

Having Difficulty Positioning Tooltip Beside Input/Label Field

I have created a tooltip using HTML and CSS that appears when hovering over an image. However, I am encountering alignment issues when placing the image next to a textbox/input as it is not inline with the input box, likely due to some absolute positioning ...

jqueryhtmlcss

Is there a way to validate form elements in HTML prior to submitting the form?

In my form, I am utilizing PHP for validation and processing, but I am interested in verifying elements as they are being filled out. Is there a way to check the current value of an element before the form is submitted? ...

javascripthtmlvalidation