Mozilla images and css

Hello everyone,

I'm having trouble creating a good layout using css. I've used it quite a bit but I still think I'm a newbie so this might seem a bit silly to some.

The problem is I want to create an image gallery, each item is inside a containing div, each gallery image is contained inside this with its own div and a div below containing text. I want this to give me a fixed height for the whole box so the page looks uniform (like a table) and the text below the image always appears in the same place. This works fine in IE but mozilla is broken (I'm sure its the other way round but not to worry). It seems so simple. If it had been done in tables I would have finished ages ago but it seems css wants to hurt me:mad:

The image in mozilla seems to float above the div (I dont have any float elements set) The div doesnt want to stretch to fill for its contents. Where am I going wrong - have I missed something major? can it be fixed at all? am I just stupid? its driving me nuts!

If I set the height I'm losing the option to make it bigger depending on the size of the image. Is there anything that can be done?

A link and code would definitely be helpful in tracking down this problem.

In general though, Mozilla has a really good implementation of the CSS spec so if you're seeing problems in FF more than likely the problem is in your code.

Yeah, it would be nice to have some example code, mate, or even better, a hot-link to the page itself. From what I can tell, though, you have set margins or padding incorrectly. Also, I think you probably should use floats to accomplish what you want.

My School Portfolio (http://icidweb.dnsalias.com/homework/) uses a float, and this isn't exactly what you explained, it seems close enough. I can't give any more help than that without some code to look at. My school requires homework to be live, and they wanted it set up as a portfolio, but I would never claim any of that stuff... it is a bunch of crap...

http://jlhaslip.trap17.com/samples/image_display/image_display_3col.html

Like that?

http://jlhaslip.trap17.com/samples/image_display/image_display_3col.html

Like that?

That page looks fine for me on FF 2.0.0.7. What browser are you seeing this behavior on?

Also, it's worth noting that your interpretation of what overflow should do is incorrect. According to the CSS spec, when an element has a firm width and content extends outside of its boundary, the content is supposed to flow out of the box without affecting the container's dimensions. This behavior can be modified by different overflow settings (hidden, scroll, etc.), but it is incorrect behavior for container elements to expand their width to accommodate the overflown content.

IE incorrectly expands the size of the parent blocks to accommodate overflown content. This really is annoying as it can often break float-based layouts, but that's the hand Microsoft dealt us.

I also see no problems. FF 2.0.0 and 2.0.0.7

I will suggest one more thing. You seem to have a bit of divitis.

As for your image problem I don' see anything going wrong...