Disappearing Images

Aligned images disappear in IE6.

[mjlacore]

I finally have a 3-column layout with a fluid center column that so far works perfectly in IE6 and NS7, except for one mysterious flaw.

The three columns (DIVs named "leftbar" "centercontent" and "rightbar") are themselves contained in another DIV. I've added some headings, placeholder text, lists, and anchors to the centercontent DIV just to test styling and such. As I said, all works well - until I try to add an image into that "centercontent" DIV.

If I add the image without any alignment set, it appears as expected in both IE6 and NS7. However, as soon as I attempt to align it using the align attribute on the image itself, it disappears behind the "centercontent" DIV in IE6. I know this because if I reset the DIV's background to transparent the image is there, with all the DIV content over the top of it. It works fine in NS7.

Any thoughts on what the problem might be? Below is the relevant CSS, in case that is of some help.

#leftbar, #rightbar {
position: absolute;
top:1em;
margin: 0 10px;
padding: 5px;
background: #ffffff;
border:1px solid #000;
width:200px;
}

#leftbar {
left: 0;
}

#rightbar {
right: 0;
}

#centercontent {
position: relative;
background:#88bbbb;
top: 1em;
margin-left: 230px;
margin-right:230px;
padding: 5px;
border:1px solid #000;
}

Thanks,
Mark

[mjlacore]

I forgot to mention that, though the image disappears, the text inside the "centercontent" DIV formats as though the image is there, wrapping around the image as expected.

[SuzyUK]

Hi mjlacore - Welcome to WebmasterWorld!

this post may get moved to the CSS forum [webmasterworld.com] later..

The image is actually appearing "under" both the centercontent div and the wrapper div.. I got it back by adding

#centercontent img {position: relative;}

is this because the image is a replaced element it actually requires to be told what its position is relative to?

how are you aligning the image with HTML (align) or CSS (float). could it be that IE is treating it(align) like a float and taking it out of the flow?

an IE difference of interpretation of the spec?

1 answer but even more questions ;)

Suzy

[mjlacore]

Hi, SuzyUK!

I added the line you suggested, and that did, indeed, solve the problem. The image now appears where it is supposed to be and is no longer hidden.

It's still a mystery to me. When I tried putting images in either the right or left bars, they displayed properly. It was only the center content area that created the problem. I suppose it might be because the side bars were positioned absolutely and the center was positioned relatively.

At any rate, it works now, and I thank you very much for your help!

[tedster]

Just an observation here that the "align" attribute is deprecated - and you might want to future-proof your code by using CSS all the way and declaring a float: rule for the image instead.

[mjlacore]

That makes sense. I wasn't comfortable using the "align" attribute, anyway, but I was just trying to do a quick test of the layout when the problem appeared, and it didn't occur to me at the time to create a class style to float the image. I'll know in the future. Thanks.