Redefining CSS Declarations

CSS val warning

[keyplyr]

margin: 0;
padding: 0;
max-width: 900px;
margin-left: auto;
margin-right: auto;

I want the page with no margins. The page if 100% fluid and thusly looks terrrible stretched out to large monitor resolutions so, in anticipation of upcomming support for max-width, I have set it to 900 pixels wide. To center this I included margin-left: auto; and... margin-right: auto;.

This works and the W3C CSS val passes it without error, but gives a warning about this "redefinition" of margin.

Is the warning implying that some browsers will get confused? Is there a better way to achieve the same end? Thanks.

[tedster]

I assume that the warning is only a standard alert, letting you know that your code addresses the same element twice within one rule. That can easily happen by accident, so the parser just mentions it to inform you. It's still valid CSS, and I'd think that browsers which support max-width will have no problems.

<added> Just fired up a test, and Opera 6 does fine with it, as it is. But oddly enough, when I add zero margin and padding to the body element, then Opera stops following the max-width declaration.</added>

[keyplyr]

...But oddly enough, when I add zero margin and padding to the body element, then Opera stops following the max-width declaration.

Well, I can dig that defining the same element twice within one rule would be conflicting, but if I leave out the margin: 0 then the 800x600 view gets an unwanted gap around the screen.

I'm wondering if Opera6 is just not ready for primetime with max-width. Unfortunatewly I can't test with NS6, which to my knowledge is currently the only browser to fully support this element, although Moz0.9.7 is reported [webmasterworld.com] to also.

Removing the margin-left: auto; margin-right: auto; would stop the val warning but may not accomplish anything other than losing the center. Where are all the CSS gurus anyway?

[tedster]

if I leave out the margin: 0 then the 800x600 view gets an unwanted gap around the screen

Right- there's default margin and padding. I think I understand what you're trying to do - you're trying to be ready for the future and at the same time accommodate today's browser, which is not quite there. That's a good way to go, and the warning is not about INVALID code.

I live with warnings and outright invalid stuff all the time, depending on what browsers I need compatibility for. As long as you know why you get a warning and you consciously choose to have that code, I'd say there's no big deal.

Even if browsers evolve to full support of max-width, I still don't see any other pure CSS way to code for your goal. The only fully compliant way would be to write the margin:0 code in your main css. Then sniff for available width -- when it's over 900px, use document.write() to add a new css document into the cascade with the margin:auto rules.

[keyplyr]

...write the margin:0 code in your main css. Then sniff for available width -- when it's over 900px, use document.write() to add a new css document into the cascade with the margin:auto rules

Yeah, that'll work - thanks and I'm sure this topic will be played out many times in the future.

[rjohara]

I spent a lot of time trying to get max-width to work on two of my sites (including my personal one, username + .net). It's tricky, but the CSS below seemed to work for me. I've included my own comments on the problems I encountered. If the page is broken for anyone I'd like to know. Many browsers don't yet support max-width; they should just get a wide body element when the window is expanded.

html {
padding: 0.67em 1.33em;
} (Padding is needed here to support max-width and margin properties on body. If max-width is set and body margins are auto, a narrow window has no margins and a wide window has body aligned left. If html is given padding that prevents body margins from disappearing in narrow windows (or gives that appearance; they disappear but the html padding remains), and it also causes body content to be centered in a wide window because body margins are auto.)

body {
padding: 0.5em 3em 1em 3em;
margin: 0.67em auto;
border: maroon solid 1px;
max-width: 45em; (Preformatted pages overflow at widths below 45em.)
min-height: 95%;
} (Body padding set in ems because percents trigger nasty 'jumping text' bug in Win IE6. Percents would be better but just can't be used at present.)