What ho, CIWASians!

I've got a really annoying issue, and I can't see a way around it. What
I want to achieve is a block floated left containing a header and an
image. The block should be at least a specified width. The header should
be flush with the top, left, and right sides of the box. If the image is
bigger than the containing block's min-width, then the block *and the
header* should extend to fit the block.

See the URL: http://philevans.com/ie_pants.html
(I've used a paragraph to prop the block open but the result is the same)

This works fine in Firefox. It fails miserably in IE. It looks like IE
renders the header with the block's width, then realises the block
should be wider to accommodate the paragraph/image within, re-renders
the block but fails to do so with the header.

Can anyone see a way around this? Other than not allowing images wider
than the block's minimum ;)

Cheers

P

Phil Evans wrote:[color=blue]
> What ho, CIWASians!
>
> I've got a really annoying issue, and I can't see a way around it. What
> I want to achieve is a block floated left containing a header and an
> image. The block should be at least a specified width. The header should
> be flush with the top, left, and right sides of the box. If the image is
> bigger than the containing block's min-width, then the block *and the
> header* should extend to fit the block.
>
> See the URL: http://philevans.com/ie_pants.html
> (I've used a paragraph to prop the block open but the result is the same)
>
> This works fine in Firefox. It fails miserably in IE. It looks like IE
> renders the header with the block's width, then realises the block
> should be wider to accommodate the paragraph/image within, re-renders
> the block but fails to do so with the header.
>
> Can anyone see a way around this? Other than not allowing images wider
> than the block's minimum ;)[/color]

Don't specify the width in CSS but prop it up with a spacer image?
Hideous, I know, but it might just work...?

--
Mark.
http://tranchant.plus.com/

Mark Tranchant wrote:[color=blue]
> Phil Evans wrote:[color=green]
>> I've got a really annoying issue, and I can't see a way around it.
>> What I want to achieve is a block floated left containing a header and
>> an image. The block should be at least a specified width. The header
>> should be flush with the top, left, and right sides of the box. If the
>> image is bigger than the containing block's min-width, then the block
>> *and the header* should extend to fit the block.
>>
>> See the URL: http://philevans.com/ie_pants.html
>> (I've used a paragraph to prop the block open but the result is the same)
>>
>> This works fine in Firefox. It fails miserably in IE. It looks like IE
>> renders the header with the block's width, then realises the block
>> should be wider to accommodate the paragraph/image within, re-renders
>> the block but fails to do so with the header.[/color]
>
> Don't specify the width in CSS but prop it up with a spacer image?
> Hideous, I know, but it might just work...?[/color]

Cheers for the reply, Mark, gave me an idea. Rather than use an image,
I've adapted Dave Shea's min-height solution from
http://www.mezzoblue.com/archives/20.../minheight_fi/ by adding a
container div around the elements inside, specifying padding-left: 200px
on the parent and margin-left: -200px on the child - this drags
everything together and both Firefox and IE6 seem to be acting fine -
see second test at http://philevans.com/ie_pants_fixed.html

My only problem here (apart from the potential for creeping
div-soup-itis) is that I'm now floating an element without explicitly
specifying a width for it, something which I know is a Bad Thing (TM).
Are there likely to be problems with this approach?

Cheers again

P

Phil Evans wrote:
[color=blue]
> My only problem here (apart from the potential for creeping
> div-soup-itis) is that I'm now floating an element without explicitly
> specifying a width for it, something which I know is a Bad Thing (TM).
> Are there likely to be problems with this approach?[/color]

The Peekaboo Bug springs to mind. IIRC, using position: relative; might
fix that if you experience it.

--
Mark.
http://tranchant.plus.com/

Phil Evans <newsgroups@philHADDOCKevans.removethefish.com> wrote:
[color=blue]
>My only problem here (apart from the potential for creeping
>div-soup-itis) is that I'm now floating an element without explicitly
>specifying a width for it, something which I know is a Bad Thing (TM).
>Are there likely to be problems with this approach?[/color]

Renderers that use the CSS 2.0 float rules need a width, renderers that
use the CSS 2.1 float rules and IE don't, they use a shrink to fit
mechanism.

Opera 6 uses the 2.0 rules.

--
Spartanicus

Spartanicus wrote:[color=blue]
> Phil Evans <newsgroups@philHADDOCKevans.removethefish.com> wrote:
>
>[color=green]
>>My only problem here (apart from the potential for creeping
>>div-soup-itis) is that I'm now floating an element without explicitly
>>specifying a width for it, something which I know is a Bad Thing (TM).
>>Are there likely to be problems with this approach?[/color]
>
>
> Renderers that use the CSS 2.0 float rules need a width, renderers that
> use the CSS 2.1 float rules and IE don't, they use a shrink to fit
> mechanism.
>
> Opera 6 uses the 2.0 rules.[/color]

Ahh, that's well worth knowing - wasn't clear how that had changed in
2.1. It might be that I feed something a little less clever to Op6 -
will have to grab a copy for testing . . .

Cheers to both Mark and Spartanicus for your help :)

P