The following discussion addresses a handful of advanced CSS design topics that we all eventually encounter in the 'real world' of web production. These topics are worthy of exploration in an Advanced CSS course, and I will only be able to introduce the concepts in this venue. But I leave you with resources for independent study if you need to employ these techniques in your web designs after you've completed this course.

We will talk about the following techniques:

Image Replacement

Image Replacement:

This image...

Chapter One

...instead of this text...

Chapter One

Image Replacement is the practice of using a graphical representation of text in place of normal text, and is usually applied to web page titles and headings. As we learned in a previous lecture, when relying solely on the fonts that are natively resident on current computers, the list is so variable that about the only true control that a web designer has over font choice is the specification of a serif or sans-serif typeface.

In response to this limitation, some web designers create text images in Photoshop which display unique and pleasing typefaces that mesh with their web page designs instead of using normal text. However, this practice flies in the face of both accessibility and separating content from presentation. Screen readers cannot interpret an image, and even using the ALT attribute fails in many cases. Some people also have their browser image display turned off (with CSS on). Additionally, the proliferation of new types of user agents may or may not support images. In the past few years a number of image replacement methods have evolved to circumvent font limitations but retain accessibility.

The idea is to include both the normal text AND the text image so that the graphically pleasing image is seen most of the time but the plain text heading is still available to screen readers and image-disabled user agents. The links below provide an overview, page links, and coding for current image replacement methods.

Negative Margins

In Lab 5, Three Stacked DIVs Open in a New Window, you explored the effects of negative margins. You saw how you could overlap containers by simply applying negative margins—this was a very simple application of a very powerful property that can be applied to achieve flexible layouts.

If you wanted to rearrange elements in your layout, you could change the markup so that containers which appear at the top or the left column of the page appear first in your markup. If elements are placed in the normal flow, the element that appears first in the markup will be placed at the top of the page, and elements that follow will be placed, one after another, below preceding elements. Similarly, if elements are floated left, each element will be placed to the right of the element preceding it, as long as there is room for the element in the container's width.

Negative margins can also be used to rearrange document elements out of their normal order in the document hierarchy without modifying your markup. Applying negative margins is a powerful way to achieve flexibility in your design. This is another way that CSS enables separation of content from presentation, making web sites more maintainable and easier to change.

As an example, open your completed Lab 5 "Three Stacked DIVs" project in Firefox (you'll be making some temporary changes in the CSS file, so you'll want to use either Firebug or the WDT).

Initially, your page should look similar to this:

initial, stacked DIVs

Using Firebug or WDT (use whichever one you are more comfortable with), remove the negative margin in the second DIV, aptly named Div2.

#Div2 { color: #000; background-color: #E1EDF3; border: 2px #4387D2 solid; margin: -20px; margin: 0px; height: 50px; }

We've simply removed the property that causes the DIVs to overlap. All of the DIVs are positioned in the page in their default position in the normal flow of the document. Now your page should look like this:

back to normal flow

Now, let's say that you wish to modify the layout such that the first DIV in the markup, "Div1", appears between Div2 and the third DIV, "Div3".

The modified layout would be:

rearranged DIVs

One way to achieve this new layout would be to rearrange the DIVs in the markup from:

<body> <div id="content"> <div id="Div1"> ... XXX ...</div> <div id="Div2"> ... YYY ... </div> <div id="Div3"> ... ZZZ ... </div> </div> </body>

... to:

<body> <div id="content"> <div id="Div2"> ... YYY ... </div> <div id="Div1"> ... XXX ...</div> <div id="Div3"> ... ZZZ ... </div> </div> </body>

However, if Div1 contains the main content of the page, it is beneficial to keep Div1 at the top of the markup for accessibility to screen readers, as well as being favorable for indexing by search engines.

Using negative margins, we can rearrange the position of the DIVs on the page without changing the markup; thus keeping Div1 at the top of the markup. Here's how:

Make the following changes to the rules for Div1 and Div2 in your style sheet:

#Div1 { color: #000; background-color: #BCCBDC; border: 2px #354B64 solid; height: 50px; margin: 54px 0 0; }   #Div2 { color: #000; background-color: #E1EDF3; border: 2px #4387D2 solid; margin: 0px; margin: -108px 0 54px; height: 50px; }

As you can see, all I've done was increased the top margin of Div1 to move it lower down the page, and adjusted the margins for Div2. By modifying the top margin of Div2 to –108 pixels, I've moved Div2 up to the position formerly occupied by Div1. The bottom margin of Div2 was also adjusted to push down Div3 so that it does not overlap Div1.

I changed the order that the DIVs appear on the page without modifying the markup at all!

The power of negative margins is really showcased when you apply negative margins to rearrange containers in column-based layouts.

This is demonstrated in the Stylin' book, "A Template with Negative Margins", pp. 167-171. I have created an example of the completed lesson for you to examine. Note that this example is a fixed-width design.

The resources below describe the process for creating liquid layouts that reorder columns using negative margins.

In Week 9 you were introduced to basic, single-level vertical and horizontal navigation menus. However, some web sites are complex and may call for a multi-level menu system. The Stylin' textbook covers the creation of drop-down menus in chapter 7. There are many other variations of CSS-based multi-level horizontal and vertical list-based menus to be found, but they all have a serious drawback... only the top level of the menu is fully accessible. According to an article published by the University of Washington Open in a New Window , "the only way to ensure that all users have access to secondary menus is to populate the primary menu items with links that lead users to a separate page where they can access the secondary menu items."

There are a number of multi-level menu systems available today that incorporate CSS with JavaScript which enhances multi-level menu accessibility. However, none of these menus is 'perfect' in every scenario. John Faulds offers an excellent comparison of currently available drop-down menu methods in his article, "Dropdown low down Open in a New Window." This is an excellent place to get the big picture on what the issues are with the currently available multi-level menu methods. Additionally, the article links to each of the menu developers' web sites where further information, tutorials and code can be obtained.

To augment the textbook, the links below offer several tutorials and code snippets that will help you get started with building one of the more popular types of drop-down menus bearing the unlikely name, "suckerfish".

Browser Workarounds

As I've stated throughout the quarter, this course is focused on standards-compliant web design Open in a New Window using XHTML and CSS. The main benefit of this strategy is that your web page layouts will be rendered consistently across modern browsers as long as you account for the minor differences amongst the modern browsers. Further, any web site that is designed this way will be ready for the growing number and variety of standards-compliant user agents Open in a New Window and the requirements of RDF Open in a New Window and web services.

Nevertheless, there has been a bit of discussion in the COIN 65 Course Forum regarding CSS layout issues with IE/Win, mostly with version 6.

Whether or not you can disregard IE6/Win users depends on your target audience. For tech-savvy Windows users, if they are not already taking advantage of the benefits of using Firefox or Opera, they would likely not object too much to the suggestion that they should upgrade to a standards-compliant (and less vulnerable) browser to view your web page. However, if your page is intended to appeal to the general public, you will need to ensure that your web pages render properly in IE6/Win, since it is has the largest marketshare at the moment.

Regardless, although IE6 (and below) for Windows exhibit the lion's share of standards-compliance issues, the reality is that IE6 is not completely alone in regards to CSS bugs. You'll need a strategy to deal with browsers that have CSS bugs.

Since this course is not the venue for examining all CSS browser workarounds (such a topic could be the subject of an entire course!), I will leave you with several resources that will give you a solid foundation of methods to deal with the various browser issues.

There are often several alternatives to resolve browser issues. Generally, the workarounds employ the following methods: browser hacks, browser filters, and IE conditional comments.

Browser hacks and browser filters are advocated by CSS purists because they generally do not require non-semantic elements in the markup; thus leaving the markup pristine. CSS workarounds implemented in external style sheets can be easily added or removed as necessary, with minimal to no impact on any of the many pages of the web site. Though some browser hacks do not validate (a common argument against the use of CSS hacks), hacks which do not validate are unacceptable according to Tantek Celik Open in a New Window, the father of the IE Box Model hack.

Folks who prefer IE conditional comments over CSS hacks usually cite the fact that most hacks depend on the lack of CSS support or incorrect implementation of CSS in order to workaround an issue. Consequently, a CSS hack may break if an updated browser implements CSS correctly.

For example, there are several instances where pages with IE/Win hacks are now broken when viewed in IE7. The Microsoft IE Blog Open in a New Window encourages designers to use IE conditional comments instead of CSS hacks. Though proprietary, IE conditional comments have no impact on other browsers, and generally are not affected by updates which fix browser bugs. Standards advocates argue that IE conditional comments add weight to the markup.

Ultimately, the workaround that you employ will depend on your general philosophy and the specific issue (and/or browser) that you are working around. Below are several sources of information on browser workarounds and related resources.