/* Leveller version 4 [wip] Cross-browser cross-platform centred design developed on my latest project. html {height:101%} * {margin:0; padding:0} body { position:relative; text-align:center; width:760px; margin:0 auto; color:#000; background:#fff; } body * { font:100.01%/130% Verdana, Helvetica, sans-serif; text-align:left; _width:760px } So what does what? html {height:101%} Permanently displays vertical scrollbars in Firefox and Netscape. Prevents centred designs jumping 10 pixels when the amount of content is less than a window full. * {margin:0; padding:0} Removes margins and padding from everything. This means it'll need to be added to lists, blockquotes, etc. position relative; Added as a fix to prevent positioned elements staying still when resizing the browser window. text-align:center; Centres everything in the body. width:760px; States the width of the body. I hear everywhere that this doesn't work. Sorry I have to disagree, it does in this circumstance. margin:0 auto; Centres the body area. color:#000; background:#fff; Yada yada yada. font:100.01%/130% Verdana, Helvetica, sans-serif; The usual font-sizing (see leveller version 1). Note I still suggest that 76.1% should be considered the minimum font size for content text. text-align:left Restates left alignment for all elements inside the body. _width:760px In IE only the block level elements have the width set, as unfortunately IE v5 doesn't understand body width. Don't believe me? Check the centred content test page. Tested: PC: Firefox v1.07, IE v5.0, IE v5.5, IE v6.0, Opera v7.54, Opera v8.5, Netscape v6.23, Netscape v8.03. Mac: IE v5.2, Firefox v1.07, Safari v1, Opera v7.54, Opera v8.5, Mozilla v1.51, Netscape v7.2, Top of page Font-sizing em versus % Personally for time-honoured reasons I use percents. Though provided the body font-size is stated as a percent then there is no reason to not use ems (unless you're supporting ancient browsers). */ /* border-style:solid; border-width:1px; border-color:black */ /*layout*/ * {margin:0; padding:0} * img {border-width:0px} html{height: 101%;} body {text-align:center; background-color:#707070; font:100.01%/130% Verdana, Helvetica, sans-serif; color:#ffffff;} #container{width: 800px; height:100%; margin-right:auto; margin-left:auto; margin-top:2px; margin-bottom:0px; padding:0px; text-align: left; background-color:#ffffff; vertical-align: top; border-style:solid; border-width:0px 1px 0px 1px; border-color:#555555} #header_container{height:194px; margin:0px; padding:0px; text-align: left; background-color:#ffffff; vertical-align: top; border-width:0px} #header {vertical-align: top} #content_container{height:100%; margin:0px; padding:0px; text-align: left; background-color:#ffffff; border-width:0px} #intro_image {float:left; padding:0px 0px 3px 50px} #side_menu_container {float: right; width: 185px; height: 100%; margin-left: 3px; padding: 0px; text-align: left; background-color:#ffffff; border-width: 0px; color: #99a9f5;} #side_menu_container_intro {float:right; width: 167px; height: 250px; margin-left: 3px; padding: 0px; text-align: left; background-color:#ffffff; border-width: 0px; color: #99a9f5; background-image: url(images/side_menu_bg.gif); background-repeat:repeat-y; background-position:left;} /* universal left menu */ #home .home, #news .news, #about .about, #people .people, #research .research, #trials .trials, #media .media, #links .links, #contacts .contacts, #protocols .protocols, #physician_resources .physician_resources, #patient_resources .patient_resources, #working_group .working_group, #join_us .join_us, #aaa .aaa a {color:#f26aad!important} #side_menu_container2 {font-size:20px; font-weight:normal; margin:5px 0px 5px 15px; line-height:30px} #side_menu_container2 a:link {color:#8796db; text-decoration:none;} #side_menu_container2 a:hover {color:#8796db; text-decoration:none; border-style:solid; border-width:0px 0px 1px 0px; border-color:#99a9f5} #side_menu_container2 a:visited {color:#8796db; text-decoration:none;} /* old color #99a9f5 */ #side_menu_active {color:#f26aad; font-weight:normal; text-decoration:none;} #side_menu_container2 ul {line-height:20px; padding:0px 0px 10px 20px; font-size:10px} #side_menu_container2 li {font-size:11px} #text_container {float:left; width: 610px; height: 100%; margin:0px; padding: 0px; text-align: left; background-color:#ffffff; border-width: 0px; color: #7289f0; background-image: url(images/side_menu_bg.gif); background-repeat:repeat-y; background-position:right;} #text_container a:visited {color:#49790f; text-decoration:underline} #text_container a:link {color:#77b62a; text-decoration:underline;} #text_container a:hover {color:; text-decoration:underline} #text_content {margin: 10px 15px 35px 35px; text-align:justify} #text_content ul, ol {margin: 0px 0px 0px 30px; font-weight:normal; font-size:12px; list-style-position:inside} #text_content p {margin: 0px 0px 15px 0px; font-weight:normal; font-size:12px} #text_content_protocols {margin: 10px 15px 35px 35px; font-size:12px; text-align:justify} #text_content_protocols p {margin: 0px 0px 5px 0px; font-weight:normal; font-size:12px} .spacer {margin: 0px 0px 15px 0px;} h1 {width:; color:#f26aad; margin: 0px 0px 15px 0px; font-size:15px; font-weight:bold} h2 {width:; color:#f26aad; margin: 30px 0px 15px 0px; font-size:15px; font-weight:bold} h3 {margin: 0px 0px 10px 0px!important; padding: 10px 0px 0px 0px!important; font-weight:bold!important; font-size:12px!important} h4 {margin: 0px 0px 5px 0px!important; font-weight:bold!important; font-size:12px!important} h5 {font-weight:bold; font-style:normal; font-size:15px} .publications {color:} .author {font-size:10px} a:visited.publications {color:#49790f; text-decoration:none} a:link.publications {color:#77b62a; text-decoration:none;} a:hover.publications {color:; text-decoration:underline} .abs_title {font-weight:bold; font-style:normal; font-size:115%} .img_left {margin: 5px 20px 5px 0px; float:left; font-size:9px; color:#777777} .img_center {margin: 5px 0px 5px 0px; text-align: center; font-size:9px; color:#777777} .protocols_closed {color:red} .protocols_open {color:#027EDE} .protocols_pending {color:#FF9A23} .protocols_bold {font-size:11px; font-weight:bold} .protocols_no {font-size:11px; font-weight:bold; color:red} .protocols_yes {font-size:11px; font-weight:bold; color:#027EDE} .protocols_awaiting {font-size:11px; font-weight:bold; color:#FF9A23} #intro_footer_container{height:100px; margin:0px; padding:0px; text-align: left; background-color:#ffffff; border-width:0px} #footer2_container{height:6px; margin:0px; padding:0px; text-align: left; background-color:#ffffff; border-width:0px} #footer_container{height:350px; margin:0px; padding:0px; background-color:#c0c0c0; background-image: url(images/pre_header_bg.jpg); color:#ffffff; font-size:10px; text-align: right; border-width:0px;} #footer_container a {padding:0px 2px 0px 2px; border-style:solid; border-width:1px 1px 1px 1px; border-color:#ffffff} #footer_container a:visited {color:#ffffff; text-decoration:none} #footer_container a:link {color:#ffffff; text-decoration:none;} #footer_container a:hover {color:#b0b0b0; background-color:#ffffff; text-decoration:none} #copyright {padding:1px 5px 0px 0px;} .newsContent {} .newsItem {} .newsItem a.newsTitle, .newsItem a.newsTitle:visited {text-decoration: none; font-weight:normal; cursor: pointer!important; cursor: hand;}