Hey,

I'm having a problem in IE6 for example on the following page:

http://www.ladisfruteria.nl/shop/Olijfolie...zijn-c-250.html

It happens on each category productlist page (categories are shown on left side).
The last product is shown wrong. The image shifts below the content. In some other categories, there is also a description viewable when you click "toon meer productinfo". If you do that, that description is below the content, and the image is correct. Somehow, always the last div in the last product info shifts below the parent div (#mainContentTeksten).

I was kinda hoping someone would notice a mistake. I've tried all kinds of things, f.e. removing floats, adding breaks with "clear:both", trying to put the entire thing in a 2 columned table, changing the width of the divs, the size of the short descriptions, but it doesn't fix it. Am i missing something?

Hope you can help. Thanks!

Your code is pretty twisted. As far as I can gather, this is your structure:

Each product consists of a <div>. Inside the <div> are two more <div>s: one for the text stuff, and one for the product picture. Inside the text <div> are two <table>s (!), one for the price & "add it" graphic, and one for the other stuff.

I would be inclined to simplify your structure. I don't understand the advantage of this weird structure.

I also suggest validating your code. Probably this won't fix the issue here, but it might. Malformed code often has really surprising consequences. Before you condemn IE, check that your own code is right.

There are also a few "magic bullets" you could try. Set "overflow: auto" (or "hidden") on the container. Try giving elements hasLayout. These things might work.

IE is known to have a particularly nasty selection of float bugs. You might like to go through this list.

Hey Mike, thanks for your comments.

Well, I'm actually not condemning IE, I am simply stating I'm having a problem. Therefor, i agree that something is wrong with the code, but i hoped someone would have a "eureka" moment, and point me to it.

I know the structure can seem a bit overwhelming, but we have a standard shopping system, and someone else delivered a plain html template, which i built into the system. It wasn't really my job to rewrite the code i was given, but i think there's no other way. The system works with tables and the delivered design was by using divs.

Anyway, i'll first try your suggestion on the overflow and try validating it some more. If that doesn't work, i'll try rewriting it.

Thanks so far.

Oh don't worry, I condemn IE all the time. It's what IE deserves. I just validate my code first. But I think it's very likely that IE is to blame here, and not your code.

When dealing with an IE bug, you don't necessarily need to understand it. Often it's better just to shrug your shoulders, and hack around it. Don't try to reason with IE; just bodge it. You can safely send IE6 all the CSS hacks you need with conditional comments.

I forgot to mention: the site looks gorgeous!

Haha, well, yeah, i condemn IE too all the time But this time, i agree on the structure problem you mentioned as well. It's not all very obvious which makes it hard to debug it. I tried some overflow settings, but it doesn't work. I think i tried it before too. I'll go try to validate it some more now, but my hopes are low. I'm not going to validate the flash object issues btw.

Yeah, it looks great doesn't it? I wish i had designed it myself.

Well.... after fixing some issues, and temporarily removing the flash objects..


Who would have thought........ no difference.

I'll rewrite it. Keep you posted.

After almost being done rewriting, i found out what caused the problem. There was a <form></form> outside the content div, but inside that content wrapper, which caused the unwanted behaviour. :S
I went back to the original code, did some rewriting on the form tag placement, and all seems to be good.

Damn, ridiculous error!

How utterly bizarre.

Oh well, IE6 is like that. And occasionally, so are other browsers.

For example: I have an empty <div></div> in my site's footer. In theory, it should do absolutely nothing; in practice, it fixes a bizarre Firefox bug. I tried it out of desperation and a hunch, and it worked. Who am I to argue?


**EDIT**

That's interesting. My <div></div> appears no longer to be necessary. Perhaps they fixed that bug, whatever it was.

Commenting your code is good.

This post has been edited by MikeHopley: Jun 2 2008, 07:19 PM

Sorry I missed this post today velo. I would have loved to try and help. Glad you got it resolved.

Thanks anyway.
But who would have thought the form element was to blame! *sigh*

The site 'll go live tomorrow i think.