Error processing SSI file

Woven with CSS: Quick Draw MacFly

Shaping and Styling with CSS

A large part of making a CSS layout that is real-world viable involves due consideration to all major graphical desktop browsers. At the time of this writing (February 2003), that would include:

  • MSIE4-6 (PC and Mac)
  • Netscape 4-7 (PC and Mac)
  • Opera 5-7 (PC and Mac)
  • Mozilla 1+ (PC and Mac)
  • Safari (Mac)

If we stick to valid CSS-1 and the known parts of CSS-2 that work in all modern browsers, we're in good shape... except for version 4 models. A safe strategy is to use two style sheets. The first sheet is linked to our page and read by all CSS-savvy browsers, including version 4 models. The second sheet is imported and carries the rules that work only in version 5 browsers. Since version 4 browsers cannot read an imported style sheet, this means that we can make pages that are quite gorgeous in modern browsers, while still having some manner of safe styling in older browsers. It is, in our opinion, a much better approach than having Netscape 4 users see a page like [ this ].

Version 4 Browser Style Sheet Overview

The base style sheet is linked to our page. Here is what the link tag looks like in the <head> area of our document:

<link href="macflyv4.css" rel="stylesheet" type="text/css">

The Full Version 4 Style Sheet:
Illustrated and Annotated

/* We use a Background Image for Netscape 4 because
it cannot span the entire window with a div bg color */
body {
	background-color: #FF9900;
	margin: 36px 36px 0 240px;
	padding: 0;
	background-image: url(images/graf_pbg.gif);
	background-repeat: repeat-x;
}

We use a simple background image to create a window-wide white header for Netscape 4 because that browser cannot render full-width background colors applied to a DIV. This is entirely optional and depends on how much or little you are willing to compromise.

The Left body margin is set to 240px to leave room for the absolutely positioned sidebar.

h1, h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
}


/* Netscape 4 Needs Font Styles at the P and DIV Level*/

p, div {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#header { margin: 0;}

#header p {
	margin: 0;
	font-size: 12px;
	text-align: right;
}

#mainwrapper {margin: 0;}


/*Sidebar is absolutely posititioned for NN4 because
it's more stable than floating. We will be floating the sidebar in the
version 5 style sheet*/

#sidebar {
	position: absolute;
	left: 24px;
	width: 180px;
	top: 136px;
	color: #666666;
}
#maincontent p {font-size: 14px;}
#maincontent h1 { margin: 0 0 12px 0;}
#sidebar h2 { margin: 0 0 12px 0;}
#sidebar p {font-size: 12px; color: #666666;}
#footer {margin: 48px 0 0 0;}
#footer p {
	margin: 0;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#sidebar a:link, #sidebar a:visited  {color: #000;}

/*Hover is Supported by MSIE4*/

#sidebar a:hover, #sidebar a:active  {color: #999;}

Pause and View

Let's view the styled page as it looks with the version 4 style sheet. Remember, this is the version 4 browser page, so look at it with a version 4 browser.

| View the Version 4 Styled MacFly Page |

Version 5 Browser Style Sheet Overview

The version 5 style sheet is imported. The @import directive is used and is placed in the <head> area below the linked style sheet, like this:

<link href="macflyv4.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
@import url("macflyv5.css");
-->
</style>

Note: We wrap the URL inside parentheses and full quotes, which ensures that both Netscape 4 and MSIE4 cannot read the style sheet. There has been some debate on whether MSIE4 can read an imported style sheet using this syntax. Our tests seem to indicate that MSIE4.5 on the MAC and 4.0 on the PC cannot see an imported style sheet using this syntax. Comments from actual testers based on observed data is most welcome, indeed.

The Full Version 5 Style Sheet:
Illustrated and Annotated

body {
	margin: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-image: none;
}
#header {
	background-color: #fff;
	padding: 12px;
	margin: 0 0 48px 0;
}
#mainwrapper {margin: 0 10%;}
#sidebar {
	position: static;
	float: right;
	border-bottom: 2px dotted #666;
}
#maincontent p {margin: 0 228px 12px 0; text-align: justify;}

The three rules in this box are essentially what shape the page in version 5 browsers. #mainwrapper envelopes all page elements between the header and footer and sets a 10% margin both left and right, which centers the layout. The #sidebar rule in this style sheet sets a right float. The width of the sidebar DIV is set in the version 4 style sheet and cascades down (floated elements must have an assigned width). The key to making this floated DIV stable in a wide range of browsers is setting the right margin value of all paragraphs inside the main content DIV (#maincontent p) to 228px. This creates a zone for the floated sidebar without having to float and/or clear any other DIV. We can easily shift our sidebar to the left side of the page by modifying the float property in #sidebar from right to left; and then flip-flopping the right and left margin properties in the #maincontent p selector (margin: 0 0 12px 228px).

#sidebar p {margin: 0 0 12px 0;}
#footer {
	background-color: #fff;
	padding: 12px;
	margin: 48px 0 0 0;
}
#footer p {letter-spacing: 3px; margin: 6px 0px;}
#sidebar a {width: 180px; padding: 0 3px;}
#sidebar a:link, #sidebar a:visited  {
	color: #fff;
	display: block;
	background-color: #FF9900;
	border: 1px solid #eee;
	text-decoration: none;
}
#sidebar a:hover, #sidebar a:active  {
	background-color: #fff;
	border: 1px solid #666;
	color: #999;
}

The link styles in this box are what make version 5 browsers display the sidebar links as buttons. Display: block is what causes modern browsers to render all links as hot, clickable boxes... just as if we were using buttons or images.

Well, there you have it. MacFly revealed.

View MacFly in a Version 5 or Higher Browser

View MacFly in a version 5 or higher browser...

| View the Version 5 MacFly Page | Download MacFly and its Assets |

Notes

While intermediate-to-advanced CSS authors will likely have no problems understanding the techniques we've used, we do ask that you let us know of any errors or problems. If you are new to CSS or if you are a Dreamweaver user and have absolutely no idea where to begin, the PVII newsgroups are open 24/7 for discussion relating to this article. Outlook Express users will likely be able to load up our server by clicking the link below, while others may need to configure our server in their news reading software.

| PVII Newsgroups | server name: forums.projectseven.com

Related PVII Links and Products

Our bestselling E-Book Dreamweaver MX: Building on Solid Foundations is a great choice if you'd like to explore the cutting edge of practical CSS.

Dreamweaver MX: Building on Solid Foundations

Third Party Links

| Eric Meyer | CSS Layouts |

| Previous Page: Building the Structure |

Error processing SSI file