setting max-width of BODY element in IE

**wishiwasageek** · 05-10-2005, 03:34 AM

(I put this here, because I want to set the width in CSS file not on the HTML page.)

I want to set the maximum width of a webpage as it sits within/is embedded in an IFRAME and I don't want horizontal scroll bars appearing when the page is viewed in a "normal" (for our users) sized browser (ie. fullpage)

I have created an id in the CSS for the body element as:

#fullpage { max-width: 50em; }

which I then call in the HTML for eg. as
<body id="fullpage">

Which works wonderfully in Mozilla but NOT in IE (of course)

Should I also set the HTML element as having a max width or will this stuff something else up along the way??

THANX stax
WIWAG

**jscheuer1** · 05-10-2005, 04:24 AM

As far as I have been able to tell from experimenting with it, the css property of max-width has no effect in IE6 and some of the sites I use for css info say the same thing. Best to come up with alternatives. Try using width and/or margins. Depending upon the situation, overflow-x might be useful. A page with:

body {
overflow-x:hidden;
}

will have no horizontal scrollbars no matter where it is displayed but, content falling outside the horizontal viewing area will be unseen and impossible to bring within the viewing area. The good news is, it only has an effect in IE and it can work out well if the only things falling outside the horizontal viewing area are margins, padding or other whitespace elements.

**wishiwasageek** · 05-10-2005, 05:16 AM

Cheers, thanx for that.

I thought I was going mad!
WIWAG

**mwinter** · 05-10-2005, 11:10 AM

Originally Posted by wishiwasageek

#fullpage { max-width: 50em; }

which I then call in the HTML for eg. as
<body id="fullpage">

Using the body element itself as the selector would have been better:

Code:

body {
  max-width: 50em;
}

Which works wonderfully in Mozilla but NOT in IE (of course)

Microsoft's implementation of CSS is poor, and it doesn't seem as though they are very committed to improving it. Certainly not to the extent of Mozilla's and Opera's efforts. However, you can emulate max-width, as long as you invoke Standards mode by including a complete DOCTYPE.

Mike

**jscheuer1** · 05-10-2005, 04:41 PM

Originally Posted by Mike

Code:

* html body {
  width: expression(Math.min(document.documentElement.clientWidth - 20, 600));

What part of this requires Standards mode? Use of 'expression', or what exactly? I bow to your wisdom on this. The first time I saw it, it went right over my head, this time I get it. Still, it strikes me that this violates Standards mode usual need for units. For example, if it were simply:

width:600

wouldn't Standards mode ignore the width property altogether for that element?

And, does this require javascript enabled?

**wishiwasageek** · 05-11-2005, 12:15 AM

Hey Mike,
why would using the body element be better than creating an id? there are other properties besides the width in the id fullpage.

thanx stax
WIWAG

**mwinter** · 05-11-2005, 12:21 AM

Originally Posted by jscheuer1

What part of this requires Standards mode?

Two things: the use of documentElement, and specifying the width itself. In Quirks mode, IE doesn't use the html element as the root: instead it uses the body element (at least as far as scripts are concerned). Whilst subsituting body for documentElement does yield the right value, IE will refuse to limit the width. Why? I'm not sure. As I don't author Quirks mode documents, I have the luxury of not caring.

However, you could apply this to a container element, rather than body.

Use of 'expression' [...]

That requires IE, of course.

Still, it strikes me that this violates Standards mode usual need for units.

True, but IE's expression operator is very restrictive. In fact, the inclusion of units breaks the behaviour.

And, does this require javascript enabled?

Yes.

Originally Posted by wishiwasageek

why would using the body element be better than creating an id?

It's superfluous. The body element is unique in itself, so there is no need to introduce an id selector.

Think of it a different way. You could apply a class name, paragraph, to every p element in your document, then style those elements through that class, but why bother? Using the element name will produce the same result with no extra effort.

there are other properties besides the width in the id fullpage.

I'm not quite sure what you're getting at, there. If you think using an element name as a selector somehow makes limits the range of possible CSS properties, it doesn't.

Mike

**wishiwasageek** · 05-11-2005, 03:24 AM

Mike,
what I mean is that the Body properties change on some of the webpages ie. on some pages I don't want the attributes of #fullpage but I do want the attributes of say #bigpages, and I still want both pages to access the same CSS file to use the other css properties for the other elements, classes and id's I've set up.

Does that make sense? or should I still not do it...Probably ID is wrong selecter and I should name them CLASS but the principle is still the same isn't it?

WIWAG

**wishiwasageek** · 05-11-2005, 03:30 AM

I have tried this before:

Originally Posted by Mike/Jschauer

Code:

* html body { width: expression(Math.min(document.documentElement.clientWidth - 20, 600));

do you know if it stuffs up in FF1.03?

WIWAG

**jscheuer1** · 05-11-2005, 03:39 AM

I'm just going by what Mike said and the fact that it is introduced by the * html hack that renders it invisible to all browsers except IE when I say, no.

Thread: setting max-width of BODY element in IE

Thread Tools

Search Thread

setting max-width of BODY element in IE

Bookmarks

Bookmarks

Posting Permissions