Solved

image hovering UNDER td in IE

Posted on 2008-10-25
5
761 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 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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

746 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now