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.