I’ve been working for about 2 weeks on customizing MOSS masterpages. One issue in particular that I have had trouble resolving is the DOCTYPE declaration with CSS centering.
No DOCTYPE declaration preserves positioning of menus such as Site Actions, Views, My Links, etc., but won’t render my centered layout. It also collapses the content section when editing the page, to the point of being unable to use the tool pane editor.
Using DTD XHTML 1.0 Transitional fixes the centering and vertical height problems, but leaves me with action/meta-navigation menus that aren’t accessible in FireFox or Chrome. A Google search on any variety of terms related to these menus is largely unhelpful.
Finally, I have a working solution, even if it does feel like a hack. No DOCTYPE is specified, the body of the page is centered, and then the container div overrides that back to a normal left align. Lastly, to get those pesky meta-navigation menus to show up properly in FireFox and Chrome, I had to hunt down that last class, and set the z-index a little higher:
[sourcecode language="css"]
body {
margin:0;
padding:0;
text-align:center;
}
#container {
margin: 0 auto;
width: 90%;
min-width: 980px;
position:relative;
text-align:left;
}
.ms-MenuUIPopupBody {
z-index: 10; /*make sure meta nav menus are above other divs*/
}
[/sourcecode]
[sourcecode language="html"]
<div id="centerMe">
<div id="container">
[...]
</div>
<div>
[/sourcecode]
UPDATE: Don’t use “container” as a div ID, for centering your layout or anything else. It conflicts with javascript, apparently.
