Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

search cloudRandom Searches
random top 40

PZ3 Inside IE Tables

Filed in:CSS
Web Dev·XHTML

PZ3 Inside IE Tables

February 25th, 2008  · stk

Photo-Caption Zoom images have been problematic in IE tables. It's yet another failure of IE6 and IE7. However, I've spent some time and made a work-a-round that yields good cross-browser results (and overcomes the IE tables problem). Have a look -

Photo-Caption Zoom Inside an Internet Explorer Table

You like Photo-caption Zoom. You've finally found a valid, pure-CSS, easy-to-use technique that shows both a thumbnail and zoom-able detailed image (along with a caption), without your visitor having to leave a page or suffer through another pop-up window. You deploy it inside of a table and suddenly, when you view it in Internet Explorer, it doesn't work right.

I've received many emails and comments from people about Photo-caption Zoom not working inside an IE table. Up until now, the only "solution" was to say, "don't use tables", quickly followed by "Internet Explorer sucks". (I had one desperate client for whom I "welded-on" a series of Photo-zoom DIVs to the edge of a table. It was my first stab at a work-a-round and it worked fine, until the font size was changed).

While it's comforting to me that the problem isn't the Photo-caption Zoom code (it's an Internet Explorer problem), this isn't much solace for anyone wanting to use it. What's a person to do?

A Solution to the Internet Explorer Table Problem

I recently had a play with Photo-zoom inside of tables. I was able to isolate the Internet Explorer problem and find a work-a-round. It side-steps the IE tables problem and also works in other browsers. Have a look.

The table below contains Photo-caption Zoom images. It works in both IE6 and IE7 (as well as Opera9, Netscape9 and Firefox2). Yay! Finally - a way to use PZ3 inside tables.

Product Description Price Avail

ThermalTake TMG A1 CPU Fan

35.14 CFM max flow at speeds between 300-2,500 RPM. Quiet, reliable cooling.

The TMG A1 uses a frameless fan design that virtually eliminates noise-producing turbulance. Runs quiet at 16 dBA. Supports AMD PWM FSC specs.

$49.99

In-stock

Thermaltake Silent Case Fan (White)

63.3 CPM at 1600 RPM. This DC, 120mm case fan is very quiet (16 dBA).

Count on Thermaltake to make the worlds best cooling products. The Silent CAT fan is an intelligent choice. It runs quiet and is affordable.

$9.99

In-stock

To learn more about the Internet Explorer tables problem and work-a-round, read on ...

The Problem with Internet Explorer Tables

If you are trying to deploy a Photo-caption Zoom image inside of a table, you should first ask yourself two questions:

Am I using tables for layout?
Why doesn't it work in Internet Explorer?

Tables were never designed as a layout tool and aren't recommended for this purpose (for many reasons) - read this article for a full discussion (or Google "don't use tables"). Tables are designed for tabular data. Period.

If you're using tables for layout - don't. (Boom. The PZ3 inside tables problem is solved and (ultimately) you'll be saving yourself a lot of grief down the road.

If you are using tables to display tabular data and one of those columns (or rows) happens to contain a PZ3 image, you'll quickly discover that it doesn't function very well in Internet Explorer.

The table below is an example of such a straightforward construction. If you're viewing the page with Opera, Firefox or Netscape, you won't likely see a problem - it will look like the table on the front page. If you're viewing it with Internet Explorer, however, you'll note that the thumbnail image is contained in an over-sized cell and that it may behave strangely, when moused over (the image will expand, but the cell may contract).

Photo Zoom Product Description Price Avail

ThermalTake TMG A1 CPU Fan

35.14 CFM max flow at speeds between 300-2,500 RPM. Quiet, reliable cooling.

The TMG A1 uses a frameless fan design that virtually eliminates noise-producing turbulance. Runs quiet at 16 dBA. Supports AMD PWM FSC specs.

$49.99

In-stock

Thermaltake Silent Case Fan (White)

63.3 CPM at 1600 RPM. This DC, 120mm case fan is very quiet (16 dBA).

Count on Thermaltake to make the worlds best cooling products. The Silent CAT fan is an intelligent choice. It runs quiet and is affordable.

$9.99

In-stock

The bottom line - It just doesn't look right and how badly it behaves, depends on a number of factors: the size of the table, the size of the thumbnail and zoomed image, number of rows, etc.

Formulating a Work-a-Round

Starting Table Code

<table>
  <tr>
    <td> [PZ3 XHTML code] </td>
    <td> text </td>
    <td> text </td>
    <td> text </td>
  </tr>
</table>

The starting point for investigation was the table above, a straight-forward table construct into which I placed the Photo-caption Zoom code and let it rip. The bare-bones XHTML code for a PZ3 row of this construct, is shown on the right.

Prior to my investigation, I'd seen successful deployment of PZ3 inside of tables, which only served to confuse my understanding of this issue. How can it work in one deployment, but not another?

It didn't take long to recognize that the problem with Internet Explorer lies with the table-cell that contains the PZ3 image. Internet Explorer is incorrectly determining the width of the table-cell by the size of the zoomed image and margins, rather than by the thumbnail image and margins. Then, when one hovers over the thumbnail, the zoomed images is positioned absolutely (pulling it out of the document flow) and the table-cell collapses.

If the table-cell is larger than the full-sized, zoomed image (it contains additional text or is other elements), there's no problem and PZ3 appears to function as expected. Conversely, if the table-cell contains only a PZ3 thumbnail, then IE fails miserably, often and quite thoroughly.

Making a work-a-round boiled down to this: "How can one make a table-cell LOOK small, but BE big?"

I tried a number of different solutions. The first, of course, was the welded DIV construct, which didn't stand up to a font-size change (and also involved complex coding). The second involved nesting the table so that the entire table was contained within a single table-cell. I was on the right track.

Nested Tables Solution

<table>
  <tr>
    <td>  [PZ3 XHTML code]
      <table>
        <tr>
          <td> text </td>
          <td> text </td>
          <td> text </td>
        </tr>
      <table>
    </td>
  </tr>
<table>

The final solution involves nesting a table on each row and the barebones XHTML is shown here. The PZ3 image is floated to the left side of a table-cell that's as wide as the entire table, because it contains the rest of the columns of data, neatly stuffed into another table.

Styling the Final Solution

While the solution circumvents the Internet Explorer table-cell width problem, it creates some styling challenges, which makes the deployment more difficult than it should be. Dang. Why does Internet Explorer have to make life so difficult, eh?

Because each row contains a table, there is no easy way to apply a border all the tables and have it look right. This was solved with some (IE-only) negative margining, left-side borders and applying a "height" directive to the inner table row - for situations where the thumbnail height is greater than the text cells. Matching column borders between rows was a challenge, for the same reason. The solution here is to use same-width thumbnail images, apply percentage widths to the inner table cells, utilize an image for the "Photo Zoom" column title and use a single inner table for the first two rows. A background color in the header row shows ugly gaps. Using a background image, repeated horizontally and adjusting the height makes it all look pretty.

The end result appears identical in the various browsers. The example here is a liquid table that withstands shrinking and expanding. The shadow is a bit of an extra touch and I've left it off in the example code. The table also holds up to font size increases and decreases, although you will notice that the "Photo Zoom" title remains the same size, because it's an image.

Bottom Line

It's too bad that developers have to work so hard at overcoming Internet Explorer's shortcomings. Even though the work-a-round is more complex than it should be, it is XHTML/CSS-valid, looks nearly identical in a wide variety of browsers and it should work for applications where one might want to show Photo-caption Zoom images along with other tabular data.

Below, you'll find the XHTML and CSS code used for the work-a-round shown here. I've removed the shadow, but everything else is the same.

Cut'n-paste XHTML & CSS code

The XHTML code is posted in the block below. Have a look or cut'n-paste it. I've also included a ZIP file, at the bottom, that contains all the files that you would need to recreate the PZ3 IE Table demo.

Code:

<!-- begin PZ3 IE Table -->  
 
<table class="PZtbl">  
  <tr>  
    <td>  
 
<div class="PZwrap">  
<img class="PZhead" src="head_img.gif" alt="photo zoom" title="" />  
<div class="PZ3zoom PZ3-l Bdr Cap noLnk" style="width:100px; height:100px;"><a href="http://randsco.com/noJS.html" onclick="return false"><img src="TMG-A1.jpg" alt="photo-caption zoom image in a table" title="" /><span class="PZ31cap" style="width:350px;"><span class="PZ3inr"><strong>The <acronym title=" Photo-caption Zoom version 3 ">PZ3</acronym> Caption: </strong> Here is where you can add relevant information with the detailed image.  Wax lyrical about your product.  The text doesn't clutter the main page and search engines can index it!</span></span></a></div>  
</div><!--PZwrap-->  
 
     <table class="inrTbl">  
       <tr class="headings">  
         <td class="desc">  
           Product Description  
         </td>  
         <td class="price">  
           Price  
         </td>  
         <td class="avail">  
           Avail  
         </td>  
       </tr>  
       <tr>  
         <td class="desc">  
           <p><strong>ThermalTake TMG A1 CPU Fan</strong></p>  
           <p class="details">35.14 <acronym title=" Cubic Feet per Minute ">CFM</acronym> max flow at speeds between 300-2,500 <acronym title=" Revolutions Per Minute ">RPM</acronym>. Quiet, reliable cooling.</p>  
           <p class="details">The TMG A1 uses a <em>frameless fan design</em> that virtually eliminates noise-producing turbulance.  Runs quiet at 16 dBA.  Supports AMD PWM FSC specs.</p>  
         </td>  
         <td class="price">      
           <p>$49.99</p>  
         </td>  
         <td class="avail">  
           <p>In-stock</p>  
         </td>  
        </tr>  
      </table>  
 
    </td>  
  </tr>  
 
  <tr>  
    <td>  
 
<div class="PZwrap">  
<div class="PZ3zoom PZ3-l Bdr Cap noLnk" style="width:100px; height:100px;"><a href="http://randsco.com/noJS.html" onclick="return false"><img src="WhiteCaseFan.jpg" alt="photo-caption zoom image in a table" title="" /><span class="PZ31cap" style="width:350px;"><span class="PZ3inr"><strong>Photo-caption Zoom: </strong> One benefit of using PZ3 is having the ability to add descriptive text to a photo.  This helps provide additional information about a product, or explains more detail about the image.</span></span></a></div>  
</div><!--PZwrap-->  
 
     <table class="inrTbl">  
       <tr>  
         <td class="desc">  
           <p><strong>Thermaltake Silent Case Fan (White)</strong></p>  
           <p class="details">63.3 <acronym title=" Cubic Feet per Minute ">CPM</acronym> at 1600 <acronym title=" Revolutions Per Minute ">RPM</acronym>.  This <acronym title=" Direct Current ">DC</acronym>, 120mm case fan is very quiet (16 dBA).</p>  
           <p class="details">Count on Thermaltake to make the <em>worlds best cooling products</em>. The Silent CAT fan is an intelligent choice.  It runs quiet and is affordable.</p>  
         </td>  
         <td class="price">  
           <p>$9.99</p>  
         </td>  
         <td class="avail">  
           <p>In-stock</p>  
         </td>  
        </tr>  
      </table>  
 
    </td>  
  </tr>  
</table>  
 
<!-- end PZ3 IE table - swiped from:  
http://randsco.com/index.php/2008/02/25/pz3_inside_ie_tables -->  
 
 

 

The CSS code is posted in the block below. Have a look or cut'n-paste it. I've also included a ZIP file, at the bottom, that contains all the files that you would need to recreate the PZ3 IE Table demo.

Code:

 
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
* PZ3 inside Tables  
*/  
 
.PZshdw {  
  border-right:5px solid #8798a9;  
  border-bottom:5px solid #8798a9;  
  margin:0 0 15px 0;  
  }  
.PZtbl {  
  border:1px solid #000;  
  margin:-5px 0 0 -5px;  
  padding:0;  
  border-collapse:collapse;  
  background:#eef url(head_bg.gif) repeat-x;  
  color:#336;  
}  
.PZtbl td {  
  border:1px solid #000;  
}  
.PZtbl .PZwrap {  
  float:left;  
  margin:7px 10px 0 20px;  
}  
.PZtbl .PZwrap .PZhead {  
  display:block;  
  margin:-8px 0 7px 0  
}  
*:first-child+html .PZtbl .inrTbl {  
  margin:-3px 0;  /* ie7 */  
}  
.PZtbl .inrTbl .headings {  
  color:#fff;  
  background:inherit;  
  font-weight:bold;  
  }  
.PZtbl .inrTbl .headings td {  
  text-align:center;  
  height:22px;  
  /* use for getting bg image */  
  /* border-bottom:1px solid #000;  
     background-color:#369;   */  
}  
.PZtbl .inrTbl td {  
  border-width: 0 0 0 1px;  
  width:70%;  
  height:115px;  
}  
.PZtbl .inrTbl td+td,  
.PZtbl .inrTbl td+td+td {  
  width:15%;  
  text-align:center;  
}  
.PZtbl .inrTbl td p {  
  width:95%;  
  margin:5px auto;  
}  
.PZtbl .inrTbl td p.details {  
  font-size:.8em;  
}  
/* extra IE6 stuff */  
 
* html .PZtbl .inrTbl {  
  margin:-3px 0;  
}  
* html .PZtbl .inrTbl .price,  
* html .PZtbl .inrTbl .avail {  
  width:15%;  
}  
* html .PZtbl .inrTbl td.price p,  
* html .PZtbl .inrTbl td.avail p {  
  text-align:center;  
}  
 
/*  
    Note: You'll also need the PZ3 CSS, which isn't included here.  
    You can find the latest PZ3 CSS code on this page:  
    http://randsco.com/pz3  
 
    Copyright Policy:  
    Free for personal use.  
    Donation required for commercial use.  
    http://randsco.com/copyright  
*/  
 

 

Zipping it Up

Just click this self-extracting ZIP file [ 63KB ] to save a copy of the entire demo. It contains an XHTML-strict page that deploys the above XHTML code and calls two CSS files (the code block above and the PZ3 CSS). It also contains all the images that are used in this demo. Just unzip it to a directory on a server and you should be good to go.

Considerations

To keep things easy, you'll likely want to keep all the PZ3 thumbnails the same width. This will insure that the first "column" lines up correctly. Likewise, whatever width you use for your thumbnails, you'll want to use as the width (plus 2px) for the column title image (the 2px accounts for the 1px border on the thumbs). The way I made the title image was to insert the text as the title for the second column, take a screen dump, crop it and turn it into a transparent GIF file. Easy.

In addition to the PZ3 column title image, you'll need a first-row background image. The way to make this is is similar - change the CSS to include a background color and bottom-border for the top row, take a screen dump (after you've gotten the row height as you want) and then crop it down.

That should be it. All those files are included in the self-extracting ZIP. It won't take you long to modify the code and customize it for your needs. If you end up using it on a site, just remember that Photo-caption Zoom is free for personal use and a donation is required commercial use. Read more about our copyright policy.

If you improve on the code, use it in an interesting deployment or just want to show off what you've done with it ... please let me know, I'm always eager to see PZ3 used in the real world.

(Permalink)
Views: 8599 views
6 Comments · GuestBook
default pin-it button
Updated: 25-Feb-2008
Web View Count: 8599 viewsLast Web Update: 25-Feb-2008

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.


Subscribe to Comments

Auto convert line breaks to <br />

1.flag Gary Comment
02/28/08
Nice post Scott,

Just thought I would catch up in my lunch break. I love all things to do with photo's / PZ etc.

I didn't think of using PZ3 in tables, Gosh I will have to learn how to code tables now!

The last time I used a table was (and maybe I shouldn't admit this) I use to use Frontpage (shock horror, there - I have come out at last and said it)

Like your self -extracting zip 'n' installer thingy ;)

Gz
2.flag Elpis2000 Comment
03/26/08
great job.
I have adapted your code my test site on http://shop.dossa.co.kr/products-page/?product_id=31071
. But zoom image not displayed over table.
3.flag stk Comment
03/26/08
Elpis2000 - Doesn't look like you have it quite right. The PZ3 image is in a table-cell with a specific height/width, but the PZ3 cell doesn't contain the rest of the table-row (which is the trick to avoiding the problem you're seeing.

Look at the code a bit closer. ;)

If you're able to get it going and deployed, I must remind you that PZ3 is free for personal use only. (A donation is required for a commercial website).
4.flag Rich Comment
07/12/10
I have now started to implement this on a test auction website based on the Enuuk phpAuction platform.

There is a much easier solution to the IE problem than using a nested table for each row !

Add table-layout: fixed;
to the class for your overall table.
You can then specify the widths for each of the columns and even IE will not change the width
5.flag stk Comment
07/12/10
Rich - LOL ... I don't think I've ever seen/used the table-layout CSS property. Wow. I'm eager to test out your theory. Thanks!
6.flag Vijer Comment
02/04/11
Scott,

I can confirm Rich's fix works (table-layour:fixed; added to the style of the containing table) corrected the problem in IE. There are still some peculiarities, but I believe these are all IE formatting issues (all the cells are right justified).

As we all know IE is horrible. When I set up computers for anyone the first thing I do is install Firefox and hide IE.