Debugging lightbox ul for ie6

Question

Hi, I have completely debugged my site except for one page:

http://hqinternetsolutions.com/fullservice/movies.html

The li's do not appear correctly in ie 6 or 7, but work fine in the other browsers. The html is very simple: ul li and the anchor tags. The css is also simple:

#moviegrid{
    width:560px;
    margin:20px auto;
    height:250px;

}

#moviegrid ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;

}

#moviegrid li{
    padding:0;
    margin: 0;

    }

#moviegrid li img{
    background-color:#fff;
    padding:2px 2px 2px 2px;

}

#moviegrid li img:hover{
    background-color: #328f87;
    padding:2px 2px 2px 2px;
}

What am I doing wrong?!

Answer 1

I could be wrong, but try applying a display attribute directly to the li's, such as:

moviegrid li{
    display:inline;
}

IE 6 or 7 are not very good at CSS inheritance, so that may or may not be the problem...

Answer 2

You'll also need to add zoom:1 to trigger IE's hasLayout flag:

#moviegrid li{
  padding:0;
  margin: 0;
  zoom: 1;
  display: inline;
}