[ PlainsCapital: Standards Based Layout ]

[Back to Alex Bischoff’s Portfolio]

Introduction

Hey there, I’m Alex Bischoff. I’m a freelance XHTML/CSS coder and I acted as lead developer for PlainsCapital’s relaunch of its site and subsidiary sites (PlainsCapital Bank, PlainsCapital McAfee Mortgage, and others). Formerly PNBFinancial, the company decided to redesign its sites as part of its company-wide rebranding.

The client provided the browser requirements of PC/IE 5.0+, PC/Netscape 6.1+ and Mac/Netscape 6.1+, with Safari included as a nice-to-have (a soft requirement). All of the browser requirements were met through a standards compliant layout utilizing valid XHTML 1.1 and CSS.

In addition to the client-required browser support, the site also properly renders in Safari, PC/Mozilla & Mac/Mozilla (including nightly builds), Konqueror, PC/Opera 7 and Mac/Opera 6 (which were the most recent Opera versions released on those respective platforms at the time of the site launch).

I’ve divided this document into four additional sections:
[ Structure | Code Spotlight | Browser Workarounds | Closing ]

Structure

At its simplest, the page is made up of a side-flanking navigation bar along with a primary content area. I chose to absolutely-position the navbar and allow the content area to exist in-flow. I could have floated-left the navbar, but I was unable to utilize that option due to bugs in PC/IE5.x — when floating elements within a container element, a subsequent element with clear specified will clear across all elements (not limiting the clear to the parent element).

So, if I had chosen to use a floated-left navbar and I also had some floated elements within the content area, a cleared element would not only clear past the floated elements in the content area but the navbar as well (pushing that element below the navbar). With the navbar positioned absolutely, even if PC/IE5.x chose to clear all elements across the page, the clear would only take effect through the content area (which is the desired behavior in the first place).

Code Spotlight

An area of code requiring some thought were the column effects (such as the two-column layour on the PlainsCapital Corporate home page and the three-column layout on the PlainsCapital Bank home page). In particular, the web designer on the project specified that the dividing lines between the columns should equally extend downwards to match the height of the column with the tallest content (whichever that might be).

As you may have already guessed, I floated each of the columns. And, in order to achieve the table-like effect of having the column-dividers extend downwards equally, I applied a background image to a container element (more on that in a bit). Here’s an example of code that would render three columns:

<div class="three-columns">

	<div class="first-column ">
		<p> […] </p>
	</div>

	<div class="second-column">
		<p> […] </p>
	</div>

	<div class="third-column">
		<p> […] </p>
	</div>

	<p class="section-break"></p>
</div>

There, the container element three-columns has a background image which creates the column dividers. And, because floated elements are taken out of flow, the background image wouldn’t consistently extend downward; so, I used an additional element within the container element with clear:all (the section-break) to ensure that the background image filled the three-column container.

Browser Workarounds

As I mentioned in the Structure section, I worked around IE’s buggy float implementation through absolutely-positioning the navbar and allowing the content area to exist in normal flow.

In addition to that, IE’s box model is also incorrect (with the exception of IE6 in strict mode). In short, the spec defines that padding is added to an element’s overall width (for example, an element with 100px width and 10px padding-left would have an overall width of 110px, but IE renders it as 100px).

To get around that, I employed Edwardson Tan’s Modified Simplified Box Model Hack. The advantage with the Modified SBMH is that it’s backwards and forwards compatible. Because IE6 can be made to follow the box model (in strict mode), the technique targets only IE versions before IE6. I felt confident in using the hack as existing IE versions are already known to work while future IE versions aren’t affected.

Closing

I’m available for front-end development within the Dallas metroplex and via telecommuting. My portfolio and resume are online with additional examples of my work.

Special thanks to Jason Johnston for his assistance as secondary developer on the project.

This document has an associated blog post.