Centering ............................................................................................
Figure 11-3 illustrates one way to center a paragraph, but what if you want to
freeze its size as well as centering it? In other words, you want it to remain in
the middle of the browser and resist being resized (as in Figure 11-3) if the user
stretches the browser window. The following code issupposed to do just that:p {margin-left: auto; margin-right: auto; width: 200px;}However, at the time of this writing, Internet Explorer version 6 chokes on the
preceding code and simply sticks the paragraph against the left side (using
no left margin). Mozilla Firefox and other browsers get it right, however, as
you can see in Figure 11-4:This is one of the few instances where Internet Explorer 6 fails to correctly
interpret a CSS style. This technique of setting margin left and right to autois
technically the correct way to center and freeze the size of elements in a CSS
style. I’m hoping that IE gets on the bandwagon soon.Using !DOCTYPE to force IE to comply ...........................................
You can make IE render the previous example (and some other kinds of CSS
rules) by inserting the following line of code at the top(above the <html>
element) of your page of code. Here’s how it looks:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN” ><html>
<head><style>
p {margin-left: auto; margin-right: auto; width: 200px;}
</style>Figure 11-4:
Mozilla can
handle
using auto
margins to
center an
element. IE
cannot.