CODEWITHSUNDEEP
htmlcssinternet-explorer
user2441391
user2441391

Reputation: 339

IE 10 in compatibility mode is messing with the inline-block code

I have 6 pictures which are displayed in two columns with the help of the display: inline-block attribute. But when I test out the page with on IE10 compatibility mode the pictures are displayed in one column instead of two.

HTML

<div style="width:700px; margin-bottom: 15px;" >
    <img src="images/IMG_0021.JPG" alt="" style="width: 100%; margin-top: 20px; margin-left: 18px; margin-right:10px;"/>
</div>
<div style="width: 700px; float: right; height: 274px;">
    <p>test para</p>
    <p>test para </p>
</div>

<div style="">
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0013.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p  style="" class="text" ><strong>Ryan</strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt">Major:&nbsp;M</p>
        </div>
    </div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0020.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>John</strong></p>
            <p class="fnt">Year: s</p>
            <p class="fnt">Major:&nbsp; M</p>
        </div>
    </div>
</div>

<div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0018.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>Albert</strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt">Major:&nbsp; M</p>
        </div>
    </div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0015.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>Matt</strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt">Major:&nbsp; I</p>
        </div>
    </div>
</div>

<div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0014.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>Sh</strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt">Major:&nbsp; M</p>
        </div>
    </div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0012.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>Joshua </strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt" >Major:&nbsp; M</p>
        </div>
    </div>
</div>

CSS

.singlePic{
    width: 125px;
    height: 125px;
}

.singleBlock {
    width:335px;
    display: inline-block;
    margin-left: 18px;
}

.inline {
    display: inline-block;
    float:left;
}

Upvotes: 0

Views: 2617

Answers (1)

Cjmarkham
Cjmarkham

Reputation: 9681

Which IE version are you testing with compatability?

Versions less that IE8 do not use the inline-block attribute. Try using floats instead.

Upvotes: 2

Related Questions