Text-Align Fix for Firefox

If you’ve got a text-align attribute in your CSS and all looks well in Internet Explorer but not in Firefox, there’s a simple (though non-sensical) fix.  It seems that Firefox doesn’t honor the text-align attribute all the time, but there’s a Mozilla-specific tag which will force it to play nicely:

.ms-banner {
 text-align:right;
}
.ms-banner {
 text-align: -moz-right;  /* Fix for Mozilla Firefox */
}

The CSS above will right-justify the top nav tabs in SharePoint.

The corresponding tags for center and left are, as you might expect:

text-align: -moz-center;
text-align: -moz-left;

I know that everyone loves to disparage Internet Explorer as standards non-compliant, etc., but this certainly seems like an example of Firefox going out on its own as well.

4 Comments

  1. A thousand thanks for this fix.

    I had been trying for days to right-align a signature below a text-justifed paragraph (like a signature at the end of a letter). Everthing worked in Internet Explorer but not in Firefox.Then, along the lines of what you proposed, I added this to my CSS:

    . firefox-align-right-fix {
    text-align:right;
    }

    .firefox-align-right-fix {
    text-align: -moz-right; /* Fix for Mozilla Firefox */
    }

    Then to the div tag in my html, ahead of the signature to be right-aligned, I added this:

    class=”firefox-align-right-fix” style=”text-align:right;”

    I’m just a novice but this seems to work perfectly. It tests with no errors in http://www.browsera.com and in the Total Validator tool.

    Reply

Have a thought or opinion?