Popup Div Shifted Up in IE6

My CSS and page works in the latest FireFox, Safari, and Chrome, IE7, IE8, but not IE6. Please help!

I have a popup that displays directly above the image (like I want) in every major browser except IE6.

At my URL, http://www.cookware-reviews.net/juicers/black-and-decker/, I have a bunch of DIVs inside one another that make up my 'popup'. This is a anchor tag with divs inside it that only show up when it is hovered over. The problem code is:

<a class="tooltip" href="#">
<img src="http://www.cookware-reviews.net/images/books/complete-book-of-juicing-your-delicious-guide-to-youthful-vitality.jpg" class="topleft" />
&nbsp;
<div class="bubble">
    <div class="top"></div>
    <div class="middle">
        <div class="left">
            <p class="section">
                <b>This is a Placeholder for the Product Title</b>
            </p>
            <p class="section">
                This is a placeholder for the beginning of the product description, but only the amount of it that is limited to about this much text.
            </p>
            <p class="availability">
                <u>Availability:</u>
                <br />
                <b>X new from $X.XX</b>
                <br />
                <b>X used from $X.XX</b>
            </p>
        </div>
        <div class="right">
            <p class="section">
                XX Reviews by XX People
            </p>
            <div class="review-left">
                <div class="l-top"></div>
                <div class="l-middle">
                    <div class="review">
                        <i>&quot;This is a sample left-oriented review with enough text like an actual reviews!&quot;</i>
                    </div>
                </div>
                <div class="l-bottom"></div>
            </div>
            <div class="review-right">
                <div class="r-top"></div>
                <div class="r-middle">
                    <div class="review">
                        <i>&quot;This is a sample right-oriented review with enough text like an actual reviews!&quot;</i>
                    </div>
                </div>
                <div class="r-bottom"></div>
            </div>
        </div>
    </div>
    <div class="bottom"></div>
</div>

CSS CODE:

.tooltip {
 position:relative;
 z-index:24;
 text-decoration:none;
}

.tooltip:hover {
 z-index:25;
 background:none;
}

.tooltip div.bubble {
 z-index:26;
 display:none;
 background:none;
}

.tooltip:hover div.bubble {
 display:block;
 position:absolute;
 top:-375px;
 left:-148px;
 border:none;
 text-align:left;
 width:400px;
}

.tooltip:hover div.bubble div.top {
 float:left;
 font-size:0;
 width:400px;
 height:12px;
 background-image:url('images/bubble-top.gif');
 background-position:top left;
 background-repeat:no-repeat;
}

.tooltip:hover div.bubble div.bottom {
 float:left;
 width:400px;
 height:12px;
 background-image:url('images/bubble-bottom.gif');
 background-position:top left;
 background-repeat:no-repeat;
}

.tooltip:hover div.bubble div.middle {
 float:left;
 width:400px;
 background-image:url('images/bubble-middle.gif');
 background-position:top left;
 background-repeat:repeat-y;
}

.tooltip:hover div.bubble div.middle * {
 font-size:14px;
}

.tooltip:hover div.bubble div.middle div.left {
 float:left;
 left:12px;
 width:182px;
 top:0px;
}

.tooltip:hover div.bubble div.middle div.right {
 float:left;
 left:24px;
 width:182px;
 top:0px;
}

.tooltip:hover div.bubble div.middle div.left p, .tooltip:hover div.bubble div.middle div.right p {
 clear:both;
 margin-bottom:0px;
}

.tooltip:hover div.bubble div.middle div.left p.section, .tooltip:hover div.bubble div.middle div.right p.section {
 clear:both;
 margin-bottom:10px;
}

.tooltip:hover div.bubble div.middle div.left p.availability {
 text-align:center;
}

.tooltip:hover div.bubble div.middle div.right div.review-left *, .tooltip:hover div.bubble div.middle div.right div.review-right * {
 font-size:12px;
}

.tooltip:hover div.bubble div.middle div.right div.review-left div.l-top {
 font-size:0;
 width:182px;
 height:10px;
 background-image:url('images/review-bubble-left-top.gif');
 background-position:top left;
 background-repeat:no-repeat;
}

.tooltip:hover div.bubble div.middle div.right div.review-left div.l-bottom {
 width:182px;
 height:18px;
 background-image:url('images/review-bubble-left-bottom.gif');
 background-position:top left;
 background-repeat:no-repeat;
 margin-bottom:10px;
}

.tooltip:hover div.bubble div.middle div.right div.review-left div.l-middle {
 width:182px;
 background-image:url('images/review-bubble-left-middle.gif');
 background-position:top left;
 background-repeat:repeat-y;
}

.tooltip:hover div.bubble div.middle div.right div.review-right div.r-top {
 font-size:0;
 width:182px;
 height:10px;
 background-image:url('images/review-bubble-right-top.gif');
 background-position:top left;
 background-repeat:no-repeat;
}

.tooltip:hover div.bubble div.middle div.right div.review-right div.r-bottom {
 width:182px;
 height:18px;
 background-image:url('images/review-bubble-right-bottom.gif');
 background-position:top left;
 background-repeat:no-repeat;
 margin-bottom:10px;
}

.tooltip:hover div.bubble div.middle div.right div.review-right div.r-middle {
 width:182px;
 background-image:url('images/review-bubble-right-middle.gif');
 background-position:top left;
 background-repeat:repeat-y;
}

div.review {
 padding:0px 10px 0px 10px;
}

Please help. I've spent the last 2 weeks trying to solve this but I can't seem to make this display right in IE6. Also, if I change the top property in the CSS .bubble to use the bottom property instead, the whole popup disappears!!

Please help!

Tony

ansaurus

tags:

views:

answers:

Popup Div Shifted Up in IE6

related questions