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

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?

Andre Loker · Accepted Answer · 2012-02-29T13:52:23.467

2

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.

edited Feb 29 '12 at 13:52

answered Feb 29 '12 at 13:46

Andre Loker

8,368
1
23
36

Setting display: inline-block; was the key. Thanks for this, all works. – Geoff Feb 29 '12 at 14:02
@Geoff - Note: inline-block doesn't work in IE7, if it matters. – Erik Funkenbusch Feb 29 '12 at 15:38
@MystereMan It works when I put IE 9 into IE7 mode, but I don't have a real IE7 here. This is an interesting read, though: http://www.brunildo.org/test/InlineBlockLayout.html – Andre Loker Feb 29 '12 at 15:48
The target browser is IE9. Works well enough in that, and that is my primary concern. Thanks to all for the comments. – Geoff Mar 01 '12 at 11:50

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

1 Answers1