Question

I have created a navigation menu. And in Google Chrome / Firefox it looks very well.
But in internet explorer the text of the buttons are at the bottom?!

So how can I solve following issue?

Look what I mean:

Google Chrome:

Mozilla Firefox:

Internet Explorer:

.auto-style2 {
    font-size: 40px;
    text-align: left;
    float:left;
}
.auto-style3 {
    width:1200px;
    height:50px;
    margin: 0px auto;
    text-align: left;
    vertical-align: middle;
}

.auto-style5 {
    text-align: right;
    float:right;
    line-height:50px;
}


<div class="auto-style3">
<div class="auto-style2">
    <strong>SPICYSOFTWARE</strong>
</div>
<div class="auto-style5">
    <button name="Abutton1" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle; text-align: center;">MWST</button>
    <button name="Abutton2" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle;">News</button>
    <button name="Abutton3" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle;">Alle Apps</button>
    <button name="Abutton4" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle;">Über uns</button>
    <button name="Abutton5" style="width: 100px; height: 30px; margin-left: 5px; vertical-align: middle;">Changelog</button>
</div>

Answer 1

Put this in your head.

 <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="IE.css" />
 <![endif]-->

Create an additional css file for IE and adjust your IE css accordingly.