"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

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

Prevent the ability to add options dynamically to a drop-down select list

I have implemented a dynamic data retrieval feature from my database using jQuery's .getJSON function and appended the data to an HTML select drop-down list. The JavaScript code for this functionality is as follows: $.getJSON('url', f ...

javascriptjqueryhtml

Whenever I create a new JavaScript application, the CSS files do not seem to reflect the most recent changes

My Next.js App is running smoothly on my client when I do npm run build and test it with node server js. However, the issue arises when I move the app to a production server. After executing npm run build on the server, everything seems to work fine except ...

cssnode.jsnext.js

Microsoft Edge browser incorrectly calculates range.endOffset value

This particular problem is specific to the Microsoft Edge browser. I am attempting to apply a CSS style to a selected word using Range API's, but I am encountering an issue with the range.endOffset functionality in Edge. Below is the code snippet I am ...

javascripthtmlrangemicrosoft-edge

Having trouble creating multiple PDFs with mPDF without having to store them on the server

I am creating several PDF files in a loop using the mPDF library. Here is a snippet of my code: for($i=0;$i<=3;$i++) { $mpdf = new mPDF(); $stylesheet = file_get_contents('style.css'); $mpdf->WriteHTML($stylesheet,1); $mpd ...

phphtmlmpdf

HTML5 Division Element Dimensions

I am currently modifying an HTML5 template. The default Bootstrap parameters were set as: col-sm-12 col-md-4 col-lg-4 col-sm-12 col-md-8 col-lg-8 This configuration allotted 20% of the screen width to text and 80% to images, but I want it reversed. Tex ...

csshtmltwitter-bootstrap-3

The margin in the DIV is not aligning correctly with the specified requirements

I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS. <div id="main"> <div id="internal"> hello </div> < ...

htmlcss

Prevent Image Distortion in HTML and CSS

Is there a way to prevent a background image from stretching in html/css? Take a look at the current code below, where the image behind a button appears like this: #backImage6{ /*@editable*/background-image:url(https://images.unsplash.com/phot ...

htmlcss

Is Angular causing the issue with Datalist not functioning in IE9?

Autocomplete feature using datalist in Angular works perfectly on all browsers except IE9. I even tried the following workaround: <datalist id="associates"> <!--[if IE 9]><select disabled style="display:none"><![endif]--> <o ...

angularjshtml

I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

javascriptcssajax

Angular 12 experiencing CSS alignment issues

In my Angular component, I have the following CSS: .folders { border-left: 5px solid #b8744f; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; /*CORRECTION NEEDED ...

cssangular

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

When viewing HTML "Div" on smaller screens, the full height may not be displayed properly

My setup includes two monitors: one is 24" and the other is my laptop's 12.5" screen. I have a red box (div) in my web application that displays full height on the larger monitor, but only partially on the smaller one. I'm puzzled as to why it s ...

htmlcss

The foundation grid system is experiencing difficulties when implemented on an Angular form

After successfully installing Foundation 6 on my Angular project, I am facing an issue with the grid system not working properly. Despite numerous attempts to troubleshoot and debug, I have not been able to resolve this issue. If anyone has any insights or ...

cssangularzurb-foundationzurb-foundation-6

The timer freezes briefly at 1:60 before switching to 1:01

I'm in the process of creating a website for Rubik's cube scrambling and timing, and everything seems to be working well so far. I have implemented a scrambler, a timer, and a list of recorded times (still a work in progress). The timer is functi ...

javascripthtml

Single-line form with labels positioned above the input fields

For my web app project, I am using AngularJS and Bootstrap 3 for CSS (although my CSS knowledge is limited). I am trying to design an inline form with 5 input fields and labels positioned on top of them. The first field should take up more space than the o ...

htmlcssangularjsformstwitter-bootstrap-3

How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form. The challenge I am facing involves sliding up and down various divs with the same class name but different contents. To demonstrate this issue, I have prepared a sample in JSFiddle: http:// ...

jquerycss

Display user input within a modal dialogue box

I have a subscription form that requires users to enter their name and email address. After clicking on "Compete Now," a pop-up appears asking for workshop information and postal code. The form is functioning correctly as intended. However, I want the em ...

javascripthtmlcsstwitter-bootstrap

Having trouble loading Firefox Add-ons with Python Selenium

When running the selenium webdriver, I am encountering an issue with loading Zenmate Firefox Addons. The code runs smoothly without any addons/extensions, but fails to run when any addon is added. Here is my code snippet: def __init__(self): s ...

pythonfirefoxseleniumfirefox-addon

Can you provide a solution in C# for traversing through article elements within the HTML of a website?

I need assistance with iterating through elements on a webpage that are all categorized under the html <article> tag. How can I achieve this? <article> <div class="inner-article"> <a style="height:150px;" href="/shop/jackets/v87vh6 ...

c#htmlseleniumselenium-webdriver