Floated image in a relative position div

[boclair]

Is this a known problem with IE6?

I have a provisional two column layout, the left menu column is positioned
absolute. The contents column is positioned relative.

The contents column has an image floated right. The placement is there in
IE6 but not the image.

It does not matter whether the DTD is strict or transitional

An incomplete test page is at http://www.australisolives.com/new1/

I notice that if I drag the window width to about 550 pixel (on a 800 res),
part of the image can be seen in the margin between the right column and the
left column. The image seems to be being layered under the right column.
z-index "is" declared on the right column but it doesn't seem to matter, in
relation to the jpg, whether it is declared or not, or a higher z-index is
declared on the floated image.

I have read http://www.w3.org/TR/REC-CSS2/visuren.html#q24 and subsequent
sections but cannot seem to find anything relative

Any assistance appreciated.

Louise

[Nikolaos Giannopoulos]

Re: Floated image in a relative position div

boclair wrote:[color=blue]
> Is this a known problem with IE6?
>
> I have a provisional two column layout, the left menu column is positioned
> absolute. The contents column is positioned relative.
>
> The contents column has an image floated right. The placement is there in
> IE6 but not the image.[/color]

Sounds like the IE6 Guillotine bug - although the issue is well known
the exact fix isn't.

I recently had a similar problem but I'm not sure how to adapt my
solution to your case as you have an absolute left position column.

The problem - from what I have seen - apparently has to do with IE6
messing up positioning a floated image that has a hyperlink wrapped
around it and that apparently the link background extends outside of its
container and thus causes a number of weird effects - depending on the
rest of the layout (not a very obvious thing for MS to have tested is
it????? - sarcasm intended ;-)

The problem is that this bug is no joke and can cause a lot of grief.

Solutions I have heard of involve wrapping another div around the float
img and possibly setting the width to 100% of the div - all in an effort
to keep this floated element under control. Neither worked for me and I
ended up making the element opposite the float a float as well and this
seems to work (although there is a small boundary when the window is
between 500-520 or so pixels wide that both floats dissappear).

Some have also mentioned doing a img {position: relative} on the floated
image as a work around but once again I saw no change -

If this isn't the Guillotine bug then count yourself lucky.

If it is, you'll probably unfortunately find it easier to switch layouts
before you'll ever solve it (at least that has been my experience).

--Nikolaos

[Mikko Rantalainen]

Re: Floated image in a relative position div

Nikolaos Giannopoulos wrote:[color=blue]
> boclair wrote:[color=green]
>>The contents column has an image floated right. The placement is there in
>>IE6 but not the image.[/color]
>
> Sounds like the IE6 Guillotine bug - although the issue is well known
> the exact fix isn't.
> [...]
> The problem - from what I have seen - apparently has to do with IE6
> messing up positioning a floated image that has a hyperlink wrapped
> around it and that apparently the link background extends outside of its[/color]

I've hit that bug only once and all I could do was to add "background :
transparent" for the offending element[1]. In that case, it was easiest
to just hide the issue. The element is still rendered incorrectly but
because it's rendered as transparent, it doesn't matter.

[1] If Guillotine bug is indeed related to backgrounds only it should be
"easy" to locate the incorrectly rendered element by changing all
backgrounds to transparent and then restoring real backgrounds one by
one until the bug shows up again.

--
Mikko

[Nikolaos Giannopoulos]

Re: Floated image in a relative position div

Mikko Rantalainen wrote:[color=blue]
> Nikolaos Giannopoulos wrote:
>[color=green]
>> The problem - from what I have seen - apparently has to do with IE6
>> messing up positioning a floated image that has a hyperlink wrapped
>> around it and that apparently the link background extends outside of its[/color]
>
> I've hit that bug only once and all I could do was to add "background :
> transparent" for the offending element[1].[/color]

Interesting. This hasn't helped in any of my cases unfortunately.

[color=blue]
> In that case, it was easiest
> to just hide the issue. The element is still rendered incorrectly but
> because it's rendered as transparent, it doesn't matter.[/color]

If this worked it would be a great thing - and super easy to implement
but in most cases that I have come accross this hasn't made a
difference. In addition I'm not sure that its so much that the
background is opaque that causes the problem or that the rendering
engine simply miscalculates things by making the appropriate space for
an element but through a bug incorrectly computing the background to be
larger than it really is and thus not being able to place the element.

I think its the latter in most cases that I have come accross as the
element that is being floated is ussually the thing that dissappears.
Wrapping another element inside a div with the floated element has been
observed to take out both elements.

[color=blue]
> [1] If Guillotine bug is indeed related to backgrounds only it should be
> "easy" to locate the incorrectly rendered element by changing all
> backgrounds to transparent and then restoring real backgrounds one by
> one until the bug shows up again.[/color]

I wish. Like I said I think its more of a miscalculation when placing
the element than the opaqueness of the background of the element - this
is why a weird rule like the following sometimes fixes things.

#show {float: left; position: relative}

or why for quite some time now I have picked up from this newsgroup that
its wise to have the following in your style sheet:

body * {position: relative}

The above I imagine helps but the problem is that there are many
different combinations of things that can cause this bug to appear and
thus the inability to focus on a single solution.

What amazes me is that this bug wasn't picked up before IE was released
- Did I just say that ;-)

Finally, I have observed IE 5 and IE 6 win to behave the same way on
this bug!!!! i.e. when the bug appears in one browser it will appear in
the other - when the page is adjusted the new behaviour fixed or not
will be the same in both browsers. So this is not just an IE 6 bug IMO.

--Nikolaos

[Brian]

Re: Floated image in a relative position div

Nikolaos Giannopoulos wrote:[color=blue]
> I think its the latter in most cases that I have come accross as the
> element that is being floated is ussually the thing that dissappears.
> Wrapping another element inside a div with the floated element has been
> observed to take out both elements.[/color]

Have I misunderstood you here? Or did you misunderstand my solution?

Given

<a href="foo.html" ><img src="foo.png"></a>
with
img {float: left } /* or */
a {float: left }

we see a bug, what you call the guillotine bug. Change it to

<div>
<a href="foo.html" ><img src="foo.png"></a>
</div>
with
div {float: left }

That is, take the float off the inline element. Put it on the block
element. But that is what you tried, right?

--
Brian
follow the directions in my address to email me