Subject: [css-d] 3Col_NN4_FMFM and IE 6 problem

From: holnkids at netscape.net (Holly Bergevin)
Date: Fri, 25 Apr 2003 22:56:20 -0400

[email-masked] wrote:

>At 01:00 AM 4/25/2003 -0400, you wrote:
>
> >>If I try to place an image in the right
> >>hand column with a declared width of 145px, it does not work in IE6.  IE
> >>refuses to display the content in that third column.

>http://wgi.org/2003/indexmac2.php 

Hi Scott - I played around some more with your example and found a few more interesting things.

It seems putting a top border on the div.column-three-content will kill the problem without using the float, as long as the image is wrapped inside something else. You could put it in another div, or a paragraph, either one seemed to work. 

What I did was give the div.column-three-content a {border-top: 1px solid #6666ff;} which is the same color as the background of the column. I then gave each of the other div.column-xxx-content a top border the same color as their backgrounds, and 1px high to balance things between the columns. This works great in the example you provided.

Unfortunately, what you will find if you put content in the middle div is that the image gets pushed below the bottom of the content level of the middle div, though it still does display. 

Another thing I tried which IE6 is okay with but Moz and Op aren't is to give the image a margin property that looks like img {margin: 0 -3px;} IE6 happily centers the image and displays it, too. Unfortunately, Moz and Op drag the thing to the left 3px. You can use a child selector to reset the margin value for the other browsers - html>body img {margin: 0;}

I'm afraid this is going to be a case of pick your hack. The float one isn't that bad, especially if the image is going to take up the entire width of that right side div and since you said it isn't causing problems for Moz and Op7.  

So after all this, my suggestion is to go with the float. It seems the easiest way to deal with the various problems that are encountered. Be aware that if you need to put content in the right div *before* the image, the image will disappear again, even with the float. This time it's hiding behind the background, so add [img] to the selector that has the {p\osition: relative;} property. If you don't want a background on the right div, you won't need the pos:rel.

In brief, my suggestion looks like this - 

.box-wrap, .columns-float, 
.column-one, .column-two, 
h2, .column-three, img {p\osition: relative;}

img { float: left;}

>I appreciate the advice.  I think I might have a "immovable object meets 
>the irresistible force" complex about this problem right now.

I'm not sure which one of those is you and which is IE6, but I do agree this is a frustrating problem, and one that is going to require the application of a(nother) hack to solve. 

Not sure I was much help this time, sorry,

~holly

__________________________________________________________________
Try AOL and get 1045 hours FREE for 45 days!
http://free.aol.com/tryaolfree/index.adp?375380

Get AOL Instant Messenger 5.1 for FREE! Download Now!
http://aim.aol.com/aimnew/Aim/register.adp?promo=380455