467,169 Members | 1,047 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,169 developers. It's quick & easy.

Container Scrollbar IE Problem

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
  • viewed: 2520
Share:
5 Replies
drhowarddrfine
Expert 4TB
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
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 4TB
I don't understand. I don't see any scrolling in FF either.
Mar 14 '08 #4
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 4TB
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.

Similar topics

7 posts views Thread by Barbara de Zoete | last post: by
3 posts views Thread by Robert | last post: by
2 posts views Thread by Paul_Madden via DotNetMonster.com | last post: by
reply views Thread by chrispforr | last post: by
reply views Thread by --== Alain ==-- | last post: by
13 posts views Thread by LC's No-Spam Newsreading account | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.