CODEWITHSUNDEEP
asp.netcsshtmlinternet-explorer-9internet-explorer-10
Philip Stratford
Philip Stratford

Reputation: 4733

Inline DIVs Displayed Incorrectly in IE9+

I'm trying to display three, evenly sized DIVs on a page, with the left and right DIVs aligned left and right respectively and the middle one centered, with the spaces between them even. I found this answer, which does exactly what I want and works perfectly.

Perfectly in Chrome and Firefox, that is. In IE9 (on Windows 7) and IE10 (on Windows 8) it looks disastrously different, with boxes stacked rather than side by side, with the width and height of the boxes specified in the CSS totally ignored and, bizzarely, with the controls in the first DIV seemingly each being in their own DIV with a border, rather than in the same DIV together. Can anyone tell me where I (or IE) am going wrong?

HTML

<div id="caselookup">
    <div class="box">
        <div class="boxcontent">
            <asp:TextBox ID="txtCaseNo" runat="server" /><br />
            <asp:Button ID="btnLookupCaseNo" runat="server" Text="Lookup Case" />
        </div>
    </div>
    <div class="box">
        <div class="boxcontent">
            <asp:ListBox ID="lstUnmatchedAppointments" runat="server"  />
        </div>
    </div> 
    <div class="box"> 
        <div class="boxcontent">
            <asp:Button ID="btnContinue" runat="server" Text="New Colic Record" />
        </div>     
    </div> 
    <span class="stretch"></span>
</div>

CSS

#caselookup
{
    text-align: justify;
}
.box
{
    vertical-align: top;
    display: inline-block;
    *display: inline;
    text-align: center;
    min-width: 30%;
    border: 1px solid black;        
    height: 200px;
}
.boxcontent
{
    padding:10px;
}
.stretch
{
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

Upvotes: 1

Views: 521

Answers (2)

Philip Stratford
Philip Stratford

Reputation: 4733

In Internet Explorer, I opened Compatibility View Settings (I had to enable the Command Menu so I could select this from Tools) and then unchecked the 'Display intranet sites in Compatibility View' option. My page displayed correctly after that.

Upvotes: 1

Chris Hammond
Chris Hammond

Reputation: 8943

Are you running a particular DocType in the page? I find that going to XHTML Transitional 1.0 doctypes help to render most things the same, or a lot closer, in all browsers.

Upvotes: 0

Related Questions