CODEWITHSUNDEEP
htmlcssasp.net-mvc-4razor
user2609980
user2609980

Reputation: 10484

Vertically aligning a submit button and a link with button markup

In my MVC4 web application I have two buttons that I want to display next to each other. One is used to POST a form to the server and the other button is used to make a GET request (so basically a link with button markup).

The problem is that they now both display on a different height inline (while they both use the same CSS) for a to me unknown reason.

This is a visual representation in FireFox of the issue:

Button next to each other

The HTML with Razor looks as follows:

<td align="right">
    <!-- LEFT POST BUTTON -->
    @using (Html.BeginForm("SettleWithSalary", "Transaction"))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()

        @Html.HiddenFor(id => item.UserId)
        @Html.HiddenFor(balance => item.Total)

        <button type="submit" class="btn btn-green">Settle</button>
    }
</td>
<td>| <!--RIGHT GET BUTTON-->
    @Html.ActionLink("Details", "Overview", "Transaction",
            new { id = item.UserId }, new { @class = "btn btn-green" })
</td>

And the resulting HTML in the browser like this:

<td align="right">
<form action="/Transaction/SettleWithSalary" method="post">
    <input name="__RequestVerificationToken" type="hidden" value="***blabla" />
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul>
            <li style="display:none"></li>
        </ul>
    </div>

    <!-- Two hidden fields with lots of information -->                     

    <button type="submit" class="btn btn-green">Settle</button>

</form>                
</td>
<td> |

    <a class="btn btn-green" href="/Transaction/Overview/2">Details</a>

</td>

What I want is the Settle button to be aligned vertically with the Details button. I tried putting a div with style="float: none; vertical-align: top around the button element which does not work. Also putting a style="position: absolute;" in the button just displays them on top of each other with the Settle button lower than the Details button. In short, I have no clue how to solve this.

Does anybody here know why they are displayed on different heights and how this can be solved?

/EDIT As requested: See this Fiddle for a demonstration.

Upvotes: 0

Views: 862

Answers (2)

Prasanth K C
Prasanth K C

Reputation: 7332

Different browsers set different default CSS rules in there browsers known as user agent stylesheet.

Here in your code:

ul inside the container validation-summary-valid has default user agent margin. So reset ul margin to 0.

    .validation-summary-valid ul {
       margin:0;
     }

Or you can reset the whole user agent styles by including a reset.css or a normalise.css (Google any of these and find).

Upvotes: 1

Marinus
Marinus

Reputation: 441

Try this.. <form> <table cellpadding="10" cellspacing="0" border="0"> <tr> <td colspan="2"><input name="__RequestVerificationToken" type="hidden" value="***blabla" /> <div class="validation-summary-valid" data-valmsg-summary="true"> <ul> <li style="display:none"></li> </ul> </div> <!-- Two hidden fields with lots of information --> </td> </tr> <tr> <td style="border-right=1px solid #000000;"><button type="submit" class="btn btn-green">Settle</button></td> <td><a class="btn btn-green" href="/Transaction/Overview/2">Details</a></td> </tr> </table> </form>

Upvotes: 0

Related Questions