Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

image hovering UNDER td in IE

Posted on 2008-10-25
5
Medium Priority
?
775 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:webfairy8
  • 3
  • 2
5 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22806220
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.
0
 

Author Comment

by:webfairy8
ID: 22807165
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
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 1200 total points
ID: 22808774
You will have a hard time vertically aligning DIVs with different size images.  THe other way to accomplish this is to have a table cell below the three with thumbnails, with a colspan=3, and put the mouseover image into that cell, for all three thumbnail cells.  With the big image in a different TR-TD compartment, you avoid the problem you are now seeing, where table cells won't take dominance over adjacent ones on mouseover.
0
 

Author Comment

by:webfairy8
ID: 22812207
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
0
 

Author Closing Comment

by:webfairy8
ID: 31510348
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
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question