asked on

image hovering UNDER td in IE

I believe I'm having a very similar problem with my own hoverbox function (see related question/solution), but i can't figure out how to apply the same solution to my own situation. Basically, in IE the div pops under the table and is displayed behind some of the other table cells.

I'm praying that some good soul can provide some insight.

Below is a code excerpt.

My test page is here: http://dev.ccdmd.qc.ca/monde/hoverboxTest3.html

CSS
--------------------
table#thumbnails { 
clear: both;
float: left;
width: 848px;
margin: 15px 0 15px 80px;
}
	
table.thumb { 
clear: both;
float: left;
width: 115px;
}
	
table.thumb td {vertical-align: bottom; padding: 0 20px 0 0; color: #242425;}
 
div.imgBox {	
position: relative;
clear: both;
width: 109px;
height: auto;
border: 1px #A8AAAB solid; 
padding: 2px;
}
 
div.imgBox a .preview {
position: absolute;
display: block;
left: -1px; top: -1px;
width: 1px;
height: 1px;
}
 
 
div.imgBox a.thumbViewer, div.imgBox a.thumbViewer:visited {
display: block;
width: 109px;
left: 0;top: 0;
text-decoration: none;
background: #FFFFFF;
}
 
div.imgBox a.thumbViewer:hover {
background-color: #8C97A3;
color: #000000;
text-decoration: none;
}
 
div.imgBox a.thumbViewer:hover .preview {
display: block;
position: absolute;
width: 278px;
height: auto;
top: -40px; left: -50px;
border: 1px #a8aaab solid;
z-index: 9999;
}
 
--------------------------
HTML
-------------------------
 
<table cellspacing="0" cellpadding="0" id="thumbnails">
<tr>	
<td>
 <table cellspacing="0" cellpadding="0" class="thumb">
 <tr>	
  <td>
     <div class="imgBox">
	<a href="#" class="thumbViewer"><img src="http://dev.ccdmd.qc.ca/monde/media/image109/192.jpg" width="109" height="82" alt="Titre de l'image" /><img src="http://dev.ccdmd.qc.ca/monde/media/image278/192.jpg" width="278" height="185" alt="Image agrandie" class="preview" /></a>
    </div>
  </td>
</tr>
</table>
	
</td>			
</tr>
</table>

Open in new window

scrathcyboy

If you want this to work cross browser, it seems to me you will either have to put each thumbnail and link in its own DIV and then on hover over the thumbnail, create another DIV with a higher z index than all the thumbnail DIVs, or else put them on separate lines. In other words, if you are using table cells to define the thumbnail positions and links, the DIVs that lie WITHIN each TD cell will not overwrite the other TD cells correctly -- which is what you have.

In other words, for this fuctionality, use all DIVs and not TD cells.

webfairy8

ASKER

Thank you. I see what you are saying.

The only reason I have laid out the thumbnails in divs and then in separate table cells is so they call all be vertically aligned from the bottom (these thumbnails will be of varying heights). The information that appears in the next row (title and img info) also needs to be top aligned within the cell.

I laid out 3 different images in my example so you can see what I mean.
http://dev.ccdmd.qc.ca/monde/hoverboxTest3.html

If that's my only option, is there a way to achive this with divs alone? I was having a very hard time vertically aligning things within a div.

Please advise

ASKER CERTIFIED SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

webfairy8

ASKER

I'm having difficulty making sense of what you're suggesting.
I understand the part about putting the mouseover image in a separate td in a row below.
However my mouseover images are now visible and since this function was working when the mouseover images were contained within <div class="imgBox"></div>, they no longer have any parent element to dictate how they ought to behave.

The sad thing is.. I'm not sure I understand this method and what to do next. :-/
I hope I'm not wearing out your patience too thin.

Now the html looks like this:

My new test page is http://dev.ccdmd.qc.ca/monde/hoverboxTest4.html

Thx for your help

webfairy8

ASKER

I wasn't able to understand the solution in a reasonable amount of time. Since I'm under a deadline.. I had to come up with an alternative. I wish replies would come faster, even though I understand I'm not the only member with a question. Would I get speedier replies if I was paying member? I was waiting to see what the delay was like (as well as quality of expertise) before signing up. I do like this pay-fo-expertise concept, but only if I can effectively rely on it.

Thanks