Home/ Questions/Q 8549661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:46:05+00:00

I have a div with child divs that I’m trying to create a slideshow

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0