Hi, I'm trying to style a list consisting of television seasons with child lists of episodes into a horizontal element where the episodes are displayed as blocks that scroll horizontally. When there are few episodes, the episodes should be horizontally centered. When there are many episodes, they should overflow off the right (ie: not wrap down) with a horizontal scrollbar. I've achieved what I wanted easily in Safari and Firefox by displaying the list items as inline-blocks or -moz-inline-box, but that doesn't work in Internet Explorer. In IE, each episode list item exists in its own row and wraps down. Right now, I have IE float the items to the left, but that means it'll continue to wrap down instead of flow off the right edge. Does anyone have any suggestions on how I can display the list items to achieve the overflow I'm looking for?
Here's two pages reduced to just the necessary elements. Few items: http://www.mobovivo.com/css-d/MVProgramPage-reduction/ MVProgramPage-reduction.html Many items: http://www.mobovivo.com/css-d/MVProgramPage-reduction/ MVProgramPage-reduction-s2.html CSS file: http://www.mobovivo.com/css-d/MVProgramPage-reduction/ MVProgramPage-reduction.css The selector with the inline-block/-moz-inline-box is (ul.mv-program- collations ul li). I wrote a bit of IE-specific Javascript in the selector (ul.mv- program-collations ul) to center the ul containing the floated elements in IE when there are few of them. Any clues at all as to how I can either get inline-block to work, or make IE not wrap floating elements would be very much appreciated! Thanks, King Chung Huang ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
