I'm a bit puzzled on this one:

http://future-visions.co.uk/cej/inde...page=bracelets

For some reason, IE displays the product box correctly, however, Firefox renders the page with the product picture and information not actually inside the grey box.

I've prowled through the CSS to no end, but I can't figure out what's stopping this from displaying correctly in Firefox. Any ideas, anyone?

Thanks for any help given.

I'm new to css and by far no expert but at first glance I'm guessing the problem has to do with the fact that you did not specify a height for prod-box.

Hope this helps,
-Phaaze

(Edit: The other thing you could try if the image is dynamic, therefore different on each page, is giving prod-box a display: table; - I don't know if this is good common practice or not but I do believe it works.)

Your solution for 'display: table' nearly had me thinking I might have sorted it! But, although it isn't supported by IE, that did fix the problem by displaying correctly in both Firefox and IE, but didn't work just right in Safari.

Back to the drawing board? Thanks though, great help!

Clear your left float immediately after your prod-desc paragraph.

Something like <div style="clear: left;"></div>

Also, you should specify a width and height for your image. It won't solve this particular issue; it's just good practice.

Hi ADAM WD,

That's the right solution, and it works. Is there any chance you could explain why that works?

I can specify widths for those images, because all the product images will have fixed widths, but the heights will differ.

Because any time you use floats, Firefox (and I believe most other browsers) require them to be cleared. I've never really been sure why that is, other than because floats tend to "float" outside of the content area (hence their name).

LNR would probably be able to come up with a better explanation or link than I can.