Inline DIVs Displayed Incorrectly in IE9+

Question

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;
}

Although you're talking about IE9/10 you have a part of a fix for IE6/7 to make them use `display: inline-block;`. You've missed the `*zoom: 1;` there. See your link for more information. — kleinfreund, Feb 05 '13 at 17:35
That seems to have been it. I didn't realise that there was a 'show Intranet sites in Compatibility Mode' setting, or that it was default to enabled! Disabled that and it displayed correctly. Thanks! — Philip Stratford, Feb 05 '13 at 17:57

score 1 · Accepted Answer · answered Feb 13 '13 at 11:49

1

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.

answered Feb 13 '13 at 11:49

Philip Stratford

4,513
4
45
71

score 0 · Answer 2 · answered Feb 05 '13 at 18:21

0

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.

answered Feb 05 '13 at 18:21

Chris Hammond

8,873
1
26
34

Inline DIVs Displayed Incorrectly in IE9+

2 Answers2