fieldset legend text-align right bug in firefox

css firefox fieldset
corroded picture corroded · May 4, 2011 · Viewed 7.2k times · Source

is there a way to align a fieldset legend in firefox to the right? I thought it was just my styles but apparently even with an example online the FF fieldset ignores the text-align: right:

http://www.quackit.com/html/tags/html_fieldset_tag.cfm (works in chrome)

Answer

Boris Zbarsky picture Boris Zbarsky · May 4, 2011

There's no obvious way to do this in CSS (and in particular, CSS can't really describe legend/fieldset styling at all, so the fact that any of it works is a miracle), but <legend> has an attribute named align that you can set to right like so:

<fieldset>
  <legend align="right">My stuff</legend>
</fieldset>

to get the behavior you want in Firefox. I'm surprised some people are seeing it aligned right on that testcase; there are no provisions for aligning a legend right in Gecko except for that align attribute and direction: rtl fieldsets.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Targeting only Firefox with CSS

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: <!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be …

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More