0

I am using jcarousel on this page and it works fine in all browsers except IE7

The slides should only be 3 at a time in the middle of the arrows. Everything is functioning correctly except in IE7 slides are overflowing outside of container. I was thinking it might be a CSS issue but haven't had any luck with IE7 specific fixes.

Himanshu
  • 31,810
  • 31
  • 111
  • 133
Deep Rooted
  • 245
  • 3
  • 4
  • 19

1 Answers1

1

I hate this ( bug / MS feature) in IE.

If you use overflow:hidden on an element that does not have both width and height declared it will not work in <= IE7.

If you can, try giving #carousel_container a height attribute. (by measuring the height of the element of the page in FF it needs to be 330px)

David Barker
  • 14,484
  • 3
  • 48
  • 77
  • I created an ie7 css stylesheet that i am calling via condition comment. i added this code per your suggestion but it didnt seem to fix the issue. i still see all the slides: #carousel_container {width:1140px; height:330px;margin:0 auto;overflow:hidden;padding-top:10px;border:1px solid #000;} – Deep Rooted Jul 23 '12 at 12:59
  • http://stackoverflow.com/questions/2403011/ie6-ie7-css-problem-with-overflow-hidden-position-relative-combo take a look at this. I think it'll help you. – David Barker Jul 23 '12 at 13:04
  • No problems at all, glad you got it sorted! – David Barker Jul 23 '12 at 13:12
  • putting a position:relative on the carousel_container worked in terms of bringing it down to only 3 images in the slider but now there is some spacing issue im having trouble with. if i change the width of the container than the arrows disappear. – Deep Rooted Jul 23 '12 at 13:25
  • Did you fix this? Another horrible anomaly for IE7 where you have the supposed: 'overflow:hidden' div hiding content but not width. Oh joy. I love IE7 – David Barker Jul 25 '12 at 07:30
  • i was able to fix it just enough to make it look okay in IE – Deep Rooted Jul 29 '12 at 15:30