Solved

image hovering UNDER td in IE

Posted on 2008-10-25
5
770 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 400 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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

623 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