Link Width in FireFox @lt;a href width

How do you set the link width in FireFox? Adding a width attribute to an “a” tag does not work. All that you should have to do is add the width and “display: inline-block” to the “a” tag’s style attribute like so. (But this isn’t going to work)
<a href=”http://www.google.com” style =”width: 200px; display:inline-block”>Google</a>

This does work for Internet Explorer (IE) and should work for FireFox but does not. What you have do to is add an undocumented attribute called “-moz-inline-block” in addition to the normal “inline-block”. Therefore you need this.
<a href=”http://www.google.com” style =”width: 200px; display:inline-block; display:-moz-inline-block”>Google</a>

This is just one of many hang-ups that web developers need to face. Hopefully having 2 real viable choices (IE and FireFox) will force them to be closer to real standards.

0 thoughts on “Link Width in FireFox @lt;a href width”

  1. Hey I found you while doing a search for “link width firefox”. I have just wrestled with the same problem, setting the width property on a link tag in FF. Here’s how I got it to work on a document with no doc type….

    a.navLink{ float: left; font: 15pt/22pt arial; font-weight: bold; margin: 0px 0px 0px 8px; width: 130px; border: 1px solid #768193; background-color: #FFFFFF; text-align: center; text-decoration: none; }
    a.navLink:visited{ text-decoration: none; }
    a.navLink:active{ text-decoration: none; }

    Using the float property seems to achieve the display: block effect you’re looking for. Without the float: left, the links’ widths are defined by the length of the text. With the float, they obey your defined width value.

Leave a Reply

Your email address will not be published. Required fields are marked *


two × 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>