IE7 Overflow hidden bug?

I am working on a website for my company and am required to make it work with IE 7+. I guess I should count my blessings, but I am having problems with an jQuery easy slider working correctly in IE 7. It uses overflow hidden, which I assume is the problem:



#slider li, #slider2 li { 
   /* 
      define width and height of list item (slide)
      entire slider area will adjust according to the parameters provided here
   */ 
   width:          635px;
   height:         320px;
   overflow:       hidden; 
   }  
   
#prevBtn,     #nextBtn,
#slider1next, #slider1prev { 
   display:        block;
   width:          30px;
   height:         77px; /* was 77 */
   position:       absolute;
   left:           -30px;
   top:            71px; /* was 71 */
   z-index:        1000;
   }  
   
#nextBtn, #slider1next { 
   left:           635px;
   }  
                                          
#prevBtn a,     #nextBtn a,      /* buttons only */
#slider1next a, #slider1prev a {  
   display:           block;
   position:          relative;
   width:             30px;
   height:            77px; /* was 77 */
   background:url(../images/btn_prev.gif) no-repeat 0 0; 
   }  
   
#nextBtn a, #slider1next a { 
   background:url(../images/btn_next.gif) no-repeat 0 0; 
   }  

It can be seen at http://mockup.omrf.org/. Any help pointing me in the right direction would be appreciated.

Wow, you hit the nail on the head. Thank you very much!

Hi,

Try this:


#slider{    position:relative;}

IE7 quite likes elements with overflow to be positioned also.

Note that you have nested spans around p elements which is invalid as only block level elements (such as div) can wrap a p element. :slight_smile: