Min-Width work around for IE.

Discussion in 'HTML' started by James Smith, Aug 24, 2004.

  1. James Smith

    James Smith Guest

    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.
     
    James Smith, Aug 24, 2004
    #1
    1. Advertising

  2. James Smith

    rf Guest

    James Smith wrote:

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

    --
    Cheers
    Richard.
     
    rf, Aug 24, 2004
    #2
    1. Advertising

  3. James Smith

    James Smith Guest

    rf wrote:

    >James Smith wrote:
    >
    >
    >
    >>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>
    >
    >
    >

    Deserves? "Requires". :p
     
    James Smith, Aug 24, 2004
    #3
  4. James Smith

    Els Guest

    rf wrote:

    > James Smith wrote:
    >
    >> 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>


    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)


    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: De Dijk - Huil maar niet
     
    Els, Aug 24, 2004
    #4
  5. James Smith

    Mark Parnell Guest

    On Tue, 24 Aug 2004 20:42:25 +1000, James Smith
    <> declared in alt.html:

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

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
     
    Mark Parnell, Aug 24, 2004
    #5
  6. James Smith

    Els Guest

    Mark Parnell wrote:

    > On Tue, 24 Aug 2004 20:42:25 +1000, James Smith
    > <> declared in alt.html:
    >
    >> 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,


    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 ;-) )

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: De Dijk - Ik kan het niet alleen
     
    Els, Aug 24, 2004
    #6
  7. James Smith

    Mark Parnell Guest

    On 24 Aug 2004 22:59:54 GMT, Els <> declared in
    alt.html:

    > 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
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
     
    Mark Parnell, Aug 25, 2004
    #7
  8. James Smith

    Mark Parnell Guest

    On Wed, 25 Aug 2004 00:20:57 +0100, Spartanicus <>
    declared in alt.html:

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

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
     
    Mark Parnell, Aug 25, 2004
    #8
  9. James Smith

    Spartanicus Guest

    Mark Parnell <> wrote:

    >> 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; }


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

    Your solution above does not achieve the desired result.

    --
    Spartanicus
     
    Spartanicus, Aug 25, 2004
    #9
  10. James Smith wrote:
    > 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.
     
    Leif K-Brooks, Aug 25, 2004
    #10
  11. James Smith

    Steve Pugh Guest

    Spartanicus <> wrote:
    >Mark Parnell <> wrote:
    >
    >>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.


    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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Aug 25, 2004
    #11
  12. James Smith

    Mark Parnell Guest

    On Wed, 25 Aug 2004 08:08:31 +0100, Steve Pugh <> declared
    in alt.html:

    > 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).

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
     
    Mark Parnell, Aug 25, 2004
    #12
  13. James Smith

    Spartanicus Guest

    Steve Pugh <> wrote:

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

    >
    >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
     
    Spartanicus, Aug 25, 2004
    #13
  14. James Smith

    Spartanicus Guest

    Spartanicus <> wrote:

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

    >
    >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).

    --
    Spartanicus
     
    Spartanicus, Aug 25, 2004
    #14
  15. James Smith

    Steve Pugh Guest

    Spartanicus <> wrote:
    >Spartanicus <> wrote:
    >
    >>>>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.

    >>
    >>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).


    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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Aug 25, 2004
    #15
  16. James Smith

    Spartanicus Guest

    Steve Pugh <> wrote:

    >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"? ;-)

    --
    Spartanicus
     
    Spartanicus, Aug 26, 2004
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul Furman

    min-width max-width again

    Paul Furman, Feb 9, 2004, in forum: HTML
    Replies:
    10
    Views:
    727
    Beauregard T. Shagnasty
    Feb 9, 2004
  2. Lois
    Replies:
    1
    Views:
    3,408
    Ryan Stewart
    Dec 27, 2004
  3. edkawas
    Replies:
    0
    Views:
    449
    edkawas
    Jun 14, 2005
  4. juergen
    Replies:
    3
    Views:
    584
    opalinski from opalpaweb
    Sep 20, 2006
  5. FishGills

    Retrieving width with only min-width set?

    FishGills, Oct 18, 2006, in forum: Javascript
    Replies:
    0
    Views:
    110
    FishGills
    Oct 18, 2006
Loading...

Share This Page