min-width property having issue in IE8 Compatibility mode

Question

Have a parent DIV with a class .list attached. Paretnt DIV consist of 8 floated divs with position:relative property.

Parent Div has min-width property, when i open the page in IE8 compatibility mode its considering the min-width property as width property and shows all the 8 DIVS in a row. Where in it should show only 3 divs.

Here is the HTML code

<div id="list-container">
<div class='list'>
            <div class='item'><h1>1</h1></div>
            <div class='item'><h1>2</h1></div>
            <div class='item'><h1>3</h1>
            </div>
            <div class="item"><h1>4</h1>
            </div>
            <div class='item'><h1>5</h1>
            </div>
            <div class='item'><h1>6</h1>
            </div>
            <div class='item'><h1>7</h1>
            </div>
            <div class="item"><h1>8</h1>
            </div>

        </div>
</div>

CSS Code

.list{
    background:grey;
    min-width:1400px;
    float:left;
}

.item{
    background:green;
    width:140px;
    height:80px;
    margin:5px;
    float:left;
    position:relative;
}
#list-container {
float: left;
overflow: hidden;
width: 450px;

}

It works perfect in Firefox.

UPDATE: I see the same issue in IE7 as well (using IE8 brower and switching the browser mode to IE7 from Developer tool)

EDIT :For more Clarity am adding images

IE7 and IE8 compatibility mode

enter image description here

FF

enter image description here

Thanks in advance

i m check if ie but not problum – Rohit Azad Malik Mar 22 '13 at 12:05 — Rohit Azad Malik, Mar 22 '13 at 12:05

score 0 · Answer 1 · answered Mar 22 '13 at 12:15

0

You can't set the parent container with a lower amount of width with its child elements. It will always show quirky in some ways. Also ie8 doesn't support min-width. Try removing the min-width.

We could be much more of help if you show us what you really wanted to do.

answered Mar 22 '13 at 12:15

janharold

146
10

@Janharold.. Thanks for taking time for my question.. :). Am trying to show only 3 Child DIVS at a time, using JQuery and have animated to slide each div at a time interval of 5 seconds. In IE7 and IE8 compatibility mode all the 8 divs are getting displayed. Expected is only 3 should be shown. – KrankyCode Mar 22 '13 at 12:26
Yeah, try removing the min-width first. Also, why did you set overflow:hidden on the parent? – janharold Mar 22 '13 at 12:44

score 0 · Answer 2 · answered Mar 22 '13 at 12:28

0

For IE you should add * html .yourclass{height: 1%;} to fix. Did you tried it?

answered Mar 22 '13 at 12:28

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 3 · answered Mar 23 '13 at 07:39

0

You are inheriting the wrong class, make parent and child in difference, that will help for sure :) have look at fiddle

   link:  http://jsfiddle.net/MarmeeK/gu3Us/1/

thank you,

answered Mar 23 '13 at 07:39

MarmiK

5,639
6
40
49

min-width property having issue in IE8 Compatibility mode

3 Answers3