(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
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.
Cheers, thanx for that.
I thought I was going mad!
WIWAG
#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:
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 (http://www.dynamicdrive.com/forums/showpost.php?p=7530&postcount=3), as long as you invoke Standards mode by including a complete DOCTYPE.
Mike
* 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?
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
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. :D 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.
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
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
I have tried this before:
Originally Posted by Mike/Jschauer
* html body { width: expression(Math.min(document.documentElement.clientWidth - 20, 600));
do you know if it stuffs up in FF1.03?
WIWAG :o
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.
Very diplomatic John!
I wouldn't hold you responsible if it did!! but thanx for your educated guess.
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.I see. On that basis, I'd probably use separate files; one for the common rules that apply to multiple document, and individual files that are specific to only certain documents. You could either use an @import rule in the individual files to include the common set, or use multiple link elements.
The reason why I'd prefer that structure is that it won't produce a monolithic file that could become difficult to edit. However, I can understand if you don't want to go down that road. In that case, stick with what you have. I made the comment because at first glance, there was no obvious reason for what you were doing (and I have seen people do very weird things for no reason).
[Re: max-width emulation] do you know if it stuffs up in FF1.03?As John said, most user agents won't use that rule. IE believes that the html element has an ancestor. Other users agents correctly understand that it is the root element (that's why 'html' appears in the DOCTYPE: <!DOCTYPE html ...>) and that there are no ancestors.
Even if a user agent did try to apply that rule, it is highly unlikely that it will support Microsoft's expression operator and treat the declaration as invalid; it will just ignore it.
Mike
So setting
body {max-width:650px;} in the CSS is bad then?
If not bad, is this cross browser friendly?
WIWAG :(
It's not bad or friendly. It will be ignored by IE, works fine in most other modern browsers.