IE7/6 bug I can't fix?

HTML & CSS
1

IE7/6 bug I can’t fix? Here is my test page.

In IE7/6 the zoomed box splits until it opens. Then splits again once closed. In all others the zooming is fluid. I believe this is a CSS issue probably. Maybe something to do with the table/tr/td that are wrapped around the image by the script. I thought I was close to fixing after hours of debugging. It looked like a haslayout issue on the #zoom_content div (inserted by the script also). But now this morning that doesnt seem to fix it (buggy IEtester!). My limited knowledge of tables prevents me from finding the true cure. Thanks for your help!

PS. Even the creators main demo does this on his text links. http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/

2

Opens it in Opera…

Is this page supposed to do something?!?

Opens it in FF… Oh… Lightbox. GAH.

My advice, rip out that lightbox garbage and let the user just open the blasted image – that’s what I scream at the screen every time I come across a site with it: “Oh for crying out loud, just let me open the bloody image” – actually, I’m a lot more profane than that.

Just another of those “blights upon the internet” – as evidenced by the page with 12 characters of plaintext, a 26k image file and NOTHING else that comes out to 102k in 13 files… even compressed it’s the size I allocate for building an entire PAGE on a site.

3

It works in my Opera. I’m not going to take your advice.

4

What I can see is a poorly written … XHTML STRICT!!! And, as far as I know that DTD doesn’t go well with invalid markup.

You have


<img src="../../images/family-photo.jpg" alt="Family-Photo">

when you should have self closing tag.

You also don’t have a </body> for <body>.

Run your page through a validator first, it may prove to be just invalid code that’s messing up with your mojo :wink:

And I have to side with ds60. Not that it uses JS library, but because the markup for zoom effect relies on… tables ?! Very wrong…

5

Just a freaking test page. OK here is the test page all valid like. And as expected the problem is still there.

6

  1. A test page has to be valid as well.

  2. Your’s is still not valid.

  3. The problem is related to the table element it uses for the effect. You should reffer to the original developer or take a better look at the source code he’s offering as it seems you’re doing something wrong to that concern.

7

The anchor is not wrapped in a block. That is not causing any problem so you mine as well talk about the moon while your at it. Yes as I mentioned the problem is probably the table. 5 posts later we are back at my original question.

8

Well, if you really wanted your problem solved, you would’ve made your example starting from those on the http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/.

Or ask the author about it.

9

Hi Eric,

You can make it display much better in iE6/7 if you add this:


#zoom_content {height:100%}

That still leaves a tiny gap in the edge.

You can clear all gaps with the following but then it stretches the table higher in all IE.


#zoom_table td.mm {height:100%}
10

Thanks a lot Paul for looking! Although, I’m sorry I should of updated my status. I found the solution. It was actually a JS solution. Like in some of the authors links, I added…

$(document).ready(function() {$(‘a.zoom’).fancyZoom({scaleImg: true, closeOnClick: true});});

That fixes IE and zooms the image in and out - not just a white box. Problem with that though is that it sets the image to width 100% which slightly blurs the image. But I found a fix for that too by adjusting the padding on the #zoom_content to 10px 8px and/or adding dimensions to the img tag.

I will test your de-bugging code out too and see how it looks. Thanks - happy holidays!