Section 508 Compliance: BrainFacts

I was recently assigned a type of site I haven’t done in quite some time that is required to be 508 compliant. I’ve added the project to my “In Production” projects, and will announce when it is pushed live, But for now I am working on refreshing my knowledge of Section 508 requirements. If only .NET sites were easier to make compliant 🙂

CardioSmart Landing

New Landing Page Launch:

A quick project I just worked on launched on Friday morning. The new landing page for was put into place to start the redesign of The subpages throughout the site are still within an old design in the Ektron CMS, but the landing page was create to help promote their new NASCAR initiative and an eventual redesign to their site.

I did the HTML/CSS skeleton for this landing page, with minor jQuery customization that was already implemented by a co-worker.

Check it out.

Center a Page Vertically and Horizontally in HTML

To center a page vertically and horizontally in HTML is fairly simple. The method below works in all Windows browsers and I believe all Apple browsers, but it has trouble working in Linux browsers from what I’ve seen (I’ve seen it not work for the vertical alignment, only for horizontal, but this could have changed since).

Essentially all you do is:

  1. Position your container div absolutely.
  2. Place the top and left positions as 50%.
  3. Set a height and width (since this is also for centering vertically).
  4. Set the top and left margins to a negative number that is half the height and width you set. So if your width is 300 pixels, you’d set your margin-left to -150 pixels. If your height is 400 pixels, then set your margin-top to -200 pixels.


.wrapper_container {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 545px;
margin-left: -450px; /*set to a negative number 1/2 of your width*/
margin-top: -272px; /*set to a negative number 1/2 of your height*/
background: url("/images/ui/splash.jpg") top left no-repeat;
display: block;

Naturally most people just want to center horizontally, in which case everyone just sets the body tag to text-align center (for IE), and then the container div to margin: 0 auto; (for FF). This is fairly common practice, I’m just including it here for posterity.


body {
text-align: center;

.wrapper_container {
width: 980px;
margin: 0 auto;