Ie's Expanding Widths

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Phil Evans - 29 Sep 2004 11:58 GMT

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

Reply to this Message

Mark Tranchant - 29 Sep 2004 12:05 GMT

> What ho, CIWASians!
>
[quoted text clipped - 15 lines]
> Can anyone see a way around this? Other than not allowing images wider
> than the block's minimum ;)

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

Signature

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

Reply to this Message

Phil Evans - 29 Sep 2004 13:53 GMT

>> 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
[quoted text clipped - 13 lines]
> Don't specify the width in CSS but prop it up with a spacer image?
> Hideous, I know, but it might just work...?

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/2004/09/16/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

Reply to this Message

Mark Tranchant - 29 Sep 2004 15:25 GMT

> 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?

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

Signature

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

Reply to this Message

Spartanicus - 29 Sep 2004 15:42 GMT

>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?

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.

Signature

Spartanicus

Reply to this Message

Phil Evans - 30 Sep 2004 12:24 GMT

>>My only problem here (apart from the potential for creeping
>>div-soup-itis) is that I'm now floating an element without explicitly
[quoted text clipped - 6 lines]
>
> Opera 6 uses the 2.0 rules.

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2004

Ie's Expanding Widths