Theming an MVC3 ActionLink so that all links have a consistent width - css

Question

We are using posts and gets, which out-of-the box appear as links (gets) and buttons (posts). In an effort to provide a pleasant and consistent look to the UI, we have button themed all UI click interactions to look the same using css:
.minimal
{
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font: bold 12px "helvetica neue" , helvetica, arial, sans-serif;
padding: 5px 20px 5px 20px;
text-align: center;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
}
.minimal:hover
{
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
.minimal:active
{
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}
...and used this way:
#Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new {#class = "minimal"})
<input type="submit" class = "minimal" value="submit" />
The problem is with the padding statement in .minimal, it seems that depending on the length of text contained in the ActionLink you will get a longer or shorter button. I would use the 'width' tag but in only has effect on the posts... not on the ActionLinks. Has anyone successfully addressed this issue?

Answer 1

width only works on block elements. Try to add this:
a.minimal {
display: inline-block;
padding: 5px 0;
width: 198px; /* subtract border */
}
and add width to .minimal:
width: 200px;
(or style for links in general and treat the submit button in a special way)
For better cross-browser compatibility you might also need to do some trickery according to this (old) article:
a.minimal {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
padding: 5px 0;
width: 198px; /* subtract border */
}
You need to try what works for your target browsers. I tried the first (simpler) solution and it works on all current browsers and IE7 + IE8.