King Chung Huang wrote: > 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. [...] > > 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
In IE/Win it is possible to get a sort of inline-block behaviour for HTML block level elements, giving them 'hasLayout' plus 'display:inline'. Read here for more info [1] [2]. As a quick test I changed your _float: left on the li to: '_display: inline; zoom: 1' and this seems to get your desired effect (no need for javascript.) Of course you have to rewrite this using better filters (may be conditional comments. IE7b2 needs this as well.) I used this combination of 'inline', 'inline-block', '-moz-inline-box' to get some 'thumbnail galleries' [3], but please note that '-moz-inline-box' is not really intended for this use, and may create problems. hth, Bruno [1] http://www.brunildo.org/test/InlineBlockLayout.html [2] http://www.satzansatz.de/cssd/onhavinglayout.html [3] http://www.brunildo.org/test/ImgThumbIBL2b.html ______________________________________________________________________ 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/
