Incorrect Button Position in IE Only

Question

I have 2 buttons that should display above another div. But in Internet Explorer, the 2 buttons get displayed on the same y level/axis as the div(that should be below).

Note: that the HTML displays correctly in Firefox & Chrome(2 buttons are above the div) but on IE the buttons are not displayed above the div.

This is how it should look & it does look in firefox:
enter image description here But this is how IE displays the HTML:
Can you help me fix the display so the 2 buttons are above the "course" div in IE?

<html>
<head>
    <title> </title>

    <style type="text/css">
    <!--
        #navBar {
            text-align: left;
            margin: 0 auto;
            padding: 0 auto;
            margin-top: 10px;
            position: fixed;
        }

        .leftAlignButton {
            margin-left: 2px;
            float: left;
        }

        .rightAlignButton {
            float: right;
            margin-right: 54px;
        }

        .navTab {
            background: url(images/tag.png) top right no-repeat;
            overflow: hidden;
            padding: 8px 10px 12px 10px;
            width: 155px;
            height: 50px;
        }

        .navTab select {
            width: 110px;
            height: 25px;
        }

        .navTab input {
            width: 100px;
        }

        .navText {
            color: #FFFFFF;
            font-family: "Onyx", "Arial", Serif;
            font-size: 23px;
            letter-spacing: 1px;
        }
    -->
    </style>
</head>
<body>

    <div id="navBar">
        <div id="buttonTab">
            <a class="leftAlignButton" href=""><img src="images/closeBt.png" alt="Close"/></a>
            <a class="rightAlignButton" href=""><img src="images/goBt.png" alt="Go"/></a>
        </div>
        <div class="navTab">
            <p class="navText">Course:</p>
            <select>
                <option>Breakfast</option>
            </select>
        </div>
    </div>


</body>
</html>

go put this up on jsfiddle and give more details....what version(s) of IE? — albert, Oct 30 '11 at 04:48
@mu Thanks! it fixed it, weird that I need to do that to make it work. U shd make an answer so I can select it :) — sazr, Oct 30 '11 at 04:49
Feel free to accept John Fish's, I don't think he saw my comment. — mu is too short, Oct 30 '11 at 04:58

score 1 · Accepted Answer · answered Oct 30 '11 at 04:51

1

Try adding

#buttonTab { overflow:hidden }

EDIT: just read someone else submitted the same thing.

answered Oct 30 '11 at 04:51

John Fish

1,060
1
7
13

No worries, you're welcome to it :) And welcome to Stackoverflow. – mu is too short Oct 30 '11 at 04:57
Could you please answer http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8 ? – LCJ Mar 30 '12 at 13:05

Incorrect Button Position in IE Only

1 Answers1