Max-Width property in IE 6

[patrick j]

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

 

[Sid]

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

: First I must apologise to Mr. Dorayme


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

Sid

 

[Stephen Poley]

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.

 

[dorayme]

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

 

[patrick j]

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.

 

[dorayme]

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