Min-Width work around for IE.

[James Smith]

I've just been googleing for a good while now looking to se ewhat people
use as a work around for IE not being able to understand min-width (CSS).

There seems to be a lot of different solutions out there, and a lot of
people saying they don't work.

Anyone using something there happy with? Preferably in CSS (I noticed
there is a lot of java scripts).

James.

 

[rf]

I've just been googleing for a good while now looking to se ewhat people
use as a work around for IE not being able to understand min-width (CSS).

There seems to be a lot of different solutions out there, and a lot of
people saying they don't work.

Anyone using something there happy with? Preferably in CSS (I noticed
there is a lot of java scripts).

<hack>
Plonk in an image, one pixel high and however wide you want min-width to be.
Yep, the old one pixel transparent gif
</hack>

<snide>IE <em>deserves</em> hacks</snide>

 

[James Smith]

James Smith wrote:




<hack>
Plonk in an image, one pixel high and however wide you want min-width to be.
Yep, the old one pixel transparent gif
</hack>

<snide>IE <em>deserves</em> hacks</snide>

Deserves? "Requires".

 

[Els]

<hack>
Plonk in an image, one pixel high and however wide you want
min-width to be. Yep, the old one pixel transparent gif
</hack>

But the rest of the content of whatever you put the gif in still
gets squashed as if the gif wasn't there... (iirc from the last
time I tried that trick)

 

[Mark Parnell]

I've just been googleing for a good while now looking to se ewhat people
use as a work around for IE not being able to understand min-width (CSS).

IE applies width the way it is supposed to apply min-width, so I usually
use something like this:

#blah { width: 20em; }
html>#blah { width: auto; min-width: 20em; }

You could use any other method to hide it from IE, e.g. the Tantek hack.

 

[Els]

IE applies width the way it is supposed to apply min-width,

Aren't you confusing width and height here?
Giving IE a min-width by stating width:20em gives an element a
width of 20em (iirc ;-) )

 

[Mark Parnell]

Aren't you confusing width and height here?

I don't think so.

Giving IE a min-width by stating width:20em gives an element a
width of 20em (iirc ;-) )

It gives it a width of 20em, but IIRC if the content requires more than
20em width IE will automatically expand it. You've got me confused now.
Might have to play with it.

 

[Mark Parnell]

Aren't you confusing this with the IE min-height hack?

Since both you and Els have said much the same thing, I'm beginning to
think that maybe I am. Ho hum.

Your solution above does not achieve the desired result.

I almost put something in my post about it just being from memory and
not tested. Maybe I should have.

<hides>

 

[Spartanicus]

IE applies width the way it is supposed to apply min-width, so I usually
use something like this:

#blah { width: 20em; }
html>#blah { width: auto; min-width: 20em; }

Aren't you confusing this with the IE min-height hack?

Your solution above does not achieve the desired result.

 

[Leif K-Brooks]

I've just been googleing for a good while now looking to se ewhat people
use as a work around for IE not being able to understand min-width (CSS).

Anyone using something there happy with? Preferably in CSS (I noticed
there is a lot of java scripts).

IE7 (<http://dean.edwards.name/IE7/>) seems to do this fine from the
limited use I've put it to, although it uses JavaScript.

 

[Steve Pugh]

Aren't you confusing this with the IE min-height hack?

Your solution above does not achieve the desired result.

It does if the content _must_ be wider than 20em,
i.e. if it's an image or if white-space: nowrap; is specified.

If the content is wrappable text then IE will wrap it at 20em, but if
it can't then it will treat the width as a minimum and extend the box.

I've used this exact technique (with white-space: nowrap and yes I
know that it might cause problems at large user font sizes) on a site
I've been building this week.

Steve

 

[Mark Parnell]

It does if the content _must_ be wider than 20em,
i.e. if it's an image or if white-space: nowrap; is specified.

Thank you. I _was_ right, just maybe didn't read the question properly,
or didn't explain myself properly.

If the content is wrappable text then IE will wrap it at 20em, but if
it can't then it will treat the width as a minimum and extend the box.

That's what I thought, but looking at my other post that's not quite
what I said. Oh well.

Thank you for clearing that up (hadn't had a chance to test it yet).

 

[Spartanicus]

It does if the content _must_ be wider than 20em,
i.e. if it's an image or if white-space: nowrap; is specified.

http://www.spartanicus.utvinternet.ie/test/steve.htm

(view both in IE and a proper browser)

 

[Spartanicus]

http://www.spartanicus.utvinternet.ie/test/steve.htm

(view both in IE and a proper browser)

I received an email follow up to this message from Steve (he's at work
sans newsgroup access) in which he pointed out a mistake in the above
example. I had copy/pasted the code from Mark's message straight into
the code without checking.

I should have known better than to trust Mark ;-)

The mistake has been rectified (the point stands).

 

[Steve Pugh]

I received an email follow up to this message from Steve (he's at work
sans newsgroup access) in which he pointed out a mistake in the above
example. I had copy/pasted the code from Mark's message straight into
the code without checking.

I should have known better than to trust Mark ;-)
;-)

The mistake has been rectified (the point stands).

The point being?

Yes, your example shows different behaviour in IE and more compliant
browsers. But is your example a realistic demonstration of a situation
where min-width would be applied?

It shows that Mark's code is a basis for a min-width substitute but
that it (a) needs further styles and (b) may not be useful in all
cases where min-width is desired.

The OP didn't specify his exact situation so we don't know whether
Mark's code can be used as the basis for a working substitute.

Personally, I find min-width (and max-height) much less useful than
max-width (and min-height).

Add a float: left to the styles in your demo and any browsers that
uses CSS 2.1 float model will display floated boxes that are (a) no
smaller than 20em wide, (b) otherwise as small as possible. Though the
necessity of specifying something like white-space: nowrap; for IE
limits the applications. Only browsers that are limited to the CSS 2
float model (in real world terms that just Mac IE) will behave
differently.

If there was an easy and universal IE substitute for min-width then we
wouldn't be having this discussion. ;-)

Steve

 

[Spartanicus]

Yes, your example shows different behaviour in IE and more compliant
browsers. But is your example a realistic demonstration of a situation
where min-width would be applied?

Yes, except that typically the content would contain breakable white
space.

It shows that Mark's code is a basis for a min-width substitute but
that it (a) needs further styles and (b) may not be useful in all
cases where min-width is desired.

The OP didn't specify his exact situation so we don't know whether
Mark's code can be used as the basis for a working substitute.

How likely is it that instead of the "min-width hack" that the OP asked
for he perhaps wanted a: "min-width hack that also restricts the normal
width of the container in IE but not in other UAs but only if the
container's content cannot be wrapped by IE"? ;-)