Container Scrollbar IE Problem

[arathra]

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:

#content {
    margin-left: 83px;
    background: #FFFFFF;
    overflow: auto;
    margin-left: 92px;
    width: 842px;
    height: 480px;
    padding: 0px;
}
#bigPictures {
    margin-left: 10px;
    margin-right: 10px;
    height: 380px;
    white-space: nowrap;
    //display: inline;
    overflow: auto;
}
#details {
    margin-top: 0px;
    margin-left: 30px;
}
#extrabuttons {
    margin-top: -45px;
    margin-left: 690px;
}
<div id="content">
     <div id="bigPictures">
          <!-- lots of wide pictures -->
     </div>
     <div id="details">
          <!-- some text -->
     </div>
     <div id="extrabuttons">
          <!-- some more stuff -->
     </div>
</div>

Any help appreciated!

[drhowarddrfine]

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 /*

[arathra]

Validation does not solve the problem.

Validated code looks like this:

#bigPictures {
    margin-left: 10px;
    margin-right: 10px;
    height: 380px;
    white-space: nowrap;
    display: inherit;
    overflow: auto;
}
 
<!--[if lt IE 7]>
<style type="text/css">
#bigPictures { display: inline; }
</style>
<![endif]-->
 
<!--[if IE 7]>
<style type="text/css">
#bigPictures { display: inline; }
</style>
<![endif]-->
 

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.

[drhowarddrfine]

I don't understand. I don't see any scrolling in FF either.

[arathra]

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.

[drhowarddrfine]

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.