Question

i have a page with some boxes positioned with absolute positions. works perfectly in IE8 and IE9, but IE7 comes out completely wonky.

here is the relevant HTML:

          <div id="thumbHolder">

            <div class="thumb upper"><a href="#pic1" rel="-339" title="" >
                <img src="../images/ui/telaviv1.jpg" alt="Jaffa" border="0" />
                <div class="caption"></div>
                <div class="captionText">Jaffa</div>
                <div class="rolloverText">
                <strong>Jaffa</strong><br />

    Visit the ancient
    port city, its artist colony
    and markets
                </div>
                </a>
            </div>

            <div class="thumb upper"><a href="#pic2" rel="-678" title="">
                <img src="../images/ui/telaviv2.jpg" alt="Neve Tzedek" border="0" />
                <div class="caption"></div>
                <div class="captionText">Neve Tzedek</div>
                 <div class="rolloverText">
               <strong> Neve Tzedek</strong><br />

    Explore the charming and
    fashionable neighborhood,
    the first to be built outside
    of Jaffa
                </div>
                </a>
            </div>

            <div class="thumb upper right"><a href="#pic3" rel="-1017" title="">
                <img src="../images/ui/telaviv3.jpg" alt="The White City" border="0" />
                <div class="caption"></div>
                <div class="captionText">The White City</div>
                 <div class="rolloverText">
               <strong> The White City</strong><br />

    Accredited a UNESCO
    world heritage site for
    its Bauhaus architecture
                </div>
                </a>
            </div>

            <div class="thumb"><a href="#pic4" rel="-1356" title="Messa Restaurant">
                <img src="../images/ui/telaviv4.jpg" alt="Restaurants" border="0" />
                <div class="caption"></div>
                <div class="captionText">Restaurants</div>
                 <div class="rolloverText">
                <strong>Restaurants</strong><br />

    Enjoy the finest
    restaurants, bars and clubs
    Israel has to offer

                </div>
                </a>
            </div>

            <div class="thumb"><a href="#pic5" rel="-1356" title="Menashe Kadishman’s Studio">
                <img src="../images/ui/telaviv5.jpg" alt="Art" border="0" />
                <div class="caption"></div>
                <div class="captionText">Art</div>
                 <div class="rolloverText">
                <strong>Art</strong><br />

    Explore art Galleries
    and meet with Israel’s
    top artists
                </div>
                </a>
            </div>



            <div class="thumb"><a href="#pic6" rel="-1356" title="Habima - National Theatre">
                <img src="../images/ui/telaviv6.jpg" alt="Culture" border="0" />
                <div class="caption"></div>
                <div class="captionText">Culture</div>
                 <div class="rolloverText">
                <strong>Culture</strong><br />

    Enjoy live performances
    and concerts

                </div>
                </a>
            </div>


        </div>

and here is the CSS:

            #thumbHolder {width: 559px; overflow:hidden; position: relative; margin-bottom: 15px;}
    .thumb {float:left; width: 174px; margin-right: 18px;}
    .thumb a {text-decoration: none;}
    .caption { background: #000;    zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        padding: 4px;

        position: absolute;
        width: 166px; margin-top: -24px;    height:15px;}
    .captionText { 
        color:#FFF; position: absolute; padding:4px; width: 166px;  margin-top: -23px;  height:15px; text-align:center; font-weight: bold;}

    .rolloverText {background: #000;
        color: #FFF;
        padding: 6px;
        margin-top: -88px;
        height: 74px;
        position: absolute;
        width: 162px;
        line-height: 125%;
        display: none;
        font-size: 95%;}
    .upper {margin-bottom: 15px;}
    .right {margin-right: 0;}

here is a link to the actual page: http://bit.ly/L47Qka (please dont revert this link to the actual destination link, for indexing purposes)

when you compare IE8 and IE9 to IE7 – you will see that the captions of the thumbnails is completely off, and the same way – the black boxes appearing on-click (on the live page).

many thanks!

Answer 1

I took at shot at this quickly, but this should be enough to get you on track. My example below was tested in IE6+, Firefox, and Chrome.

A couple notes: I used divs with background colors and outlines along with test content, but all the sizing is the same as your example. I turned one of the overlays “on” by default and hid the others by default so you can see both the toggled and base states. You’ll need to re-add your Javascript, this is just so you can see how the positioning works.

At first glance, I think your problem was the use of absolutely positioned divs without a relatively positioned container. Also, some negative margins seemed to be throwing things off as well with the “caption” and “caption-text” divs.

CSS:

body{
    margin:0;
    padding:0;
}

#wrapper{
    width:559px;
    height:400px;
    position:relative;
}

.thumb-wrapper{
    border:1px solid red;
    float:left;
}

.col1, .col2{
    margin-right:15px;
}

.row1{
    margin-bottom:15px;
}

.thumb-inner{
    width:174px;
    height:86px;
    position:relative;
}

.caption-wrapper{
    position:absolute;
    bottom:0;
    height:15px;
    width:100%;
    text-align:center;
    padding-bottom:4px;
    background-color:#000;
    color:#fff;
}

.rollover-text{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background-color:#000;
    color:#fff;
    display:none;
}

HTML

<div id="wrapper">
    <div class="thumb-wrapper row1 col1" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" style="display:block;">
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row1 col2" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row1 col3" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row2 col1" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row2 col2" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
    <div class="thumb-wrapper row2 col3" >
        <div class="thumb-inner" >
            <div class="caption-wrapper">
                Test
            </div>
            <div class="rollover-text" >
                <strong>Test</strong><br>
                Test test test
            </div>
        </div>
    </div>
</div>

Here’s a link to the full HTML: http://pastehtml.com/view/c0n37a140.html