BoldUlysses
06-20-2008, 02:53 PM
Of course it always happens that as soon as I recommend something as a fix in another thread, I find a flaw in it myself.
Most of my pages so far have been horizontally centered. I tried the auto margins method (http://www.456bereastreet.com/lab/centered/horizontal/), but for some reason it wasn't working for me, so I had to resort to the negative margins method (http://www.bluerobot.com/web/css/center2.html). However, that required some javascript to justify the page should the browser window's horizontal size drop below the container width. And besides the obvious code bloat, it wreaked havoc if anyone would try to print the page.
I discovered today that my problem was the universal reset I had placed at the top of my CSS file:
* {
margin:0px;
padding:0px;
border:0px;
}
It's a great thing to have except that whatever values for those properties in my stylesheet I had set to auto would return to 0. In other words, the code for the auto margins centering method:
#container{
position:relative;
width:700px;
height:100%;
margin:0 auto;
}
would, because of the universal reset, be equivalent to this:
#container{
position:relative;
width:700px;
height:100%;
margin:0 0;
}
So much for centering using that method.
However, after I took the time to "customize" my universal reset, like so:
html, body, p, h1, h2, h3, h4, img, table, tr, td, ul, li, hr, a {
margin:0px;
padding:0px;
border:0px;
}
the auto margin centering method works. Notice the absence of div from the "customized" reset, so that the reset "skips over" my container CSS (form elements are also absent from the reset, but that's another story). Auto can now really be auto for my container margins, no more extraneous code or unneeded javascript. And printing works fine again.
Just thought I'd share that little victory this morning.
Most of my pages so far have been horizontally centered. I tried the auto margins method (http://www.456bereastreet.com/lab/centered/horizontal/), but for some reason it wasn't working for me, so I had to resort to the negative margins method (http://www.bluerobot.com/web/css/center2.html). However, that required some javascript to justify the page should the browser window's horizontal size drop below the container width. And besides the obvious code bloat, it wreaked havoc if anyone would try to print the page.
I discovered today that my problem was the universal reset I had placed at the top of my CSS file:
* {
margin:0px;
padding:0px;
border:0px;
}
It's a great thing to have except that whatever values for those properties in my stylesheet I had set to auto would return to 0. In other words, the code for the auto margins centering method:
#container{
position:relative;
width:700px;
height:100%;
margin:0 auto;
}
would, because of the universal reset, be equivalent to this:
#container{
position:relative;
width:700px;
height:100%;
margin:0 0;
}
So much for centering using that method.
However, after I took the time to "customize" my universal reset, like so:
html, body, p, h1, h2, h3, h4, img, table, tr, td, ul, li, hr, a {
margin:0px;
padding:0px;
border:0px;
}
the auto margin centering method works. Notice the absence of div from the "customized" reset, so that the reset "skips over" my container CSS (form elements are also absent from the reset, but that's another story). Auto can now really be auto for my container margins, no more extraneous code or unneeded javascript. And printing works fine again.
Just thought I'd share that little victory this morning.