Question

I have an MVC application which requires nice rounded buttons and to work on IE7.
I have found some code to style anchor tags so as to make them look like nice buttons.

Unfortunately, they seem to be totally outside of the tabbing order (I can’t navigate to those controls by pressing tab). On some screens I can fix this by adding tabindex to all of the controls on the form, but unfortunately it is not possible to do this on all screens (for instance I sometimes use partial views).

Note tabbing to the controls also doesn’t work in FireFox.

My “buttons” are placed like so:

<a class="btn green" id="Submit">Save</a>

There is some javascript, which adds some and tags to this class to allow it to have rounded corners, so the anchor tags are converted to this:

<a class="btn green" id="Submit"><i></i><span><i></i><span></span>Save</span></a>

and they are styled with the following css:

    .btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }
    .btn * { font-style: normal; background-image: url(images/btn2.png); background-repeat: no-repeat; display: block; position: relative; }
    .btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
    .btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
    .btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
    .btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }
    a.btn {color: #333;text-decoration: none; font-weight:bold; font-family: Arial; font-size: 12px; }
    * html .btn span,
    * html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }

    .btn.green { background: rgb(175,211,86);  }
    .btn:hover { background-color: #FFF; }
    .btn:focus { background-color: #FFF; }
    .btnFocus  { background-color: #FFF !important; }
    .btn:active { background-color: #444; }
    .btn[class] {  background-image: url(images/shade.png); background-position: bottom; }

    * html .btn { border: 3px double #aaa; }
    * html .btn.green { border-color: #9d4; }

    * html .btn:hover { border-color: #a00; }

Answer 1

Ah, just figured it out.

It works fine if we add an href attribute to the anchor tags

<a class="btn green" id="Submit" href="#">Save</a>

Sorry to trouble everyone.