CODEWITHSUNDEEP
htmlcss
bflemi3
bflemi3

Reputation: 6790

IE9 displaying inline-block divs incorrectly

I have a div with child divs that I'm trying to create a slideshow with. I have the child divs displayed inline-block and everything looks great except in IE<=9. In IE<=9 each div.contentItem is being displayed vertically.

I used white-space: nowrap and inline-block (instead of float:left) because more div.contentItem are asynchronously added and I didn't want to have to recalculate div.content width every time new elements are added. So, for that reason I would prefer to stay away from float:left unless there is a way to use float without having to specify a width.

NOTE I can't change the doctype as it's on a masterpage and used by many other pages within our cms. Too much regression testing.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
    <div class="content">
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
    </div>
</body>
</html>

css

.content {
    white-space: nowrap;
    margin-left: 256px;
    position: relative;
    padding-top: 14px;
}

.contentItem {
    display: -moz-inline-stack;
    display: inline-block !important;
    *display: inline;
    margin: 0 14px 0 0;
    vertical-align: top;
    zoom: 1;
}

Upvotes: 0

Views: 9904

Answers (4)

bflemi3
bflemi3

Reputation: 6790

I changed the div.contentItem to span.contentItem. Now the items display inline and no css change needed.

Upvotes: 1

rogal111
rogal111

Reputation: 5933

IE <= 8 doesn't fully support display: inline-block. Read here.

Instead using inline-block, try to adopt this code to your slideshow: http://jsfiddle.net/9ACNT/

Upvotes: -1

Scrimothy
Scrimothy

Reputation: 2536

If you keep your white-space: nowrap on your parent div, you should be able to use float: left on your children without having to define a width for the parent.

See this Fiddle illustration I did for another post earlier. It applies here too. You can resize the result window to see that both versions where the white-space is set to nowrap (whether floating blocks or inline-blocks) they always stay on one row.

Upvotes: 1

chris.antonellis
chris.antonellis

Reputation: 86

inline-blocks are sensitive when it comes to whitespace, if the content is exactly as wide as its parent it will probably break and go to the next line.. maybe you need something like this

<body>
    <div class="content">
        <div class="contentItem">...</div><div class="contentItem">...</div><div class="contentItem">...</div>
    </div>
</body>

removing all the whitespace from around the inline elements should make them exactly the size you want them to be

Upvotes: 0

Related Questions