min-width

Discussion in 'HTML' started by Erik Ginnerskov, Dec 24, 2004.

  1. I have been struggling for some time, trying to make IE behave as if it
    actually do understand the css attribute min-width.

    In FireFox this code vill work perfectly:

    <div style="width: 60%; min-width: 300px;">Some texst</div>

    If the viewport is more than 500 px wide, the width of the box is 60 % of
    the width of the vieport. If the viewport is less than 500 px wide, the
    width of the box is 300 px.

    IE doesn't understand that and the width of the box is always 60 % of the
    width of the viewport.

    Nothing I have tried works as wanted.

    Anyone who knows how to make IE do as wanted?

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 24, 2004
    #1
    1. Advertising

  2. Erik Ginnerskov

    Dylan Parry Guest

    Erik Ginnerskov wrote:

    > Anyone who knows how to make IE do as wanted?


    It's a total hack, but I would use something like:

    <div style="width: 60%; min-width: 300px; border: 1px solid black;">
    <div style="width: 300px; height: 0; line-height:0;></div>
    </div>

    Again, it's a total hack and kinda takes us back to the days of filler
    images for positioning, but it's the only way I can really think of that
    would work adequately.

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 24, 2004
    #2
    1. Advertising

  3. Erik Ginnerskov

    Dylan Parry Guest

    Dylan Parry wrote:

    > <div style="width: 300px; height: 0; line-height:0;></div>

    ^^

    Of course, there is a missing " there ;)

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 24, 2004
    #3
  4. In article <>,
    lid says...
    > I have been struggling for some time, trying to make IE behave as if it
    > actually do understand the css attribute min-width.



    Lets think... hmmmm 90% of the visitors will probably use IE. So how
    much time do you want to spend on something that will not work on the
    browser of choice of almost all your visitors. Change your design.

    > IE doesn't understand that and the width of the box is always 60 % of the
    > width of the viewport.
    > Nothing I have tried works as wanted.


    You supplied yourself with the answer. IE doesn't know how to do it.
    it will not work for IE which means it will not work for most of your
    visitors. So you have 2 options.. Don't do it. Or put up a stupid
    message that the page is optimized for everything but IE.

    > Anyone who knows how to make IE do as wanted?


    Yes, but it would require that get the source code to IE and make some
    changes. Bill won't like that.


    --
    -=*Tn*=-
    Travis Newbury, Dec 24, 2004
    #4
  5. Dylan Parry wrote:

    > It's a total hack, but I would use something like:
    >
    > <div style="width: 60%; min-width: 300px; border: 1px solid black;">
    > <div style="width: 300px; height: 0; line-height:0;></div>
    > </div>


    It's very much like a solution with a 1px high invible *.gif, I have used
    previously. I don't like this way to do it.

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 24, 2004
    #5
  6. Erik Ginnerskov

    Dylan Parry Guest

    Erik Ginnerskov wrote:

    > It's very much like a solution with a 1px high invible *.gif, I have used
    > previously. I don't like this way to do it.


    Well, you're pretty much stuck then. At least with using a division you
    are not adding any fake content to the page as you would be using an
    image. It's still not ideal mind :(

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 24, 2004
    #6
  7. Travis Newbury wrote:

    > Lets think... hmmmm 90% of the visitors will probably use IE. So how
    > much time do you want to spend on something that will not work on the
    > browser of choice of almost all your visitors. Change your design.


    That's the easy answer. It would be jumping the fence at the lowest point.

    But you see, I'm running a web-site where others seek the answer when having
    trouble with their own homepage. I allready have made pages, where I show
    how to make min-height and max-width. These pages work fine in IE and I
    would like to fill in the blankes (max-height and min-width) too.

    >> Nothing I have tried works as wanted.


    > You supplied yourself with the answer. IE doesn't know how to do it.


    I do not see it that simple. I know IE will not understand plain css for
    these things, but somebody may know a hack that works.

    You can se the how to solve the min-height problem at:

    http://hjemmesideskolen.dk/html/testsider/minheight.asp

    and how to solve the max-width problem at:

    http://hjemmesideskolen.dk/html/testsider/maxwidth.asp

    Notice: The explanation is written in danish, but the code used (and showed
    on the pages) is naturally international.

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 25, 2004
    #7
  8. Erik Ginnerskov wrote:
    > I have been struggling for some time, trying to make IE behave as if it
    > actually do understand the css attribute min-width.


    http://dean.edwards.name/IE7/
    Leif K-Brooks, Dec 25, 2004
    #8
  9. Dylan Parry wrote:

    >> It's very much like a solution with a 1px high invible *.gif, I have
    >> used previously. I don't like this way to do it.

    >
    > Well, you're pretty much stuck then.


    I hope, you are wrong. I've already found a way to make min-height and
    max-width work in IE too. It just takes a little css hack - a few lines of
    extra code.

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 25, 2004
    #9
  10. Erik Ginnerskov

    Dylan Parry Guest

    Leif K-Brooks wrote:

    > http://dean.edwards.name/IE7/


    I've heard of that before, but never actually tried it. How does it
    perform in the real world? Have you used it on any sites that you've
    made? I assume that as it is a Javascript fix (I think?) that it won't
    work in some cases because folk have disabled scripting :(

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 25, 2004
    #10
  11. Erik Ginnerskov

    rf Guest

    Erik Ginnerskov wrote:

    > I have been struggling for some time, trying to make IE behave as if it
    > actually do understand the css attribute min-width.
    >
    > In FireFox this code vill work perfectly:
    >
    > <div style="width: 60%; min-width: 300px;">Some texst</div>


    http://www.svendtofte.com/code/max_width_in_ie/

    At the bottom of the page are links to pages that simulate min-width and
    max-width for IE and implement the real thing for other browsers.

    Seems to work fine although it does require javascript to be enabled.

    --
    Cheers
    Richard.
    rf, Dec 25, 2004
    #11
  12. Erik Ginnerskov

    Dylan Parry Guest

    Dylan Parry wrote:

    > A quick look tells me something is wrong with that... try:


    Ignore me. I was typing rubbish ;)

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 25, 2004
    #12
  13. rf wrote:
    >> In FireFox this code vill work perfectly:
    >>
    >> <div style="width: 60%; min-width: 300px;">Some texst</div>

    >
    > http://www.svendtofte.com/code/max_width_in_ie/


    That link gave me the answer to how I make IE understand max-height. It even
    works in the fossil version 5.0. Thank you very much. ;)

    But it doesn' work as expected with min-width.

    div {
    min-width:300px;
    width:expression(document.body.clientWidth < 300? "300px": "auto" );
    }

    The script sets the box to 100% of the viewport, if the viewport is more
    than the desired 300px. ;(

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 25, 2004
    #13
  14. Erik Ginnerskov

    Dylan Parry Guest

    Erik Ginnerskov wrote:

    > div {
    > min-width:300px;
    > width:expression(document.body.clientWidth < 300? "300px": "auto" );
    > }


    A quick look tells me something is wrong with that... try:

    div {
    min-width:300px;
    width:expression(document.body.clientWidth < 300? "auto": "300px" );
    }

    I've not seen this solution before, but it seems like it will work for
    most folk with IE as long as scripting is turned on... I suppose that
    for the few that turn scripting off that it won't make too much
    difference in terms of design anyway?

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 25, 2004
    #14
  15. Erik Ginnerskov

    Dylan Parry Guest

    Dylan Parry, Dec 25, 2004
    #15
  16. Dylan Parry wrote:

    >> But it doesn' work as expected with min-width.

    >
    > the code /seems/ to work in IE6. Do you have a sample uploaded where
    > it *isn't* working properly?


    I have just made a sample page in english, explaining what I want it to do
    and showing the code used:

    http://www.hjemmesideskolen.dk/html/testsider/min-width.asp

    View the page in Mozilla or FireFox and try decreasing and increasing the
    width of the browser window, before trying with Internet Explorer.

    In Mozilla and FireFox the little boxes with light blue rim behaves exactly
    as I want them to. In IE the upper box expands to the full width of the
    viewport, no matter what width of viewport.

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 25, 2004
    #16
  17. Erik Ginnerskov

    Dylan Parry Guest

    Erik Ginnerskov wrote:

    > http://www.hjemmesideskolen.dk/html/testsider/min-width.asp


    After stripping it down to minimum code, I found that the only way I
    could get it to work was by removing the doctype so that IE reverted to
    quirks mode. I'm not sure how to make it work in standards mode though,
    as I don't have all that much experience with IE specific script/css.

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 25, 2004
    #17
  18. Erik Ginnerskov, Dec 25, 2004
    #18
    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:
    698
    Beauregard T. Shagnasty
    Feb 9, 2004
  2. Lois
    Replies:
    1
    Views:
    3,182
    Ryan Stewart
    Dec 27, 2004
  3. juergen
    Replies:
    3
    Views:
    558
    opalinski from opalpaweb
    Sep 20, 2006
  4. Albert Hopkins

    When is min(a, b) != min(b, a)?

    Albert Hopkins, Jan 21, 2008, in forum: Python
    Replies:
    31
    Views:
    810
    Albert van der Horst
    Feb 4, 2008
  5. FishGills

    Retrieving width with only min-width set?

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

Share This Page