Max-Width property in IE 6

Discussion in 'HTML' started by patrick j, Oct 14, 2006.

  1. patrick j

    patrick j Guest

    Hi

    First I must apologise to Mr. Dorayme for my use of his web-page as the
    example for my question. In order assist in making him feel better I'll
    mention it is an excellent article.

    However what I am enquiring about is how to make what he has done work in
    IE 6.

    Here is the web-page:
    http://members.optushome.com.au/droovies/opinion/drugLawsFixed.html

    and here is the css:
    http://members.optushome.com.au/droovies/opinion/drugLawsFixed.css

    It is the declaration of max-width: 600px in the div selector that I'm
    enquiring about.

    Here it is in context:

    div {
    max-width: 600px;
    margin-top: 30px;
    margin-left : auto;
    margin-right : auto;
    border: 5px solid #ccc;
    padding: 30px;
    padding-top: 10px;
    color : #000;
    background-color : #FFF;
    }

    If you look at this web page in Firefox, Safari, OmniWeb or Camino what
    you'll see is that the text of the article is in a box 600 px wide. If you
    widen the window of the browser then the margins get wider but the text
    area remains in the centre, 600 px in width.

    If you narrow the browser window to less than 600 px then the margins
    disappear and the central text area starts to narrow so that the text is
    now wrapping to the width of the browser window.

    Key to all of this is the use of the declarations:

    margin-left : auto;
    margin-right : auto;

    as well as max-width: 600px.

    Okay so all is well with the world until you open the web-page in IE 6. Now
    you will see that max-width, margin-left, margin-right properties have been
    ignored and the article text is simply filling the browser window and
    wrapping against the right of the window no matter how wide that window is.
    My question obviously is can the max-width property be made to work in IE 6
    such that Dorayme's web-page will work in IE 6 as it does in every other
    browser I've tried?

    Thank you :)

    --
    Patrick
    Brighton, UK
     
    patrick j, Oct 14, 2006
    #1
    1. Advertising

  2. patrick j

    Sid Guest

    On Sat, 14 Oct 2006 14:49:09 +0100, patrick j
    <> wrote:

    : First I must apologise to Mr. Dorayme


    Me 2. Why was I unsupportive of his prowess? :))

    Sid
     
    Sid, Oct 14, 2006
    #2
    1. Advertising

  3. On Sat, 14 Oct 2006 14:49:09 +0100, patrick j
    <> wrote:

    >Okay so all is well with the world until you open the web-page in IE 6. Now
    >you will see that max-width, margin-left, margin-right properties have been
    >ignored and the article text is simply filling the browser window and
    >wrapping against the right of the window no matter how wide that window is.
    >My question obviously is can the max-width property be made to work in IE 6
    >such that Dorayme's web-page will work in IE 6 as it does in every other
    >browser I've tried?


    There is a horrible IE kludge which can be made to work in reasonably
    simple pages: http://www.svendtofte.com/code/max_width_in_ie/

    Incidentally don't size the column in pixels as the example you took
    did. Use ems as this page shows.

    I suggest you put it in a separate stylesheet which is only linked for
    IE using IE conditional comments.

    --
    Stephen Poley

    http://www.xs4all.nl/~sbpoley/webmatters/
     
    Stephen Poley, Oct 14, 2006
    #3
  4. patrick j

    dorayme Guest

    In article
    <>,
    patrick j <> wrote:

    > Here is the web-page:
    > http://members.optushome.com.au/droovies/opinion/drugLawsFixed.html
    >
    > and here is the css:
    > http://members.optushome.com.au/droovies/opinion/drugLawsFixed.css
    >
    > It is the declaration of max-width: 600px in the div selector that I'm
    > enquiring about.
    >
    > Here it is in context:
    >
    > div {
    > max-width: 600px;
    > margin-top: 30px;
    > margin-left : auto;

    ....

    > My question obviously is can the max-width property be made to work in IE 6
    > such that Dorayme's web-page will work in IE 6 as it does in every other
    > browser I've tried?


    Since posting this version of the CSS at ...Fixed.html, max-width
    was changed to width="600px" to properly illustrate the
    difference between:

    <http://members.optushome.com.au/droovies/opinion/drugLawsFixed.ht
    ml>

    and

    <http://members.optushome.com.au/droovies/opinion/drugLaws.html>

    the latter using max-width in ems.

    Aside from the point of the comparison for now, but my response
    to your intelligent question about IE and max-width and the
    display of this sort of pure text article is this. I would make a
    style sheet for IE 5 and 6's eyes only and in that style sheet.
    In that CSS, depending on my mood, simply let IE users see it as
    fixed 600 or 800px wide or a guessed-by-me-as-being-suitable but
    definite (width: rather than max-width:) number of ems.

    Indeed, there are so many ways to go that it is hard to say which
    is best. But, essentially, in a case like this, it is not worth
    employing over fancy tricks for IE like javascript when a mere
    "for IE eyes only" clause in the CSS or separate sheet will do.

    You may find this article helpful to start with:

    http://www.gunlaug.no/contents/wd_additions_14.html

    --
    dorayme
     
    dorayme, Oct 14, 2006
    #4
  5. patrick j

    patrick j Guest

    On Sat, 14 Oct 2006 22:14:48 +0100, dorayme wrote
    (in article
    <>):

    > Since posting this version of the CSS at ...Fixed.html, max-width
    > was changed to width="600px" to properly illustrate the
    > difference between:
    >
    > <http://members.optushome.com.au/droovies/opinion/drugLawsFixed.ht
    > ml>
    >
    > and
    >
    > <http://members.optushome.com.au/droovies/opinion/drugLaws.html>
    >
    > the latter using max-width in ems.


    Yes I appreciate indeed your intention of posting the pages and it was
    very informative for me.

    In fact I did not know that the max-width property existed in CSS and
    it was at your pages that I noticed it.

    This is the problem with trying to pick up CSS bit-by-bit from various
    web-sites - I miss things.

    Anyway I've got Eric Meyer's books on the way to me now from Amazon.

    For some time I'd been wondering if it was possible with CSS to create
    margins that collapse first (as browser window narrows) then for the
    central text containing area to become one that narrows when browser
    window demands.

    This was never a problem with old school table layouts. Anyway I saw
    your web-pages and I was pleased to see the existence of the
    "max-width" property and the "margin: auto;" declarations.

    I did some experimentation with this and discovered that while it works
    excellently on every browser on my Mac it won't work with IE 6 :(

    > Aside from the point of the comparison for now, but my response
    > to your intelligent question about IE and max-width and the
    > display of this sort of pure text article is this. I would make a
    > style sheet for IE 5 and 6's eyes only and in that style sheet.


    Yes, this is what I'm going to do.

    I don't like the text to be spread right across the browser window and
    setting "hard" margins is too inflexible.

    I know there is a great deal of debate on the issue of width of text
    and there are those who say that the user can simply narrow the browser
    window if need be. Unfortunately the reality is that most people just
    don't seem to do that. If they are using a PC then the browser window
    is simply at the max width of their screen.

    On the Mac of course the browser does not fill the screen in that
    manner as a default behaviour.

    Unfortunately with the PCs people seem very often to simply have the
    browser window filling the whole screen. I fully understand that most
    PC users on this newsgroup will not do that but I spend 2.5 days a week
    in a University which is nearly 100% PCs in the offices and every
    single one simply has the browser window at the maximum width of the
    screen no matter how wide the screen.

    > In that CSS, depending on my mood, simply let IE users see it as
    > fixed 600 or 800px wide or a guessed-by-me-as-being-suitable but
    > definite (width: rather than max-width:) number of ems.
    >
    > Indeed, there are so many ways to go that it is hard to say which
    > is best. But, essentially, in a case like this, it is not worth
    > employing over fancy tricks for IE like javascript when a mere
    > "for IE eyes only" clause in the CSS or separate sheet will do.


    I agree, the Javascript route looks too complicated.

    I think for my situation I will create a separate style-sheet for IE
    with either fixed margins or a fixed central text area.

    Then I can have my much more liquid style-sheet for all other browsers.


    --
    Patrick
    Brighton, UK
     
    patrick j, Oct 14, 2006
    #5
  6. patrick j

    dorayme Guest

    In article
    <>,
    patrick j <> wrote:

    > I don't like the text to be spread right across the browser window and
    > setting "hard" margins is too inflexible.
    >


    If it is (especially) text only article that is being displayed,
    one can use, eg. "width: 35em" which IE understands fine, no need
    for any special instructions. And this will be fine for most
    people. This is regarded as being not "fixed" but "fluid" because
    of the em (which is dependent on the user's text-size setting for
    the browser)

    I experiment with max-width in these things sometimes to try to
    overcome the shortcomings of even this. Take a look at what
    happens when you put in the reasonable 35em for width (not
    max-width) and pretend to be tired and want to sit back in the
    chair and read it big... it can develop horiz scrollbars! It is
    this sort of thing that can be stopped with max-width, this sets
    a limit. And if you want this feature in IE, you need to do
    special things. But you could take the attitude that the em based
    width (no max-width) is good enough flexibility and if the user
    uses an inadequate browser, then you are not going to jump
    through hoops to add all the refinements for the few who would
    want huge text size AND yet uses IE 5 and 6. Depends on how much
    you care, how much you can be bothered.

    > On the Mac of course the browser does not fill the screen in that
    > manner as a default behaviour.
    >


    In some ways I have admired watching some expert PC users doing
    all at full screen, using the equivalent of our silly dock to
    switch about and so on... I have a PC and sort of understand it
    but am too stuck in my Mac ways and like windows to be as
    reasonable as the site calls for and no more...

    --
    dorayme
     
    dorayme, Oct 15, 2006
    #6
    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:
    717
    Beauregard T. Shagnasty
    Feb 9, 2004
  2. Lois
    Replies:
    1
    Views:
    3,322
    Ryan Stewart
    Dec 27, 2004
  3. Summercool
    Replies:
    9
    Views:
    903
    dorayme
    Oct 23, 2007
  4. palun
    Replies:
    15
    Views:
    2,509
    Neredbojias
    Jan 11, 2008
  5. kriton
    Replies:
    0
    Views:
    349
    kriton
    Apr 22, 2005
Loading...

Share This Page