Floated images don't display in IE

Why won't inline css floated images appear in IE

[Shannon]

Description:

In IE there is only 1 visible image of 4 images on the page. The 3 that do not appear are floated either right or left.

They do appear in Firefox and I believe other browsers...

I'm using code like this:

<img src="http://www.site.com/image.jpg" style="float: right; border: 1px solid black; padding: 5px; margin: 5px;" alt="alt" />

Thanks

[createErrorMsg]

All floated objects must have a width, especially in IE. In addition, check the container those floated images are in and set it to float, too (don't forget it's width).

May not solve the problem but it's a place to start.

[Shannon]

I added a width to the images and a float: none to the container to no avail

Weird thing... the images display for a split second when I refresh the page, but then disappear.

[createErrorMsg]

float: none

What about float:left or float:right?

Are there any absolute positioned elements that might be covering them up?

What's the context these images are in? Can you post more code? HTML and CSS for relevant context?

[4css]

There is a tutorial for images Here [realworldstyle.com]
That is pretty good for you to read.

[Shannon]

got it... by floating the container left.... i have no idea what the sense in that is... but ok :)

[createErrorMsg]

i have no idea what the sense in that is

The sense in it is this: IE has trouble containing floated elements. Namely, it doesn't seem to be able to stretch a container to hold floated children in that container. Tomake it do this, you must set the container to float, as well. This induces IE to stretch the floated container to hold all the floats.

On your page, because the container was not floated, it was making the container only big enough to hold one image (I'm guessing the container had no specified width, but even thismay not be true). By applying float:left (float:none doesn't work because it sets the element as not floated), you make the container reach out and wrap around ALL the floats.

Bottom line, if you have more than one float in a container, float the container, too.

[Shannon]

thanks much :)