Question

when i view my site : http://www.testtrack.tv/ in IE8’s compatibility-mode the horizontal scrollpanes turn into vertical panes. this is not the case with Kevin’s demo site, so it must be something in my CSS.

i’m using the default css from jscrollpane’s examples, with a couple of additions… i added white-space: nowrap. this works great everywhere except IE7 even though i thought this was a supported property.

/* Styles specific to this particular page */
.scroll-pane  {
    width: 100%;
    height: 200px;
    overflow: auto;
    white-space:nowrap;
}
.horizontal-only {
    height: auto;
    max-height: 200px;
}

.thumbWrapper {
    margin-right: 10px;
    height: 150px;
    position: relative;
    width: 145px;
    white-space: normal;
    display: inline-block;
    /*hack for IE7 to display as inline-block*/
    zoom: 1;
    *display:inline;
}

where the thumbWrapper class is wrapping up the image and its caption into a div. might this be better as an li element?

my markup looks like this:

<div class="scrollWrapper">
<h2>Editor's Choice</h2>
<p>the TestTrack.Tv team’s pick of the hottest clips...</p>

<div id="cat-48" class="scroll-pane horizontal-only">           

<div class="thumbWrapper">
    <a href="http://www.testtrack.tv/fast-and-furious-5-movie-trailer/">
    <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0470.jpg' height='81' alt='thumb'/>
    </a>
    <br/><a href="http://www.testtrack.tv/fast-and-furious-5-movie-trailer/">Fast And Furious 5 &#8211; Movie Trailer</a>
</div>

<div class="thumbWrapper">
    <a href="http://www.testtrack.tv/danny-macaskill-way-back-home/">
    <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0159.jpg' height='81' alt='thumb'/>
    </a>
    <br/><a href="http://www.testtrack.tv/danny-macaskill-way-back-home/">Danny MacAskill &#8211; &#8220;Way Back Home&#8221;</a>
</div>

<div class="thumbWrapper">
    <a href="http://www.testtrack.tv/dakar-2011-carlos-sainz-red-bull-volkswagen-touareg/">
    <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0678.jpg' height='81' alt='thumb'/>
    </a>
    <br/><a href="http://www.testtrack.tv/dakar-2011-carlos-sainz-red-bull-volkswagen-touareg/">Dakar 2011 &#8211; Carlos Sainz &#8211; Red Bull Volkswagen Touareg</a>
</div>

<div class="thumbWrapper">
    <a href="http://www.testtrack.tv/porsche-959-vs-ferrari-f40-bbc-top-gear/">
    <img src='http://www.testtrack.tv/wp-content/uploads/2011/04/0645.jpg' height='81' alt='thumb'/></a>
    <br/><a href="http://www.testtrack.tv/porsche-959-vs-ferrari-f40-bbc-top-gear/">Porsche 959 vs ferrari F40 &#8211; BBC Top Gear</a>
</div>

</div><!--.scroll-pane-->
</div><!--.scrollWrapper-->

ultimately, i’m looking for a fix to make it display horizontally in IE7 like all the other browsers.

Answer 1

the answer turned out to be to not use a block-level DIV when i wanted the elements to behave as inline. IE7 was not properly handling the inline-block declaration. switch the “thumbWrapper” element to SPAN solved this for me.