Container Scrollbar IE Problem

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • arathra
    New Member
    • Mar 2008
    • 3

    #1

    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.co m/catalogue/item.asp?fIndex =2

    CSS:

    Code:
    #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
    Recognized Expert Expert
    • Sep 2006
    • 7434

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

    Comment

    • arathra
      New Member
      • Mar 2008
      • 3

      #3
      Validation does not solve the problem.

      Validated code looks like this:

      Code:
      #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.

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

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

        Comment

        • arathra
          New Member
          • Mar 2008
          • 3

          #5
          Originally posted by drhowarddrfine
          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.

          Comment

          • drhowarddrfine
            Recognized Expert Expert
            • Sep 2006
            • 7434

            #6
            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.

            Comment

            Working...