Section 9.5. Tutorial: Styling Links

9.5. Tutorial: Styling Links

In this tutorial, you'll style links in a variety of ways, like adding rollovers and background graphics. You'll also create both vertical and horizontal navigation bars.

To get started, download the tutorial files from this book's companion Web site at www.sawmac.com/css/. Click the tutorial link and download the files. All the files are enclosed in a ZIP archive, so you need to unzip them first. (You'll find detailed instructions on the Web site.) The files for this tutorial are contained inside the chapter_09 folder.

9.5.1. Basic Link Formatting

Launch a Web browser and open the file chapter_09 links bathtub.html .

As usual, you'll be working on a page from CosmoFarmer.com. This page contains a variety of links (circled in Figure 9-11) that point to other pages on the site, links to pages on other Web sites, and an email address. Start by changing the color of the links in the main content area of this page.
Open bathtub.html in a text editor and place your cursor between the opening and closing <style> tags .

The page already has an external style sheet attached to it with some basic formatting, plus the <style> tags for an internal style sheet.
Add a new style to the internal style sheet :
```
 <style type="text/css">  #main a {     color: #8C1919; }  </style> 
```
This descendent selector changes the color of all <a> tags that are inside tags that have an ID of #main . The main body text on the page is wrapped in a <div> tag with an ID of #main . Adding and naming a <div> like this makes it easy to create styles that target just the HTML containing the page's main text. This style changes the color of the text for links, but only those inside this main body <div>. If you preview the page now, you'll see that the color of the link at the bottom of the pagewhich is contained in a separate <div> with a different IDisn't affected.

Now, time to remove that boring old underline beneath the link.
Add text-decoration: none ; to the #main a style you just created .

This removes the underline, but also makes the link less visible on the page. Remember you should always do something to make links stand out and seem clickable to your site's visitors .

Figure 9-11. Here's a basic Web page with links in their standard browser configurationunderlined and blue. In this case, some links point to other pages on the site, some point to other sites, and one is an email address. In this tutorial, you'll style each of these links differently.
Add font-weight: bold ; to the #main a style .

Now links appear in bold (other text may appear bold, too). Next you'll replace the underline, but you'll do it a bit more creatively, using a border instead of the text-decoration property.
Add a border declaration to the style, so it looks like this :
```
 #main a {     color: #8C1919;     text-decoration: none;     font-weight: bold;  border-bottom: 2px dotted #A5E410;  } 
```
The links really stand out, and using a border instead of the normal underline applied to links lets you change the line's color, size , and style (Figure 9-12, left). Time to take it a step further by adding a rollover effect, so the link's background changes color when the mouse moves over it.
Add a :hover pseudo-class style to the style sheet :
```
 #main a:hover {     background-color: #FCC423; } 
```
This pseudo-class applies only when the mouse is over the link. The interactive quality of rollovers lets visitors know the link does something (Figure 9-12, right).

Figure 9-12. With a couple of styles, you can change the look of any link. With the :hover pseudo-class, you can even switch to a different style when the mouse moves over the link (right).

9.5.2. Adding a Background Image to a Link

The email link at the bottom of the page remains unaffected by the styles you've created so far (Figure 9-13, top). That's fineyou have other plans for that mailto link. Since it points to an email address, clicking it doesn't take a visitor to another page, but instead launches an email program. To provide a visual cue emphasizing this point, you'll add a cute little email icon.

Add another descendent selector to the internal style sheet of the bathtub.html file :
```
 #legal a {     color: #666666;     background: url(/books/2/835/1/html/2/images/email.gif) no-repeat left center; } 
```
The email link's inside a <div> tag with an ID of legal , so this style affects only this link, and the color declaration makes it gray. The background property adds an image on the left edge of the link. Finally, the no-repeat value forces the graphic to appear just a single time. Trouble is, the graphic lies directly underneath the link, so it's hard to read the text (Figure 9-13, middle).
Add 20 pixels of left padding to the #legal a style you just created :
```
 padding-left: 20px; 
```
Remember that padding adjusts the space between content and its border. So adding some left padding moves the text over 20 pixels but leaves the background in place. One last touch: move the entire link a little away from the copyright notice.
Add 10 pixels of left margin to the style, so it finally ends up like this :
```
 #legal a {     color: #666666;     background: url(/books/2/835/1/html/2/images/email.gif) no-repeat left center;     padding-left: 20px;  margin-left: 10px;  } 
```
This small visual adjustment makes it clear that the icon's related to the link and not part of the copyright notice (Figure 9-13, bottom).

Figure 9-13. Just a few subtle touches can help make a link's purpose obvious. In this case, a plain link (top) becomes clearly identifiable as an email link (bottom).

9.5.3. Highlighting External Links

At times you may want to indicate that a link points to another Web site. In this way, you can give your visitors a visual clue that there's additional information elsewhere on the Internet, or warn them that they'll exit your site if they click the link. In the next few steps, you'll create a special style for external links.

Add this style to the bathtub.html internal style sheet :
```
 #main a.external {     background-image: url(/books/2/835/1/html/2/images/globe.png);     background-repeat: no-repeat;     background-position: right top;     padding-right: 18px;     border-bottom: none; } 
```
As with the email link style you just created, this style adds a background image. It places the image at the right side of the link. Setting the border-bottom property to none eliminates the green, dashed border that appears under links pointing to other pages on the CosmoFarmer site.

None of the external links on the page have changed yet. Now that you've got your new class style .external you should apply it to any external links you want to format.
In the page's HTML code, locate the three external links. (Hint: They're in an unordered list about two- thirds of the way down the page.) Add class="external" to each of the <a> tags :
```
 <li><a href="http://www.americanstandard-us.com/Products/products. aspx?area=bath&cat=8"  class="external"  >American Standard Bathtubs</a></li> <li><a href="http://www.clawfootsupply.com/editor/cast-iron-buying-guide.php"  class="external"  >Cast-iron tub buying guide</a></li> <li><a href="http://www.vintagetub.com/"  class="external"  >Vintage Tubs</a> </li> 
```
If you preview the page in a Web browser, you'll see those three links have a small globe icon at their right (Figure 9-14, top). The links higher up on the page are globe-free. They point to other CosmoFarmer pages, so you didn't apply the external class to them.

Tip: You've been learning about the rules for CSS 2.1 (the most widely supported version of CSS). But you can use a CSS 3 selector to automatically target any link beginning with http:// . Just change the name of the selector in step 1 above from #main a.external to #main a[href^='http://'] . When you use this selector, you don't have to apply classes to individual links as in step 2. The downside: Only Internet Explorer 7, Safari, Firefox, and Opera 9 recognize the selector. IE 6 folks won't see the style at all.

Next, give these links a rollover effect using the Pixy method described in Section 9.1.1. As a matter of fact, the background graphic you added in step 1 globe.png actually contains two images. Currently, only the top image is visible, and you want the graphic's position to shift when a visitor mouses over the link.
Immediately after the style you created in step 1, add the following style :
```
 #main a.external:hover {     background-position: right -24px;     color: #152D6A; } 
```
This style both changes the color of the text and adjusts the position of the background image. It moves the graphic up -24 pixels, essentially moving the globe image out of view and exposing a new rollover image.

There's one problem, however. The background color from the #main a:hover style (created in step 7 in Section 9.1.1) also appears. As you can see Figure 9-14, middle, the graphic obscures part of the background. It'll look better when you remove that background color.

Edit the style you just created by adding a background-color property :

 #main a.external:hover {     background-position: right -24px;     color: #152D6A;     background-image: url(/books/2/835/1/html/2/images/globe_highlight.png);  background-color: #FFF;  }

This declaration sets the background color to white, matching the white background of the page (Figure 9-14, bottom).

Figure 9-14. Using a class style, you can format external links differently than other links on the page. A globe icon is one way to indicate that a link leads out into the greater Web (top). You may have to tweak a style to overcome properties inherited from other styles, like the background color inherited from a more generic style (middle). Here, the fix is removing a background color from the link's :hover style (bottom).

9.5.4. Marking Visited Pages

To round out the look of the links on this page, you'll add one more style. This one applies only in one certain casewhen a link's been visited. Using the :visited pseudo-class, it's easy to add a graphic marker indicating pages someone has already been to.

Add one last style to the style sheet :
```
 #main   a:visited {     color: #999; } 
```
Now, when the Web browser has already visited one of the pages linked to from this page, it makes that link gray. By making the color duller and lighter than other links, you make the link visually recede from the page (Figure 9-15, top). But just in case that's not enough information to let people know they've been to the linked page before, you'll make it even more obvious with a checkmark.
Edit the style you just created by adding a background property and some padding :
```
 #main a:visited {     color: #999;  background: url(/books/2/835/1/html/2/images/check.gif) no-repeat right center;     padding-right: 18px;  } 
```
Preview the page, click one of the links, and then hit your browser's back button to see how the link changes appearance once visited (Figure 9-15, bottom).

A finished version of this tutorial is in the chapter_09_finished links folder.

9.5.5. Creating a Vertical Navigation Bar

In this exercise you'll turn a plain old list of links into a spectacular navigation bar complete with rollover effects and a "You are here" button effect.

In a text editor, open chapter_09 nav_bar nav_bar.html .

As you can see, there's not much to this file yet. There's an internal style sheet with one rule setting up some basic properties for the <body> tag, and an unordered list consisting of six links. It looks like example one in Figure 9-16. Your first step is to add some HTML so you can target your CSS to format the links in this list.
Locate the opening <ul> tag and add id="mainNav" to it, so it looks like this :
```
 <ul id="mainNav"> 
```
The ID attribute identifies this list as the main navigation area. Use this ID to build descendent selectors to format only these links (and not just any old link on the page). (See Section 3.1 for the story on descendent selectors.)

Figure 9-15. Let folks know they've clicked a link by employing the :visited pseudo-class. You can subtly identify visited links by making their color recede into the background (top), or give them a sense of completion by adding a checkmark graphic (bottom).

Figure 9-16. While it may feel like a lot of steps, transforming a plain unordered list of links into a sophisticated navigation bar requires only a few styles.
Below the body style in the internal style sheet, add a new style :
```
 ul#mainNav {     margin: 0;     padding: 0;     list-style: none; } 
```
This style applies only to a <ul> tag with an ID of mainNav . It removes the indent and bullets that browsers apply to unordered lists, as shown in #2 in Figure 9-16. Next, you'll start formatting the links.
Add a descendent selector to format the links in the list :
```
 #mainNav a {     color: #000;     font-size: 1.1em;     text-transform: uppercase;     text-decoration: none; } 
```
This style defines the basic text formatting for the links. It sets the color and font size, makes all letters uppercase, and removes the line usually found underneath links (# 3 in Figure 9-16). Now start making the links look like buttons .
To the #mainNav a style, add the following border and padding properties :
```
 border: 1px dashed #999; padding: 7px 5px; 
```
If you preview the file now, you'll see a few problems (#4 in Figure 9-16): The borders overlap and the boxes aren't the same width. That's because the <a> tag is an inline element, so the width of the box is just as wide as the text in the link. In addition, top and bottom padding don't add any height to inline boxes, so the borders overlap. (See Section 7.2.4 for a discussion of inline boxes.) You can fix these problems by changing how a browser displays these links.
To the #mainNav a style, add display: block ; .

You've changed the basic display of the <a> tag so that it acts like a paragraph or other block-level element, with the links neatly stacked one on top of the other. The only problem now is that they also extend the full length of the browser windowa little too wide for a button. You can fix this by constraining the width of the <ul> tag's style.

Note: If you preview the page in Internet Explorer 6 or earlier, you'll notice a gap between each nav button. Remain calm. You'll fix this bug in step 1 in Section 9.1.1.
In the internal style sheet, locate the ul#mainNav style and add width: 175px ; to it .

With the list's width now set to 175 pixels, the links still expand, but they're limited to the width of their container (the <ul> tag). In many cases, you'll have a list of links inside some layout element (like a sidebar) that already has a set width, so you'll be able to skip this step. (You'll learn how to add sidebars in Part 3.)

Now for the fun part.
Add background properties to the #mainNav a style, like so :
```
 #mainNav a {     color: #000;     font-size: 1.1em;     text-transform: uppercase;     text-decoration: none;     border: 1px dashed #999;     padding: 7px 5px;     display: block;  background-color: #E7E7E7;     background-image: url(/books/2/835/1/html/2/images/link.png);     background-repeat: no-repeat;     background-position: left center;  } 
```
These lines add a gray background color to the links and a non-repeating image at the left edge of each button (#5 in Figure 9-16). You still have a couple of things to fix: The link text overlaps the icon, and the border between each button is 2 pixels thick. (Technically, the borders are still just 1 pixel thick, but the bottom and top borders of adjoining links are creating a 2-pixel line.)

Note: Using the background shorthand property you can write the code in step 8 like this: background: #E7E7E7 url(/books/2/835/1/html/2/images/link.png) no-repeat left center ;. See Chapter 8 (Section 8.5) for the details.
Remove the top border and adjust the padding for the #mainNav a style, so it looks like this :
```
 #mainNav a {     text-decoration: none;     color: #000000;     font-size: 1.1em;     text-transform: uppercase;     border: 1px dashed #999999;  border-bottom: none;     padding: 7px 5px 7px 30px;  display: block;     background-color: #E7E7E7;     background-image: url(/books/2/835/1/html/2/images/link.png);     background-repeat: no-repeat;     background-position: left center; } 
```
The text of each link sits clear of the icon and the borders look great except for one thing. The last link's bottom border is now gone. (Sometimes CSS feels like two steps forward, one step back!) But you have a few ways to fix this snafu. One way is to create a class style with the proper border-bottom setting, and then apply it to just that first link. But it would be easier to apply a bottom border to the <ul> tag containing the list of links. (Since there's no padding on that tag, there's no space separating the top of the <ul> from the top of that first link.)
Add a top border to the ul#mainNav style so that it looks like this :
```
 ul#mainNav {     margin: 0;     padding: 0;     list-style: none;     width: 175px;  border-bottom: 1px dashed #999;  } 
```
There you have it: A basic navigation bar using borders, padding, background color and images (# 6 in Figure 9-16).

9.5.6. Adding Rollovers and Creating "You Are Here" Links

Now it's time to add some interactive and advanced features to this nav bar. First, you'll add a rollover effect to the buttons in your main navigation bar. That way, the buttons change to show your visitor which button she's about to click.

It's also considerate to let your visitor know which page of your site she's on. Using the same HTML nav bar you already have, you can make this bit of interactivity happen automatically. You simply make the button's format change to match the page's section. Sounds simple, but it does require a little planning and setup, as you'll see in the following steps.

The rollover effect is easy, so get that out of the way first:

In the nav_bar.html file, add the following style to the end of the style sheet :
```
 #mainNav a:hover {     font-weight: bold;     background: #B2F511 url(/books/2/835/1/html/2/images/go.png) no-repeat 5px 50%; } 
```
This style sets the button's hover state. It makes the text inside the button bold, and (using the background shorthand property) changes the background color and image (Figure 9-17). Now, moving the mouse over any of the buttons instantly changes its look. (Open the page in your Web browser and try it yourself.)

Figure 9-17. With some basic CSS, it's easy to create interactive rollover effects for navigation buttons. You can even automatically highlight the section of the site in which the current page is located.

Note: You can also use the Pixy method, as in step 3 in Section 9.1.1, to create the same rollover effect using just one graphics file. That approach has the added benefit of avoiding the slight delay that appears when a visitor first rolls over one of the links.

Next, make your navigation bar more informative by highlighting the button that matches the section in which the page is located. To do so, you need to identify two things in the nav bar's HTML: 1) the section a page belongs to, and 2) the section each link points to. For this example, assume that the page you're working on belongs to the Features section.

Note: Alternatively, you can create a class style that changes the appearance of a link, and apply it to the link representing the page's section. For a horoscope page, you'd apply the class to the Horoscope link in the nav bar: <a href="/horoscopes/" class="u_r_here">Horoscopes</a> .
Locate the <body> tag, and then add id= "feature" , like so :
```
 <body id="feature"> 
```
Now that you know what section this page belongs to, you can use a descendent selector to create special CSS rules that apply only to tags on pages within the Features section. Next, you need to identify the section each link applies to, which you accomplish by adding some IDs to those links.
In the nav bar's HTML code, locate the Features link, and then add id="fea-tureLink" so the tag looks like this :
```
 <a href="/features/"  id="featureLink"  >Features</a> 
```
This ID uniquely identifies this link, providing the information you need to create a style that applies only to that link.

You need to ID the other links in the navigation bar as well.
Repeat step 4 for each of the other links using the following IDs: homeLink, expertLink, quizLink, projectLink , and horoscopeLink .

You're done with the HTML part of this exercise. Now it's time to create some CSS. Because you've ID'd the page and the link, it's easy to create a descendent selector to highlight the Features link.
Add another style to the page's style sheet :
```
 body#feature a#featureLink {     background: #FFFFFF url(/books/2/835/1/html/2/images/bg_here.png) no-repeat 95% 50%;     padding-right: 15px;     padding-left: 30px;     font-weight: bold; } 
```
You've seen all these properties before. The interesting part's the selector body#feature a#featurelink . This is a very specific selector that applies only to a link with an ID of featureLink that's also inside a <body> tag with an ID of feature . If you change the ID of the page to home , for example, the link to the Features section's no longer highlighted.

Preview the page in a browser to see the effect: The Features link now has a white background and a paperclip icon. To make this work for the other links, you need to expand this selector a little OK, make that a lot .
Edit the selector for the style you just added, like so :
```
  body#home a#homeLink, body#feature a#featureLink, body#expert a#experLink, body#quiz a#quizLink, body#project a#projectLink, body#horoscope a#horoscopeLink {  background: #FFFFFF url(/books/2/835/1/html/2/images/bg_here.png) no-repeat 95% 50%;     padding-right: 15px;     padding-left: 30px;     font-weight: bold; } 
```
Yes, that's a lot of CSS. But your set-up work here has a big payoff. This style now applies to every link in the nav bar, but only under certain conditions, which is exactly how you want it to behave. When you change the id attribute of the <body> tag to quiz , the link to the Quiz gets highlighted instead of the link to the Features section. Time to take your work for a test drive.
Change the id attribute of the <body> tag to quiz like this :
```
 <body id="quiz"> 
```
Preview the page, and wham! The Quiz link's now highlighted with a white background and a paperclip icon (Figure 9-17). The secret at this point is to just change the ID in the <body> tag to indicate which section of the site a page belongs to. For a horoscope page, change the id to id="horoscope" in the <body> tag.

Note: Ready to take this design further? Try adding a rollover effect to complement the style you created in step 6. (Hint: Use the :hover pseudo-class as part of the selector like this: body#quiz a #quizLink:hover .) Also try adding a different graphic for the Home link. (You have a home.png file in the images folder to use.)

9.5.7. Fixing the IE Bugs

What would a CSS tutorial be if there weren't any Internet Explorer bugs to fix? Unfortunately, the navigation bar doesn't work quite right in that browser. First, an annoying gap appears between each button (even in IE 7, as of this writing). In addition, IE 6 and earlier treat only the textnot the entire area of the buttonas clickable (Figure 9-18). In other browsers, moving the mouse over any part of the background (including the empty space to the right of the link text) highlights the link.

Figure 9-18. Internet Explorer has some problems with the navigation bar at this point. It adds space between each link and will highlight a link only if the cursor (circled) is directly over the text link..

At the bottom of the style sheet, add the following :
```
 #mainNav li {     display: inline; } 
```
This bit of CSS changes the natural behavior of list items from block-level elements to inline elements. This workaround doesn't make much sense theoretically, but it at least removes the space between each link in the navigation bar without negatively affecting other browsers. The next style makes IE 6 and earlier treat the entire area of the button as clickable.
After the style you just added, insert this IE-only style :
```
 * html #mainNav a {     height: 1px; } 
```
This style uses the * html hack to apply CSS properties to just IE 6 and earlier. IE 7 completely ignores this rule, as do all other browsers. The style declaration itself is nonsense : It attempts to set the height of the link to 1 pixel, something that IE ignores, but which forces that browser to see the background of the button as part of the link. (See the box in Section 11.1 for the geeky details.)
Preview the page in Internet Explorer on Windows .

The navigation bar should now work as well in that browser as it does in more savvy browsers like Firefox, Opera, and Safari.

To see the completed version of this navigation bar, see the file chapter_09_finished nav_bar nav_bar_vertical_finished.html .

Note: When creating specific styles targeted to just Internet Explorer, it's a good idea to isolate them from your other styles. Not that they're contagious, but they usually include nonsense CSS that for weird reasons smoothes out IE kinks. You don't want to read your style sheet later and get confused about why you included some bizarre CSS. In fact, the preferred method is to put IE-only styles in external style sheets and attach them using Microsoft's conditional comments feature. Get the full story in Section 14.5.2.

9.5.8. From Vertical to Horizontal

Suppose you want a horizontal navigation bar that sits at the top of the page. No problemyou did most of the hard work in the last part of this tutorial. Just modify that page a little to spread the buttons along a single line. (You'll use the nav_bar.html file you just completed, so if you want to keep the vertical nav bar, then save a copy of the file before proceeding.)

Make sure you've completed all the steps above to create the vertical navigation bar, and have the file nav_bar.html open in your text editor .

Now you'll see how easy it is to change the orientation of a navigation bar. Start by cleaning up some of the work you already did.
In the nav_bar.html file's style sheet, remove the #mainNav li style you created in step 1 in Section 9.1.1 .

That style was necessary only to remove the gap IE inserts between links when buttons are stacked one on top of the other, and that's no longer an issue when the buttons appear side by side.

Tip: Cleaning up a style sheet by removing unnecessary styles is a good habit to get into. If you don't, you can end up with unused styles in your style sheets, causing unnecessary file size and potential confusion down the line. And here's another reason to put IE-specific styles either together at the bottom of a style sheet or in their own external style sheets: When you no longer have to support a particular version of IE, you can clean up your CSS by simply removing those styles.

You also need to remove the width you set for the <ul> tag in step 7 in Section 9.5.5. That width prevented the nav buttons from spanning the entire length of the page. But since the <ul> needs to spread out much wider to contain the side-by-side buttons, this width has to go.
Find the ul#mainNav style, and then remove the width: 175px ; declaration .

And now it's time for the big secret of vertical nav barsplacing the buttons side by side.
Add a new style to your style sheet (directly below the ul#mainNav style is a good spot) :
```
 #mainNav li {     float: left;     width: 12em; } 
```
This style applies to the <li> tag (the list items that hold each link). The first declaration floats the tag to the left. In this way, each <li> tag attempts to wrap around to the right side of the previous <li> tag. (You saw the same effect in the photo gallery tutorial in Section 8.6.3.) Also, setting the width of the <li> tag defines the width of each button. Here, a value of 12ems provides enough space to contain the longest link nameHoroscopes. When you're working with longer links, you need to increase this value.

Tip: Using an em value instead of a pixel value for the width of the buttons makes the width adjust to the visitor's browser. If the buttons' widths were set to pixels, and a visitor increased the browser's font size, then the text in the button might get wider than the button itself. When you use ems, the button simply gets wider as the font gets larger.

If you preview the page now, you'll see the basics are complete. All that's left are some cosmetic enhancements (see the circled areas of #1 in Figure 9-19). First, the bottom border you created in step 10 in Section 9.1.1 runs the entire length of the <ul> tagwider than the navigation buttons themselves . Even stranger, that bottom border's no longer on the bottomit's on top of the navigation buttons! In addition, since the buttons sit side by side, their left and right borders combine to make a 2-pixel border between each button. You'll fix that problem now.

Figure 9-19. Changing a vertical stack of navigation buttons into the much shorter, side-by-side format of a horizontal navigation bar only takes a couple of steps. Most of your effort involves tweaking styles for cosmetic considerations such as borders and background image placement.
In the #mainNav a style change border-bottom: none ; to border -left: none ; .

This change removes the left border so that the borders don't double up between buttons, and at the same time adds a border to the bottom of each button. But that <ul> tag's bottom border is still on top of the buttons, and now the nav bar is missing a border on the far left button (see circled areas of #2 in Figure 9-19). No problemjust change the border on the <ul> tag.
Locate the ul#mainNav style and change border-bottom: 1px dashed #999999 ; to border -left: 1px dashed #999999 ; .

If you preview the page now, you'll see that the border above the buttons is gone, but there's still no left border (#3 in Figure 9-19). You're witnessing one of the complications of using floats. That is, floating the list items removes them from the normal flow of the document, so Web browsers no longer see them as part of the <ul> tag, and the <ul> tag shrinks down to nearly no heightthat's the reason the ul's bottom border appeared on top as well. (If this whole scenario sounds confusing, it is. That's why there's an entire section of Chapter 11 dedicated to dealing with the issuesee Section 11.1.1 for the details.)

Fortunately, while the problem is complex, the solution is simple. Just float the <ul> tag as well.
Add float: left ; to the ul#mainNav style. The completed style should look like this :
```
 ul#mainNav {     margin: 0;     padding: 0;     list-style: none;     border-left: 1px dashed #999999;  float: left;  } 
```
Finally, that paperclip aligned to the right edge of the "You are here" button looks funny (#4 in Figure 9-19). You'll switch its position to the left edge of the button.

Note: Since the <ul> tag is floated, other page elements try to wrap around it. It's a good idea to set the clear property on the next element immediately after the navigation bar as described in Section 7.6.2. That property forces whatever's following the navigation bar to sit below it rather than try to wrap to the nav bar's right side.
Locate the "You are here" style you created in step 6 in Section 9.5.6. (It's the one with the crazy, long-winded selector.) Change its background position from 95% 50% to 5px 50% . The style should now look like this :
```
 body#home a#homeLink, body#feature a#featureLink, body#expert a#experLink, body#quiz a#quizLink, body#project a#projectLink, body#horoscope a#horoscopeLink {     background: #FFFFFF url(/books/2/835/1/html/2/images/bg_here.png) no-repeat  5px 50%;  padding-right: 15px;     padding-left: 30px;     font-weight: bold; } 
```
Preview the page, and you'll find a fully functional horizontal navigation bar (#5 in Figure 9-19). And guess what? It works perfectly even in Internet Explorer.

To see the finished version, open the file chapter_09_finished nav_bar nav_ bar_horizontal_finished.html .

Note: You may want to center the text inside each button. If so, you need to do two things: Add text-align: center ; to the #mainNav a style, and adjust that style's left-padding until the text looks absolutely centered.