Question

I’m using a jQuery plugin called “Cycle” and I am having issues with the CSS for it in IE, it looks perfect in Opera, FF, Chrome and Safari, but IE is cracking the sads..

www[dot]photographicpassions[dot]com/home

You will see the “latest work” on the right hand side and the thumbnails below the main image, in FF, Safari, Chrome and Opera, the grey container is behind all the thumbnails, but in IE, the grey background stops at the top of the thumbnails.. I’ve tried various things to make it work, to no avail.. could someone please help me??

Here’s the CSS for the containers which aren’t playing nice in IE:

/* latest work container */
div#latestHolder {
    position: relative;
    float: left; width: 368px;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    background-color: #666666;
}

/* thumbnails */
div#nav {
    position: relative;
    float: left; left: 0px;
    width: 376px;
    padding: 0px 0px 0px 0px;
    margin: 1px 0px 0px 0px;
}
    div#nav li {
        width: 66px;
        float: left;
        padding: 0px 0px 0px 0px;
        margin: 9px 9px 0px 0px;
        list-style: none;
        cursor: pointer;
    }
    div#nav a {
        padding: 3px;
        display: block;
        background: #404040;
        cursor: pointer;
    }
        div#nav a.activeSlide {
            background: #ffffff;
            cursor: pointer;
        }
        div#nav a:focus {
            outline: none;
            cursor: pointer;
        }
    div#nav img {
        width: 60px;
        border: none;
        display: block;
        cursor: pointer;
    }

If someone could help me out, that’d be fantastic!! 🙂

Answer 1

Just use overflow: hidden on your containers. By default, overflow: auto will not grow elements to contain its contents. Setting overflow: hidden (or overflow: auto…bit with that you risk unwanted scrollbars), you will force your container divs to expand to the hight of all their child elements…floated elements included.