Scrolling div IE7

Hi,

I have a problem in IE7, if you look at the following code.

Basically IE7 is wrapping the list elements even though the div has overflow:scroll.

Any ideas here ... I know I could set a width to force it but the problem is, there could be any number of list elements so that width is unknown.

Help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
	<style type="text/css">
    #scroller_sub{float:left;width:687px;height:170px;overflow-x:scroll;white-space:nowrap;margin-top:20px;}
	.thumb{margin-right:18px;width:116px;white-space: nowrap;vertical-align:top;display:inline-block;*display:inline;*float:left;}
    </style>
</head>
<body>
	<div id="scroller_sub">
    	<ul>
    		<li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
    		<li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
        </ul>
    </div>
    
    
</body>

</html>

Open in new window

LVL 18
Eternal_StudentAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
IE7 fails and wraps due to the floats falling within a specified width container, so even with the white-space:nowrap and the overflow-x:scroll, it would still wrap the elements since it's floated.

You can overcome this by specifying a width for the child element, which is the UL in this case, I've attached an example below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
        <style type="text/css">
        #scroller_sub{float:left;width:687px;height:170px;overflow-x:scroll; white-space:nowrap;margin-top:20px;}
        .thumb{margin-right:18px;width:116px;white-space: nowrap;vertical-align:top;display:inline-block;*display:inline;*float:left;}
        #scroller_sub ul {width:1700px;}
    </style>
</head>
<body>
        <div id="scroller_sub">
            <ul>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
                <li class="thumb"><img src="http://www.freestyledesign.co.uk/images/thumbs/pub/pub1.jpg" /><div style="width:116px">Here</div></li>
            </ul>
    </div>
    
    
</body>

</html>

Open in new window

0
aboo_sCommented:
I tried your code with both ie8 and ff 3.6
and it works fine in both, it scrolls horizontally !
0
remorinaCommented:
Another fix that addresses this issue can be found here http://haslayout.net/css/Incorrect-Float-Shrink-Wrap-Bug which addresses the issue in a different way that wouldn't require specifying the width.

Would be useful if you have a dynamic number of elements and can't anticipate a width

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

aboo_sCommented:
Ok I also tested it in ie7 and ie6 and here it doesn't work! I tried what remorina suggested and it is just fine.
I'm using IE TESTER you should try it sometime!
0
remorinaCommented:
Thanks aboo_s, and by the way IEtester is ok for a quick test, but sometimes it wouldn't show up the correct result of a real IE6 browser as discussed here
http://doctype.com/accuracy-ie-testing-tools-like-multiple-ie-ietester, apart from the crashing tabs.

However I use it for quick checks but I'm currently using xenocode virtual standalone browsers, it's the closest thing to a virtual machine, you can also run FireFox, Safari, Chrome and Opera

Just thought of sharing :)
0
Eternal_StudentAuthor Commented:
Hi remorina,

I was trying to avoid having to set a width, do you know of a method I can use where by I dont have to set a width?

Thanks for your time.
0
remorinaCommented:
Hi Eternal_Student,
yes my second post with the reference link is using an approach to try fixing it withouth setting a width. It works but I haven't tested it on your actual structure, might be worth a look
0
Eternal_StudentAuthor Commented:
Can't seem to get it working myself.
0
remorinaCommented:
Neither do I, I gave it a quick try and it's not working in this situation.
I think the only way was to specify a width.

Although it's not recommended, but you can use conditional IE css to only specify the width for IE only if desired
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.