• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 414
  • Last Modified:

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

0
Eternal_Student
Asked:
Eternal_Student
  • 5
  • 2
  • 2
1 Solution
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 5
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now