Welcome to WebmasterWorld Guest from 184.108.40.206
Forum Moderators: not2easy
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.
<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>
...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?
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.
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.)
padding: 0.5em 3em 1em 3em;
margin: 0.67em auto;
border: maroon solid 1px;
max-width: 45em; (Preformatted pages overflow at widths below 45em.)
} (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.)