@charset "utf-8";
/* CSS Document */

/*#topNavContainer { position:relative; top:412px; left:200px; width:450px; margin: 0 auto;  }*/



/*#topNav2Wrap { height:239px; clear:both; xfloat:left;  }
	#topNav2 {
    width: 448px; height: 36px; left:195px; top: 22px; 
    margin: 0 auto; padding: 0;
    position: relative; }
  	
	#topNav2 li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  	#topNav2 li, #topNav2 a {
    height: 36px; display: block;}*/
	
/*    #topNav2AboutUs {left: 0; width: 85px;}
    #topNav2Products {left: 85px; width: 75px;}
    #topNav2Treatments {left: 165px; width: 100px;}
    #topNav2WhatsNew {left: 265px; width: 114px;}
    #topNav2Contact {left: 376px; width: 73px;}	*/


	

	
#treatmentsLeftWrap { width:209px; float:left; margin: 63px 0 0 29px; }
#treatmentsLeftWrap img { margin: 0 0 6px 0}
#treatmentsRightWrap { width:610px; float:right; margin: 63px 30px 0 0; text-align:left; font:Arial, Helvetica, sans-serif, "Trebuchet MS"; color:#BDBAB5; }

.treatmentsPrice { float:left; color:#BDBAB5; font-weight:bold; font-size:80%; padding: 10px 0}
.treatmentsBookNow { float:right; font-size:90%; font-weight:bold; padding: 10px 0}
.treatmentsIntro {padding:5px 0 0 0; margin:0}
.treatmentsDesc { font-size:76%;}
.treatmentContainer { xborder-top:1px solid #EFEFEF; xborder-bottom:1px solid #EFEFEF; float:left; width:610px}


/*SON OF SUCKER FISH DROP DOWNS MODIFIED*/	
#topNav2, #topNav2 ul {
	padding:0;
	margin:0;
	float:left;
	width:inherit;
	}
	
#topNav2 ul li {	}	
  	#topNav2 li, #topNav2 a {
    display: block;} 
	
#topNav2 ul.drop {
	background:#EDE9DD;
	padding:5px;
	width:inherit;
	clear:both;
	float:left;
	margin-top:36px;
	color:#7B775E;
	}

#topNav2 ul.drop li {
    width:inherit;
	clear:both;
	text-align:left;
	padding:5px
	}
	
#topNav2 ul.drop a {
	
	color:#7B775E;
	text-decoration:none;
	font-weight:normal;
	clear:both;
	float:left;
	font-size:1.2em
	}

	
#topNav2 a {
	display: block;
	/*width: 10em;*/
	float:left;
	clear:both;
	width:100px;
}

#topNav2 li {
	float: left;
	/*width: 10em;*/
}

#topNav2 li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#topNav2 li:hover ul {
	left: auto;
}

#topNav2 li:hover ul, #topNav2 li.sfhover ul {
	left: auto;
}
/*END SUCKERFISH*/

/*SPRITE BACKGROUP POSITIONING	 */

	
#topNavContainer2 a.aboutus {	
	background-position:left top;
	width:85px;
	}
	
#topNavContainer2 a.products {	
	background-position:-85px 0;
	width:75px;
	}

#topNavContainer2 a.treatments {	
	background-position:-165px 0;
	width:100px;
	}

#topNavContainer2 a.whatsnew {	
	background-position:-265px 0;
	width:114px;
	}	
	
#topNavContainer2 a.contactus {	
	background-position:-376px 0;
	width:73px;
	}	
	
#topNavContainer2 a.aboutus:hover {	
	background-position:left -36px;
	}
	
#topNavContainer2 a.products:hover {	
	background-position:-85px -36px;
	}

#topNavContainer2 a.treatments:hover {	
	background-position:-165px -36px;
	}

#topNavContainer2 a.whatsnew:hover{	
	background-position:-265px -36px;
	}	
	
#topNavContainer2 a.contactus:hover{	
	background-position:-376px -36px;
	}	
	
	
#topNavContainer2 a#active1 {	
	background-position:left -64px;
	}
	
#topNavContainer2 a#active2 {	
	background-position:-113px -64px;
	}

#topNavContainer2 a.#active3 {	
	background-position:-197px -64px;
	}

#topNavContainer2 a#active4{	
	background-position:-299px -64px;
	}	
	
#topNavContainer2 a#active5{	
	background-position:-387px -64px;
	}	
	
#topNavContainer2 a#active6 {	
	background-position:-468px -64px;
	}
		
/*END NAVIGATION*/


/*h1.swap {
  height:22px;
  background-repeat:no-repeat;
  }
h1.swap span {display:none;}



Please note: The original technique (FIR) described in the body of this article is no longer recommended for use, as it makes the hidden text completely inaccessible for certain screen readers. Instead, see one of the alternative techniques mentioned at the end of the article under “Important Notes“.

This tutorial assumes a base-level knowledge of CSS, but not much more. Beyond that, it also assumes care will be taken to use these methods fairly and responsibly with well-structured markup.
Introduction

Do you still crave the typographic control of creating headlines and decorative type with images instead of pure HTML text? Even with all the options we have for styling text with CSS, sometimes there’s just nothing that beats the indulgence of opening up Adobe Photoshop, then setting type in your favorite font at just the right size, kerning, and tracking. You know if you save it as an image and place it on a webpage, anyone with an image-enabled browser will see your typographic mastery just as you intended. Right?

But we’ve been beaten over the head so many times with preaching that claims using images for Web type will send us sliding straight to hell. So much so, we’ve dropped our visual standards and given up on the idea that type on the Web can ever be beautiful again. That is, until CSS font downloading is perfected and reliable many years from now.

We’ve been taught images aren’t as accessible as pure marked-up HTML text. This is especially true for assistive browsing software and small-screen devices. So we feel guilty using images for type. Images don’t show up in text-only browsers like Lynx, nor in browsers where users disable image rendering. Even if we’re responsible, always including equivalent alt attributes for each image tag, search robots often index meta data (like alt and title) differently than pure HTML text. This is understandable if we consider the logical importance of heading text when it’s appropriately marked up inside <hn></hn> tags. We won’t even touch on file size problems and download times caused by excessive image use.

Let’s put all that knowledge on hold for a moment. Images aren’t that bad, are they? With a few simple style tricks and a little cautious planning and testing, type on the Web can be guiltlessly beautiful and equally accessible (see notes below) and perfectly indexable, all at the same time. It’s time to spread those wings again.
The Concept

In principle, the concept is very simple. We write a short string of text (eg. “Hello world!”) and surround it with two sets of basic HTML tags. Then we use CSS to hide the HTML text and display a background image containing the exact same words instead of the original text. That’s it. Replacing text with an image is no more complicated than this.

Before we write any CSS, let’s start with some basic markup. Imagine we have a simple HTML snippet like the following:


<div>
  <span>Hello world!</span>
</div>

Of course we could apply style directly to that text. But we want more drama and finesse than any font-family or text-transform property can ever bring us. We want flourish. After all, if we’re saying “Hello!” to the world, we might as well do it with panache, right?

We pick out the perfect typeface for our worldly salutation: Shelley Allegro. A well-known script face in the design world, we discover Shelley has just the right flair to win the hearts of millions as we say Hello. We guess this font may only be available on 1.65% of the computer systems out there. So we take the time to create an image representing the same Hello message. The image will display our message in Shelley Allegro in every image-enabled browser, regardless of whether the font is installed on that system:

Hello world!

We take note of the image height, (35 pixels) since it will be useful a bit later.

So we have some HTML, a glorious text message, and one extraneous image. What do we do with them? Let’s roll up our sleeves and use a little style to replace the text with our new image.
Fahrner Image Replacement (FIR)

This method for replacing text with an image is named for Todd Fahrner, one of the persons originally credited with the idea. You may wonder why there are two sets of tags surrounding our Hello message in the HTML above. A div and a span. Technically the two tags could be anything. In fact, your custom solution may require something a bit more semantic. But we’ll choose these two generic wrappers for this example.

The CSS which executes the swap consists of two simple rules. The first uses background properties to pull our image into the background of the div:


div {
  background-image:url("hello_world.gif");
  background-repeat:no-repeat;
  height:35px;
  }

Note the height property in that rule. It matches the actual height of our image, ensuring the div is tall enough to display all of our image, yet takes up no more height than necessary. The background-repeat property ensures the image only appears once, instead of tiling across the width of our browser window.

The only remaining task is hiding the raw text which we left in our HTML. This is where span comes in. We need a second element so we can address it separately. Hiding the text is easy:


span {display:none;}

Combine those two rules with the HTML we wrote earlier, and we end up with a simple example. So simple, we wonder why it’s taken all this text so far to explain it?

Of course, we’d never leave our markup that simple. Nor would we likely be able to continue using such elementary style rules. Otherwise, every div we use would contain our “Hello world!” background image, and anything we place inside <span></span> tags would magically disappear.

Let’s move on to a few real-world examples.
Example 1: Page Titles

One example of text-replacement is readily available on many of the main pages of stopdesign.com. Notice the primary titles for each section or page (ie.: the words “Recent Log Entries” on the front page) They aren’t created by clever font-styling rules in the CSS. Those are images. Lovingly crafted to match the typeface of the logo. Matted to appropriate colors matching the background on which each is placed. It’s a subtle effect, but one that’s part of this site’s identity.

If we view the source, or toggle the CSS off, we see the title image is not part of the markup for that page. In fact, where most of us probably see an image, the markup uses simple <h1>’s and pure HTML text to label that page and proclaim the title’s prominence and hierarchy in the document structure.

Screen readers, small-screen devices, and indexing robots will should* ignore any screen stylesheets, getting the pure text marked up as a simple <h1>.

One method of matching images to specific pages is to base the title image on the section in which it lives. Each body could be given an id or class unique to that section. Through the use of descendant selectors, each <h1> could be tied to an appropriate image based on the class of the body that contains it. But each section may contain more than one type of page, and we may want a more appropriate title for subpages of each section.

Instead, it may be wiser to assign each title a unique id matching or abbreviating the words it represents. For example, the Recent Log Entries title on stopdesign’s front page is assigned an id of “t-reclog“. The “t-” prefix is added to help create values which won’t be accidentally repeated in other element id values. “t-” always stands for title in this case. This id makes the markup a little redundant, but allows for the greatest flexibility in assigning any title image to any page.

Each replaced title needs a couple simple style properties assigned to it which are common to all replaced titles. In addition to the id, each title which needs to be “swapped” with an image is given a class of “swap“. The swap class exists so the same properties can be applied to all replaced titles without having to repeat those common properties in every unique title id rule. Alternatively, it avoids the need to specify every unique id appearing throughout the site just to create one rule of common properties. The application of the swap class ensures only those <h1>’s possessing class="swap" get setup for replacement. Other non-replaced <h1>’s can exist elsewhere on the site without needing to create rules which override the swap rules. The class addition is a small sacrifice in markup purity for huge simplification gains in the CSS.

For replaced titles on stopdesign.com, the common CSS looks like:


h1.swap {
  height:22px;
  background-repeat:no-repeat;
  }
h1.swap span {display:none;}


h1#t-recentlog {background-image:url("/img/title_reclog.gif");}
h1#t-articles {background-image:url("/img/title_articles.gif");}
h1#t-portfolio {background-image:url("/img/title_port.gif");}
*/