By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,986 Members | 1,537 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,986 IT Pros & Developers. It's quick & easy.

Container Scrollbar IE Problem

P: 3
Hi, hope someone can help with this. It's driving me mad.

I have a container inside which is another DIV which is filled with pictures and then another DIV with some text.

In FF the picture DIV scrolls horizontally which is as it should be. In IE, however, the Container scrolls and I can't seem to find a way to make the picture DIV scroll instead.

The page is http://cristimodels.com/catalogue/item.asp?fIndex=2

CSS:

Expand|Select|Wrap|Line Numbers
  1. #content {
  2.     margin-left: 83px;
  3.     background: #FFFFFF;
  4.     overflow: auto;
  5.     margin-left: 92px;
  6.     width: 842px;
  7.     height: 480px;
  8.     padding: 0px;
  9. }
  10. #bigPictures {
  11.     margin-left: 10px;
  12.     margin-right: 10px;
  13.     height: 380px;
  14.     white-space: nowrap;
  15.     //display: inline;
  16.     overflow: auto;
  17. }
  18. #details {
  19.     margin-top: 0px;
  20.     margin-left: 30px;
  21. }
  22. #extrabuttons {
  23.     margin-top: -45px;
  24.     margin-left: 690px;
  25. }
  26. <div id="content">
  27.      <div id="bigPictures">
  28.           <!-- lots of wide pictures -->
  29.      </div>
  30.      <div id="details">
  31.           <!-- some text -->
  32.      </div>
  33.      <div id="extrabuttons">
  34.           <!-- some more stuff -->
  35.      </div>
  36. </div>
Any help appreciated!
Mar 13 '08 #1
Share this Question
Share on Google+
5 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Validate your CSS for that list of errors. There are 3 in particular that might be affecting this, particularly your incorrect comment. You are using // instead of /*
Mar 13 '08 #2

P: 3
Validation does not solve the problem.

Validated code looks like this:

Expand|Select|Wrap|Line Numbers
  1. #bigPictures {
  2.     margin-left: 10px;
  3.     margin-right: 10px;
  4.     height: 380px;
  5.     white-space: nowrap;
  6.     display: inherit;
  7.     overflow: auto;
  8. }
  9.  
  10. <!--[if lt IE 7]>
  11. <style type="text/css">
  12. #bigPictures { display: inline; }
  13. </style>
  14. <![endif]-->
  15.  
  16. <!--[if IE 7]>
  17. <style type="text/css">
  18. #bigPictures { display: inline; }
  19. </style>
  20. <![endif]-->
  21.  
This is the best I can make it look for now, but it still doesn't move the scroll bar in IE from the container to the bigPictures div.
Mar 14 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
I don't understand. I don't see any scrolling in FF either.
Mar 14 '08 #4

P: 3
I don't understand. I don't see any scrolling in FF either.
In FF the scrollbar is just under the model. If you scroll then only the pictures move.

The same page in IE shows the scrollbar under her measurements and when scrolling they (and a couple of buttons) move also.
Mar 14 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
There is a big gap at the top which pushes the rest of the content down and hides the bottom of the model's picture. There is no vertical scroll so I can't see anything much below the bottom half.
Mar 14 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.